从 debounce 到 deepClone——你的 JS 瑞士军刀。
你也经历过那种感觉吧：当你深入一个项目，突然需要对某个函数进行 debounce 处理、限制某个滚动事件，或者安全地访问一个嵌套对象。
没错，我也是。
所以，与其每次都从头开始编写这些实用工具，不如整理一下这个包含 25 个可复用的 JavaScript 函数的小集合，我几乎会把它们复制粘贴到每个项目中。
它们简短、精炼，而且非常实用。嘿，如果你正在用 React、Vue、Angular、Vanilla JS 构建任何东西，或者甚至用记事本（别觉得丢人）抄 HTML（这可不是闹着玩的），这些函数都能帮你节省时间。
我们开始吧。
1. Debounce
function debounce(fn, delay = 300) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); };}
非常适合搜索输入和调整大小事件，给你的函数留出一些喘息的空间。
2. 节流阀
function throttle(fn, limit = 300) { let inThrottle; return (...args) => { if (!inThrottle) { fn(...args); inThrottle = true; setTimeout(() => (inThrottle = false), limit); } };}
因为每次滚动像素触发 = 浏览器崩溃。
3. 深度克隆
function deepClone(obj) { return JSON.parse(JSON.stringify(obj));}
它并不完美（函数可能会丢失），但 90% 的情况下都能正常工作。
4. 复制到剪贴板
像老板一样粘贴，适用于现代浏览器。
function copyToClipboard(text) { navigator.clipboard.writeText(text).catch(console.error);}
5. Sleep
用于延迟动画或模拟异步加载。
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}
6. Clamp
控制值——例如滚动位置或输入限制。
function clamp(value, min, max) { return Math.min(Math.max(value, min), max);}
7. Object
因为 typeof null === 'object' 是 JavaScript 版的恶意代码。
function isObject(val) { return val && typeof val === 'object' && !Array.isArray(val);}
8. Empty
当 if (obj) 无法满足需求时。
function isEmpty(obj) { return Object.keys(obj).length === 0;}
9. UUID 生成器
即时唯一 ID——无需 npm i uuid。
function uuid() { return crypto.randomUUID(); }
10. Once
有时候，一次就够了。想想：事件监听器、API 调用、烟火表演。
function once(fn) { let called = false; return (...args) => { if (!called) { called = true; fn(...args); } };}
11. 获取查询参数
是的，?page=2&sort=desc 需要解码。
function getQueryParams() { return Object.fromEntries(new URLSearchParams(location.search));}
12. 范围生成器
因为 for 循环现在已经过时了。
function range(start, end, step = 1) { return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step);}
13. 移除重复项
不再需要复杂的过滤操作。让 Set 自行处理。
function unique(arr) { return [...new Set(arr)]; }
14. 安全访问 (get)
深度访问，不会导致应用崩溃。类似 Lodash 的 get()，但更精简。
function get(obj, path, fallback = undefined) { return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;}
15. 分组
根据公共属性对项目列表进行分组。即时分析的魔法。
function groupBy(arr, key) { return arr.reduce((acc, obj) => { const val = obj[key]; acc[val] = acc[val] || []; acc[val].push(obj); return acc; }, {});}
16. 移除空值
清除 null、undefined、0 和 "" 等虚假值。
function compact(arr) { return arr.filter(Boolean);}
17. Time Ago
即时“5 分钟前发布”的魔法。
function timeAgo(date) { const seconds = Math.floor((Date.now() - new Date(date)) / 1000); const units = [ [60, 'second'], [60, 'minute'], [24, 'hour'], [7, 'day'], [4.3, 'week'], [12, 'month'], [Number.POSITIVE_INFINITY, 'year'] ];
let i = 0; while (seconds >= units[i][0]) { seconds /= units[i][0]; i++; } const value = Math.floor(seconds); const label = units[i][1]; return `${value} ${label}${value !== 1 ? 's' : ''} ago`; }
18. isEqual（浅）
非常适合快速比较（但不适用于大型嵌套对象）。
function isEqual(a, b) { return JSON.stringify(a) === JSON.stringify(b);}
19. 随机排序
给你的 UI 或测验应用增添一点混乱。
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5);}
20. 格式化货币
因为 $123456.789 看起来应该写成 $123,456.79 更好。
function formatCurrency(amount, locale = 'en-US', currency = 'USD') { return new Intl.NumberFormat(locale, { style: 'currency', currency, }).format(amount);}
21. 扁平化数组
将 [1, [2, [3]]] 转换为 [1, 2, 3] —— 递归，谁用得着？
function flatten(arr) { return arr.flat(Infinity); }
22. isBrowser
用于服务器端渲染设置并避免出现 window is not definition 错误。
function isBrowser() { return typeof window !== 'undefined';}
23. 大写
将 hello 转换为 Hello，就像一个普通的字符串一样。
function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1);}
24. 分块数组
将大数组拆分成易于理解的小块。
function chunk(arr, size) { return Array.from({ length: Math.ceil(arr.length / size) }, (_, i) => arr.slice(i * size, i * size + size) );}
25. 深度合并
类似 Object.assign，但更偏向递归。
function mergeDeep(target, source) { for (const key in source) { if (isObject(source[key])) { if (!target[key]) Object.assign(target, { [key]: {} }); mergeDeep(target[key], source[key]); } else { Object.assign(target, { [key]: source[key] }); } } return target;}
总结
以上就是我今天想与你分享的25 个我几乎离不开的 JavaScript 实用函数。
复制粘贴它们，修改它们，如果需要的话，把它们刻在你的键盘上。
阅读原文：https://mp.weixin.qq.com/s/iLr1on2RGHFK79C3Axr7MQ
该文章在 2025/5/19 12:26:39 编辑过
400 186 1886
