【JS】整理常复用的JS函数合集
代码复用策略的需求萌发
随着开发的项目越来越多，在新项目的coding中，几乎都会出现的：这个功能我是写过的，而且封装了个函数or方法... 但是，是哪个项目呢，放哪了？😶
之后开始各种——找~
几乎每个新项目都这么折腾下来，至少我需要给自己写一个“复用function的工具手册”，帮我节省时间、规避错误，避免重复劳动。
日期格式化
当然可以很方便的引用一个monent或dayjs，然后format解决~
但是，组件库的体量通常比较大，如果只需要一个格式化的功能，可以自定义一个函数。
but自己写日期格式化代码不仅繁琐，还容易出错；而且随着需求的格式不同，不通用的情况也出现了，类似这样的代码叠加~
哎……
因此，就base了一个通用函数，只需要将日期字符串和目标语言环境传入函数，就能得到格式化的日期，就不用反复搜索各种复杂的方法了。
function formatDate(dateStr, locale = 'en-US') {return new Date(dateStr).toLocaleDateString(locale, {year: 'numeric',month: 'short',day: 'numeric',});
}JSON 解析
在解析 localStorage 或 API 返回数据时，经常会遇到格式错误的问题，导致程序崩溃。so需要一个安全过滤json的解析函数。
function safeJsonParse(str, fallback = {}) {try {return JSON.parse(str);} catch {return fallback;}
}const strs = safeJsonParse(localStorage.getItem('jsonString'));防抖
应对重复点击或输入变化等情况导致的事件被过度触发的问题。
也有一个组件库——lodash，我用的时候在不同的框架下，有时会报错；而且同样存在整体引入的体量问题。so自己写一个~
function debounce(func, delay = 300) {let timeout;return (...args) => {clearTimeout(timeout);timeout = setTimeout(() => func(...args), delay);};
}const handleChange = debounce((val) => searchUsers(val), 500);等待用户停止操作 500 毫秒后再发起请求，有效减少了请求次数，提升了系统的稳定性和性能。
节流
用于测试和节流的延时处理函数：
function sleep(ms) {return new Promise((resolve) => setTimeout(resolve, ms));
}await sleep(1000);
判空函数
api返回的数据中莫名出现字符串化的null和undefined及空字符串等，于是一个不断追加条件的万能判空函数出现。
function isEmptyCheck(val) {try {var result = false;if (!val || val == '' || val == ' '|| val == 'null' || val=='undefined' || val.length==0 || val=={}) {result = true}if(val==0){result = false;}return result;} catch (e) {return true;}
}复制到剪贴板
async function copyToClipboard(text) {try {await navigator.clipboard.writeText(text);return true;} catch (err) {console.error('操作失败:', err);return false;}
}动态组合成元素类名
根据条件来组合类名，显示不同的样式。写一个函数取代在元素上用各种复杂的判断，以一种更加优雅、简洁的方式处理条件类名，让代码更具可读性和可维护性。
function classNames(...args) {return args.filter(Boolean).join(' ');
}
//引用
<el-button class={classNames('btn', isActive && 'btn-primary')} />数组去重
function uniqueArray(arr) {return [...new Set(arr)];
}const arr = uniqueArray([...userTags, ...defaultTags]);blob文件下载and从header提取文件名
const handleExportRouter = (payload) =>{if(payload.bodyBlob && payload.type && payload.filename) {let link = document.createElement("a");let blob = new Blob([payload.bodyBlob], { type: payload.type });link.href = URL.createObjectURL(blob);link.download = payload.filename;link.click();link.href = "#";URL.revokeObjectURL(link.href);} else {let link = document.createElement("a");const fileNameRes = payload.headers["content-disposition"].split('filename=\"');const fileName = decodeURI(fileNameRes[1].substring(0, fileNameRes[1].length - 1))const typeRes = fileName.split('.')const fileType = fileTypeArr[`.${typeRes[typeRes.length - 1]}`]let blob = new Blob([payload.data], { type: fileType });link.href = URL.createObjectURL(blob);link.download = fileName;link.click();link.href = "#";URL.revokeObjectURL(link.href);}};身份信息提取
const IdHandler =(UUserCard, num) =>{if(num==1){//获取出生日期let birth=UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.substring(12, 14);return birth;}if(num==2){//获取性别if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {return "男";} else {return "女";}}if(num==3){//获取年龄let myDate = new Date();let month = myDate.getMonth() + 1;let day = myDate.getDate();let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {age++;}return age;}
};生成唯一标识
const guid = () => {//全局唯一标识符return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {let r = (Math.random() * 16) | 0,v = c === "x" ? r : (r & 0x3) | 0x8;return v.toString(16);});
};base64 转 blob
function base64ToBlob(base64Data) {let arr = base64Data.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type: `${mime},charset=UTF-8`});};