18個(gè)高頻使用的JS工具方法總結(jié)
更新時(shí)間：2022年04月28日 14:06:19 作者：于五五
這篇文章主要為大家分享一下18個(gè)在項(xiàng)目中使用很高頻的JS工具方法，希望大家能夠知其然也知其所以然，不要只會(huì)調(diào)用?api，也要會(huì)寫?api，快跟隨小編一起學(xué)習(xí)一下吧
前言
將自己做前端6年以來在項(xiàng)目中使用很高頻的工具方法整理了出來，分享一下，雖然現(xiàn)在有很多工具類也提供了這些方法，封裝的也更為完善，簡(jiǎn)單的調(diào)用一下就可以使用，但是我還是分享出來了。是希望能夠知其然也知其所以然，不要只會(huì)調(diào)用 api，也要會(huì)寫 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. 刪除數(shù)組指定項(xiàng)
項(xiàng)目中經(jīng)常會(huì)使用的工具方法，傳入目標(biāo)數(shù)組和目標(biāo)元素，返回一個(gè)新數(shù)組。
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 某一個(gè)參數(shù)
用于獲取url傳參獲取參數(shù)
const getUrlParam = (key) => {
const url = new URL(window.location.href);
const value = url.searchParams.get(key);
return value;
};
getUrlParam("id");4. 復(fù)制文本
復(fù)制各種自定義的文本，瀏覽器兼容性高
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. 禁止復(fù)制文本
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;
};
// 禁止復(fù)制
document.body.oncopy = (e) => {
return false;
};
// 禁止剪切
document.body.oncut = (e) => {
return false;
};
// 禁止粘貼
document.body.onpaste = (e) => {
return false;
};6. 復(fù)制文本帶版權(quán)信息
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. 判斷數(shù)據(jù)類型和數(shù)據(jù)值
很常用的工具類，用于校驗(yàn)數(shù)據(jù)是否合法
// 是否是字符串
function isString(obj) {
return Object.prototype.toString.call(obj) == "[object String]";
}
// 是否是數(shù)字
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]";
}
// 是否是數(shù)組
function isArray(obj) {
return Object.prototype.toString.call(obj) === "[object Array]";
}
// 是否是對(duì)象
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]";
}
// 是否是時(shí)間格式
function isDate(obj) {
return Object.prototype.toString.call(obj) == "[object Date]";
}
// 是否是時(shí)間undefined
function isUndefined(arg) {
return arg === void 0;
}
// 是否是空對(duì)象
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 環(huán)境判斷
用來區(qū)分不同平臺(tái)，常用在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"),
// 是不是微信環(huán)境
isWeixin: ua.match(/MicroMessenger/i) == "micromessenger",
// 是不是電腦端
isPc: isPc,
};
};9. 時(shí)間格式轉(zhuǎn)換
// Date轉(zhuǎn)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());
// 時(shí)間戳轉(zhuǎn)yyyy-MM-dd HH:mm:ss
const timestampToTime = (timestamp) => {
const date = new Date(
String(timestamp).length > 10 ? timestamp : timestamp * 1000
); //時(shí)間戳為10位需*1000，時(shí)間戳為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轉(zhuǎn)時(shí)間戳
const timeToTimestamp = (time, isMilli = true) => {
const timestamp = new Date(time).getTime(); //時(shí)間戳為10位需*1000，時(shí)間戳為13位的話不需乘1000
return isMilli ? timestamp : timestamp / 1000;
};
timeToTimestamp("2022-04-26 10:11:11");10. 函數(shù)防抖
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("執(zhí)行");
}, 2000)
);11. 全屏/退出全屏
function toFullScreen() {
let = document.documentElement;
el.webkitRequestFullScreen
? el.webkitRequestFullScreen()
: el.mozRequestFullScreen
? el.mozRequestFullScreen()
: el.msRequestFullscreen
? el.msRequestFullscreen()
: el.requestFullScreen
? el.requestFullScreen()
: alert("當(dāng)前瀏覽器不支持該功能");
}
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("當(dāng)前瀏覽器不支持該功能");
}12. 禁止打開控制臺(tái)調(diào)試
用來防止部分用戶通過源碼攻擊服務(wù)器，增加破解難度
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. 密碼強(qiáng)度展示
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. 五星好評(píng)
const getRate = (rate = 0) => {
return "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
};
getRate(3);15. 保留 n 位小數(shù)
const filterToFixed => (num, n = 2) {
return parseFloat(num.toFixed(n), 10);
}16. 金額轉(zhuǎn)大寫
商城項(xiàng)目里訂單模塊很常用的工具方法
const convertCurrency = (money) => {
//漢字的數(shù)字
const cnNums = new Array(
"零",
"壹",
"貳",
"叁",
"肆",
"伍",
"陸",
"柒",
"捌",
"玖"
);
//基本單位
const cnIntRadice = new Array("", "拾", "佰", "仟");
//對(duì)應(yīng)整數(shù)部分?jǐn)U展單位
const cnIntUnits = new Array("", "萬", "億", "兆");
//對(duì)應(yīng)小數(shù)部分單位
const cnDecUnits = new Array("角", "分", "毫", "厘");
//整數(shù)金額時(shí)后面跟的字符
const cnInteger = "整";
//整型完以后的單位
const cnIntLast = "元";
//最大處理的數(shù)字
const maxNum = 999999999999999.9999;
//金額整數(shù)部分
let integerNum;
//金額小數(shù)部分
let decimalNum;
//輸出的中文金額字符串
let chineseStr = "";
//分離金額后用的數(shù)組，預(yù)定義
let parts;
// 傳入的參數(shù)為空情況
if (money == "") {
return "";
}
money = parseFloat(money);
if (money >= maxNum) {
return "";
}
// 傳入的參數(shù)為0情況
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast + cnInteger;
return chineseStr;
}
// 轉(zhuǎn)為字符串
money = money.toString();
// indexOf 檢測(cè)某字符在字符串中首次出現(xiàn)的位置 返回索引值（從0 開始） -1 代表無
if (money.indexOf(".") == -1) {
integerNum = money;
decimalNum = "";
} else {
parts = money.split(".");
integerNum = parts[0];
decimalNum = parts[1].substr(0, 4);
}
//轉(zhuǎn)換整數(shù)部分
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;
}
// 轉(zhuǎn)換小數(shù)部分
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. 常用正則判斷
// 校驗(yàn)昵稱為2-9位中文
const validateName = (name) => {
const reg = /^[\u4e00-\u9fa5]{2,9}$/;
return reg.test(name);
};
// 校驗(yàn)手機(jī)號(hào)
const validateMobile = (mobile) => {
const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
return reg.test(mobile);
};
// 校驗(yàn)6到18位大小寫字母數(shù)字下劃線組成的密碼
const validatePassword = (password) => {
const reg = /^[a-zA-Z0-9_]{6,18}$/;
return reg.test(password);
};
// 校驗(yàn)身份證號(hào)
const validateCardId = (cardId) => {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return reg.test(cardId);
};18. 解決運(yùn)算精度丟失的問題
用來解決前端計(jì)算金額時(shí)精度丟失的問題
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個(gè)高頻使用的JS工具方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JS工具方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
一分鐘理解js閉包，關(guān)于js閉包的內(nèi)容介紹了很多，本文帶著大家快速理解什么是js閉包，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了圖解js中的原型,原型對(duì)象,原型鏈,幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01
JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作,涉及javascript使用sort方法針對(duì)json數(shù)組的遍歷與排序相關(guān)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
用Javascript檢查Adobe PDF插件是否安裝的實(shí)現(xiàn)代碼
用Javascript檢查Adobe PDF插件是否安裝的代碼2009-12-12
純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js實(shí)現(xiàn)簡(jiǎn)單的碰壁反彈效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的碰壁反彈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
可以運(yùn)行客戶端exe文件的代碼2008-10-10
最近做項(xiàng)目的時(shí)候碰到一個(gè)問題： 在js里面使用window.close()，IE下工作正常，但是FireFox下有時(shí)可以，有時(shí)不行。2008-12-12
JavaScript是一門弱類型語言，它對(duì)類型是弱校驗(yàn)，所以才有了TypeScript。本文就來和大家一起看看TypeScript的類型兼容性的概念和分類，需要的可以參考一下2022-08-08
本文主要介紹了JavaScript中的new操作符的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05