--- theme: smartblue --- 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 4 天，[点击查看活动详情](https://juejin.cn/post/7080800226365145118?utm_source=web_feed&utm_medium=banner&utm_campaign=gengwen202204)。 --- ## 前言将自己做前端6年以来在项目中使用很高频的工具方法整理了出来，分享一下，虽然现在有很多工具类也提供了这些方法，封装的也更为完善，简单的调用一下就可以使用，但是我还是分享出来了。是希望能够知其然也知其所以然，不要只会调用 api，也要会写 api。 ### 1. 回到顶部较为平滑的回到顶部方案 ```js const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } }; scrollToTop(); ``` ### 2. 删除数组指定项项目中经常会使用的工具方法，传入目标数组和目标元素，返回一个新数组。 ```js 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传参获取参数 ```js const getUrlParam = (key) => { const url = new URL(window.location.href); const value = url.searchParams.get(key); return value; }; getUrlParam("id"); ``` ### 4. 复制文本复制各种自定义的文本，浏览器兼容性高 ```js 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. 禁止复制文本 ```css body { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } ``` ```js // 禁止右键菜单 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. 复制文本带版权信息 ```js 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. 判断数据类型和数据值很常用的工具类，用于校验数据是否合法 ```js // 是否是字符串 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端做适配 ```js 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. 时间格式转换 ```js // 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. 函数防抖 ```js 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. 全屏/退出全屏 ```js 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. 禁止打开控制台调试用来防止部分用户通过源码攻击服务器，增加破解难度 ```js 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. 密码强度展示 ```js 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. 五星好评 ```js const getRate = (rate = 0) => { return "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); }; getRate(3); ``` ### 15. 保留 n 位小数 ```js const filterToFixed => (num, n = 2) { return parseFloat(num.toFixed(n), 10); } ``` ### 16. 金额转大写商城项目里订单模块很常用的工具方法 ```js 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. 常用正则判断 ```js // 校验昵称为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. 解决运算精度丢失的问题用来解决前端计算金额时精度丢失的问题 ```js 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); }, }; ``` ## 结尾如果你觉得此文对你有一丁点帮助，可以帮忙点个赞，鼓励一下作者。