高频使用的JS工具有哪些

这篇文章主要介绍了高频使用的js工具有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇高频使用的JS工具有哪些文章都会有所收获，下面我们一起来看看吧。

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]";}// 是否是时间undefinedfunction 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:ssconst 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:ssconst 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);  },};

关于“高频使用的JS工具有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“高频使用的JS工具有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。