超多JavaScript实用小妙招

📅 发布时间:2026/7/6 14:42:46 👁️ 浏览次数:
超多JavaScript实用小妙招
字符串处理1. 生成随机字符串const randomString (length 8) { return Math.random().toString(36).slice(2, 2 length);};// 示例randomString() → 4f9d2fe32. 首字母大写const capitalize (str) { return str.charAt(0).toUpperCase() str.slice(1);};// 示例capitalize(hello) → Hello数组操作3. 数组去重const uniqueArray (arr) [...new Set(arr)];// 示例uniqueArray([1,2,2,3]) → [1,2,3]4. 数组乱序(洗牌算法)const shuffleArray (arr) { return arr.sort(() Math.random() - 0.5);};// 示例shuffleArray([1,2,3,4]) → 随机顺序对象处理5. 深拷贝(简易版)const deepClone (obj) JSON.parse(JSON.stringify(obj));// 注意无法复制函数和循环引用6. 对象属性过滤const filterObject (obj, keys) { return Object.fromEntries( Object.entries(obj).filter(([key]) keys.includes(key)) );};// 示例filterObject({a:1, b:2}, [a]) → {a:1}数字处理7. 千分位格式化const formatNumber (num) { return num.toString().replace(/\B(?(\d{3})(?!\d))/g, ,);};// 示例formatNumber(1234567) → 1,234,5678. 生成范围随机数const randomInRange (min, max) { return Math.floor(Math.random() * (max - min 1)) min;};// 示例randomInRange(5, 10) → 5~10之间的整数DOM 相关9. 复制内容到剪贴板const copyToClipboard (text) { navigator.clipboard.writeText(text);};10. 检测元素是否可见const isElementVisible (el) { return el.offsetParent ! null;};日期处理11. 格式化日期const formatDate (date new Date(), format YYYY-MM-DD) { const pad n n.toString().padStart(2, 0); return format .replace(YYYY, date.getFullYear()) .replace(MM, pad(date.getMonth() 1)) .replace(DD, pad(date.getDate()));};// 示例formatDate() → 2023-08-15函数优化12. 防抖函数(Debounce)const debounce (fn, delay 300) { let timer; return (...args) { clearTimeout(timer); timer setTimeout(() fn.apply(this, args), delay); };};// 适用场景搜索框输入13. 节流函数(Throttle)const throttle (fn, interval 300) { let lastTime 0; return (...args) { const now Date.now(); if (now - lastTime interval) { fn.apply(this, args); lastTime now; } };};// 适用场景滚动事件14. 类型判断增强版const typeOf (obj) { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();};// 示例typeOf([]) → array15. 本地存储封装const storage { set: (key, value) localStorage.setItem(key, JSON.stringify(value)), get: (key) { try { return JSON.parse(localStorage.getItem(key)); } catch (e) { return null; } }};