18个高频使用的JS工具方法总结

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

前言
1. 回到顶部
2. 删除数组指定项
3. 获取 url 某一个参数
4. 复制文本
5. 禁止复制文本
6. 复制文本带版权信息
7. 判断数据类型和数据值
8. ua 环境判断
9. 时间格式转换
10. 函数防抖
11. 全屏/退出全屏
12. 禁止打开控制台调试
13. 密码强度展示
14. 五星好评
15. 保留 n 位小数
16. 金额转大写
17. 常用正则判断
18. 解决运算精度丢失的问题

前言

将自己做前端6年以来在项目中使用很高频的工具方法整理了出来，分享一下，虽然现在有很多工具类也提供了这些方法，封装的也更为完善，简单的调用一下就可以使用，但是我还是分享出来了。是希望能够知其然也知其所以然，不要只会调用 api，也要会写 api。

1. 回到顶部

较为平滑的回到顶部方案

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
scrollToTop();

2. 删除数组指定项

项目中经常会使用的工具方法，传入目标数组和目标元素，返回一个新数组。

const removeArray = (arr, item) => {
  let result = [];
  let index = -1;
  if (!(arr != null && arr.length)) {
    return result;
  }
  result = arr;
  if (Object.prototype.toString.call(item) == "[object Object]") {
    index = arr.findIndex((i) => isEqualObject(i, item));
  } else {
    index = arr.findIndex((i) => i === item);
  }
  if (index > -1) result.splice(index, 1);
  return result;
};

const isEqualObject = (obja, objb) => {
  const aProps = Object.getOwnPropertyNames(obja);
  const bProps = Object.getOwnPropertyNames(objb);
  if (aProps.length != bProps.length) {
    return false;
  }
  for (let i = 0; i < aProps.length; i++) {
    let propName = aProps[i];
    let propA = obja[propName];
    let propB = objb[propName];
    if (!objb.hasOwnProperty(propName)) return false;
    if (propA instanceof Object) {
      if (!this.isEqualObject(propA, propB)) {
        return false;
      }
    } else if (propA !== propB) {
      return false;
    }
  }
  return true;
};

removeArray([{ name: 1 }, { name: "1" }, 1, "1"], { name: "1" });

3. 获取 url 某一个参数

用于获取url传参获取参数

const getUrlParam = (key) => {
  const url = new URL(window.location.href);
  const value = url.searchParams.get(key);
  return value;
};
getUrlParam("id");

4. 复制文本

复制各种自定义的文本，浏览器兼容性高

const copyText = (text) => {
  const clipboardData = window.clipboardData;
  if (clipboardData) {
    clipboardData.clearData();
    clipboardData.setData("Text", text);
    return true;
  } else if (document.execCommand) {
    const el = document.createElement("textarea");
    el.value = text;
    el.setAttribute("readonly", "");
    el.style.position = "absolute";
    el.style.left = "-9999px";
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);
    return true;
  }
  return false;
};
copyText("Test");

5. 禁止复制文本

body {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

// 禁止右键菜单
document.body.oncontextmenu = (e) => {
  return false;
};
// 禁止选中文字
document.body.onselectstart = (e) => {
  return false;
};
// 禁止复制
document.body.oncopy = (e) => {
  return false;
};
// 禁止剪切
document.body.oncut = (e) => {
  return false;
};
// 禁止粘贴
document.body.onpaste = (e) => {
  return false;
};

6. 复制文本带版权信息

document.body.oncopy = (event) => {
  event.preventDefault();
  const clipboardData = event.clipboardData;
  let text = window.getSelection(0).toString();
  text = `${text}\n这是插入的文本\n 作者：于五五\n`;
  if (clipboardData) {
    clipboardData.clearData();
    clipboardData.setData("Text", text);
    return true;
  } else if (document.execCommand) {
    window.clipboardData.setData("Text", text);
  }
  return false;
};

7. 判断数据类型和数据值

很常用的工具类，用于校验数据是否合法

// 是否是字符串
function isString(obj) {
  return Object.prototype.toString.call(obj) == "[object String]";
}

// 是否是数字
function isNumber(obj) {
  return (
    Object.prototype.toString.call(obj) == "[object Number]" &&
    /[\d\.]+/.test(String(obj))
  );
}

// 是否是布尔
function isBoolean(obj) {
  return Object.prototype.toString.call(obj) == "[object Boolean]";
}

// 是否是数组
function isArray(obj) {
  return Object.prototype.toString.call(obj) === "[object Array]";
}

// 是否是对象
function isObject(arg) {
  if (arg == null) {
    return false;
  } else {
    return Object.prototype.toString.call(arg) == "[object Object]";
  }
}

// 是否是方法
function isFunction(arg) {
  const type = Object.prototype.toString.call(arg);
  return type == "[object Function]" || type == "[object AsyncFunction]";
}

// 是否是时间格式
function isDate(obj) {
  return Object.prototype.toString.call(obj) == "[object Date]";
}

// 是否是时间undefined
function isUndefined(arg) {
  return arg === void 0;
}

// 是否是空对象
function isEmptyObject(arg) {
  if (isObject(arg)) {
    for (var key in arg) {
      if (Object.prototype.hasOwnProperty.call(arg, key)) {
        return false;
      }
    }
    return true;
  }
  return false;
}

8. ua 环境判断

用来区分不同平台，常用在ios端做适配

const getUaInfo = () => {
  const ua = navigator.userAgent.toLowerCase();
  const Agents = [
    "Android",
    "android",
    "iPhone",
    "SymbianOS",
    "Windows Phone",
    "iPad",
    "iPod",
  ];
  let isPc = true;
  for (var i = 0; i < Agents.length; i++) {
    if (userAgentInfo.includes(Agents[i])) {
      isPc = false;
      break;
    }
  }
  return {
    // 是不是ios
    isIos:
      !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) || ua.includes("mac os x"),
    // 是不是安卓
    isAndroid:
      ua.includes("android") || ua.includes("Android") || ua.includes("Adr"),
    // 是不是微信环境
    isWeixin: ua.match(/MicroMessenger/i) == "micromessenger",
    // 是不是电脑端
    isPc: isPc,
  };
};

9. 时间格式转换

// Date转yyyy-MM-dd HH:mm:ss
const filterTimeByDate = (date, pattern = "yyyy-MM-dd HH:mm:ss") => {
  const o = {
    "M+": date.getMonth() + 1,
    "d+": date.getDate(),
    "H+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds(),
    "q+": Math.floor((date.getMonth() + 3) / 3),
    S: date.getMilliseconds(),
  };
  if (/(y+)/.test(pattern)) {
    pattern = pattern.replace(
      RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(pattern)) {
      pattern = pattern.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
    }
  }
  return pattern;
};
filterTimeByDate(new Date());

// 时间戳转yyyy-MM-dd HH:mm:ss
const timestampToTime = (timestamp) => {
  const date = new Date(
    String(timestamp).length > 10 ? timestamp : timestamp * 1000
  ); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  const Y = date.getFullYear() + "-";
  const M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  const D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
  const h =
    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  const m =
    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    ":";
  const s =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
};
timestampToTime(new Date().getTime());

// yyyy-MM-dd HH:mm:ss转时间戳
const timeToTimestamp = (time, isMilli = true) => {
  const timestamp = new Date(time).getTime(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  return isMilli ? timestamp : timestamp / 1000;
};
timeToTimestamp("2022-04-26 10:11:11");

10. 函数防抖

const debounce = (fn, delay) => {
  let timer = null;
  return function (e) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
};
document.addEventListener(
  "scroll",
  debounce(function () {
    console.log("执行");
  }, 2000)
);

11. 全屏/退出全屏

function toFullScreen() {
  let = document.documentElement;
  el.webkitRequestFullScreen
    ? el.webkitRequestFullScreen()
    : el.mozRequestFullScreen
    ? el.mozRequestFullScreen()
    : el.msRequestFullscreen
    ? el.msRequestFullscreen()
    : el.requestFullScreen
    ? el.requestFullScreen()
    : alert("当前浏览器不支持该功能");
}

function exitFullscreen() {
  let el = document;
  el.webkitCancelFullScreen
    ? el.webkitCancelFullScreen()
    : el.mozCancelFullScreen
    ? el.mozCancelFullScreen()
    : el.cancelFullScreen
    ? el.cancelFullScreen()
    : el.msExitFullscreen
    ? el.msExitFullscreen()
    : el.exitFullscreen
    ? el.exitFullscreen()
    : alert("当前浏览器不支持该功能");
}

12. 禁止打开控制台调试

用来防止部分用户通过源码攻击服务器，增加破解难度

setInterval(function () {
  check();
}, 4000);
const check = () => {
  function doCheck(a) {
    if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
      (function () {}["constructor"]("debugger")());
    } else {
      (function () {}["constructor"]("debugger")());
    }
    doCheck(++a);
  }
  try {
    doCheck(0);
  } catch (err) {}
};
check();

13. 密码强度展示

const checkPwd = (str) => {
  let Lv = 0;
  if (str.length < 6) {
    return Lv;
  }
  if (/[0-9]/.test(str)) {
    Lv++;
  }
  if (/[a-z]/.test(str)) {
    Lv++;
  }
  if (/[A-Z]/.test(str)) {
    Lv++;
  }
  if (/[\.|-|_]/.test(str)) {
    Lv++;
  }
  return Lv;
};

14. 五星好评

const getRate = (rate = 0) => {
  return "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
};
getRate(3);

15. 保留 n 位小数

const filterToFixed => (num, n = 2) {
    return parseFloat(num.toFixed(n), 10);
}

16. 金额转大写

商城项目里订单模块很常用的工具方法

const convertCurrency = (money) => {
  //汉字的数字
  const cnNums = new Array(
    "零",
    "壹",
    "贰",
    "叁",
    "肆",
    "伍",
    "陆",
    "柒",
    "捌",
    "玖"
  );
  //基本单位
  const cnIntRadice = new Array("", "拾", "佰", "仟");
  //对应整数部分扩展单位
  const cnIntUnits = new Array("", "万", "亿", "兆");
  //对应小数部分单位
  const cnDecUnits = new Array("角", "分", "毫", "厘");
  //整数金额时后面跟的字符
  const cnInteger = "整";
  //整型完以后的单位
  const cnIntLast = "元";
  //最大处理的数字
  const maxNum = 999999999999999.9999;
  //金额整数部分
  let integerNum;
  //金额小数部分
  let decimalNum;
  //输出的中文金额字符串
  let chineseStr = "";
  //分离金额后用的数组，预定义
  let parts;
  // 传入的参数为空情况
  if (money == "") {
    return "";
  }
  money = parseFloat(money);
  if (money >= maxNum) {
    return "";
  }
  // 传入的参数为0情况
  if (money == 0) {
    chineseStr = cnNums[0] + cnIntLast + cnInteger;
    return chineseStr;
  }
  // 转为字符串
  money = money.toString();
  // indexOf 检测某字符在字符串中首次出现的位置 返回索引值（从0 开始） -1 代表无
  if (money.indexOf(".") == -1) {
    integerNum = money;
    decimalNum = "";
  } else {
    parts = money.split(".");
    integerNum = parts[0];
    decimalNum = parts[1].substr(0, 4);
  }
  //转换整数部分
  if (parseInt(integerNum, 10) > 0) {
    let zeroCount = 0;
    let IntLen = integerNum.length;
    for (let i = 0; i < IntLen; i++) {
      let n = integerNum.substr(i, 1);
      let p = IntLen - i - 1;
      let q = p / 4;
      let m = p % 4;
      if (n == "0") {
        zeroCount++;
      } else {
        if (zeroCount > 0) {
          chineseStr += cnNums[0];
        }
        zeroCount = 0;
        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
      }
      if (m == 0 && zeroCount < 4) {
        chineseStr += cnIntUnits[q];
      }
    }
    // 最后+ 元
    chineseStr += cnIntLast;
  }
  // 转换小数部分
  if (decimalNum != "") {
    let decLen = decimalNum.length;
    for (let i = 0; i < decLen; i++) {
      let n = decimalNum.substr(i, 1);
      if (n != "0") {
        chineseStr += cnNums[Number(n)] + cnDecUnits[i];
      }
    }
  }
  if (chineseStr == "") {
    chineseStr += cnNums[0] + cnIntLast + cnInteger;
  } else if (decimalNum == "") {
    chineseStr += cnInteger;
  }

  return chineseStr;
};

17. 常用正则判断

// 校验昵称为2-9位中文
const validateName = (name) => {
  const reg = /^[\u4e00-\u9fa5]{2,9}$/;
  return reg.test(name);
};

// 校验手机号
const validateMobile = (mobile) => {
  const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
  return reg.test(mobile);
};

// 校验6到18位大小写字母数字下划线组成的密码
const validatePassword = (password) => {
  const reg = /^[a-zA-Z0-9_]{6,18}$/;
  return reg.test(password);
};

// 校验身份证号
const validateCardId = (cardId) => {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return reg.test(cardId);
};

18. 解决运算精度丢失的问题

用来解决前端计算金额时精度丢失的问题

const calculation = {
  // 加法
  plus(arg1, arg2) {
    var r1, r2, m;
    try {
      r1 = arg1.toString().split(".")[1].length;
    } catch (e) {
      r1 = 0;
    }
    try {
      r2 = arg2.toString().split(".")[1].length;
    } catch (e) {
      r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2));
    return (arg1 * m + arg2 * m) / m;
  },
  //减法
  subtract(arg1, arg2) {
    var r1, r2, m, n;
    try {
      r1 = arg1.toString().split(".")[1].length;
    } catch (e) {
      r1 = 0;
    }
    try {
      r2 = arg2.toString().split(".")[1].length;
    } catch (e) {
      r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2));
    n = r1 >= r2 ? r1 : r2;
    return ((arg1 * m - arg2 * m) / m).toFixed(n);
  },
  //   乘法
  multiply(arg1, arg2) {
    var m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString();
    try {
      m += s1.split(".")[1].length;
    } catch (e) {}
    try {
      m += s2.split(".")[1].length;
    } catch (e) {}
    return (
      (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
      Math.pow(10, m)
    );
  },
  //   除法
  divide(arg1, arg2) {
    var t1 = 0,
      t2 = 0,
      r1,
      r2;
    try {
      t1 = arg1.toString().split(".")[1].length;
    } catch (e) {}
    try {
      t2 = arg2.toString().split(".")[1].length;
    } catch (e) {}
    r1 = Number(arg1.toString().replace(".", ""));
    r2 = Number(arg2.toString().replace(".", ""));
    return (r1 / r2) * Math.pow(10, t2 - t1);
  },
};

以上就是18个高频使用的JS工具方法总结的详细内容，更多关于JS工具方法的资料请关注编程网其它相关文章！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉