?
從 debounce 到 deepClone——你的 JS 瑞士軍刀。
你也經(jīng)歷過那種感覺吧：當(dāng)你深入一個(gè)項(xiàng)目，突然需要對(duì)某個(gè)函數(shù)進(jìn)行 debounce 處理、限制某個(gè)滾動(dòng)事件，或者安全地訪問一個(gè)嵌套對(duì)象。
沒錯(cuò)，我也是。
所以，與其每次都從頭開始編寫這些實(shí)用工具，不如整理一下這個(gè)包含 25 個(gè)可復(fù)用的 JavaScript 函數(shù)的小集合，我?guī)缀鯐?huì)把它們復(fù)制粘貼到每個(gè)項(xiàng)目中。
它們簡短、精煉，而且非常實(shí)用。嘿，如果你正在用 React、Vue、Angular、Vanilla JS 構(gòu)建任何東西，或者甚至用記事本（別覺得丟人）抄 HTML（這可不是鬧著玩的），這些函數(shù)都能幫你節(jié)省時(shí)間。
我們開始吧。
1. Debounce
function debounce(fn, delay = 300) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); };}
非常適合搜索輸入和調(diào)整大小事件，給你的函數(shù)留出一些喘息的空間。
2. 節(jié)流閥
function throttle(fn, limit = 300) { let inThrottle; return (...args) => { if (!inThrottle) { fn(...args); inThrottle = true; setTimeout(() => (inThrottle = false), limit); } };}
因?yàn)槊看螡L動(dòng)像素觸發(fā) = 瀏覽器崩潰。
3. 深度克隆
function deepClone(obj) { return JSON.parse(JSON.stringify(obj));}
它并不完美（函數(shù)可能會(huì)丟失），但 90% 的情況下都能正常工作。
4. 復(fù)制到剪貼板
像老板一樣粘貼，適用于現(xiàn)代瀏覽器。
function copyToClipboard(text) { navigator.clipboard.writeText(text).catch(console.error);}
5. Sleep
用于延遲動(dòng)畫或模擬異步加載。
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}
6. Clamp
控制值——例如滾動(dòng)位置或輸入限制。
function clamp(value, min, max) { return Math.min(Math.max(value, min), max);}
7. Object
因?yàn)?typeof null === 'object' 是 JavaScript 版的惡意代碼。
function isObject(val) { return val && typeof val === 'object' && !Array.isArray(val);}
8. Empty
當(dāng) if (obj) 無法滿足需求時(shí)。
function isEmpty(obj) { return Object.keys(obj).length === 0;}
9. UUID 生成器
即時(shí)唯一 ID——無需 npm i uuid。
function uuid() { return crypto.randomUUID(); }
10. Once
有時(shí)候，一次就夠了。想想：事件監(jiān)聽器、API 調(diào)用、煙火表演。
function once(fn) { let called = false; return (...args) => { if (!called) { called = true; fn(...args); } };}
11. 獲取查詢參數(shù)
是的，?page=2&sort=desc 需要解碼。
function getQueryParams() { return Object.fromEntries(new URLSearchParams(location.search));}
12. 范圍生成器
因?yàn)?for 循環(huán)現(xiàn)在已經(jīng)過時(shí)了。
function range(start, end, step = 1) { return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step);}
13. 移除重復(fù)項(xiàng)
不再需要復(fù)雜的過濾操作。讓 Set 自行處理。
function unique(arr) { return [...new Set(arr)]; }
14. 安全訪問 (get)
深度訪問，不會(huì)導(dǎo)致應(yīng)用崩潰。類似 Lodash 的 get()，但更精簡。
function get(obj, path, fallback = undefined) { return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;}
15. 分組
根據(jù)公共屬性對(duì)項(xiàng)目列表進(jìn)行分組。即時(shí)分析的魔法。
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
即時(shí)“5 分鐘前發(fā)布”的魔法。
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（淺）
非常適合快速比較（但不適用于大型嵌套對(duì)象）。
function isEqual(a, b) { return JSON.stringify(a) === JSON.stringify(b);}
19. 隨機(jī)排序
給你的 UI 或測驗(yàn)應(yīng)用增添一點(diǎn)混亂。
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5);}
20. 格式化貨幣
因?yàn)?$123456.789 看起來應(yīng)該寫成 $123,456.79 更好。
function formatCurrency(amount, locale = 'en-US', currency = 'USD') { return new Intl.NumberFormat(locale, { style: 'currency', currency, }).format(amount);}
21. 扁平化數(shù)組
將 [1, [2, [3]]] 轉(zhuǎn)換為 [1, 2, 3] —— 遞歸，誰用得著？
function flatten(arr) { return arr.flat(Infinity); }
22. isBrowser
用于服務(wù)器端渲染設(shè)置并避免出現(xiàn) window is not definition 錯(cuò)誤。
function isBrowser() { return typeof window !== 'undefined';}
23. 大寫
將 hello 轉(zhuǎn)換為 Hello，就像一個(gè)普通的字符串一樣。
function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1);}
24. 分塊數(shù)組
將大數(shù)組拆分成易于理解的小塊。
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;}
總結(jié)
以上就是我今天想與你分享的25 個(gè)我?guī)缀蹼x不開的 JavaScript 實(shí)用函數(shù)。
復(fù)制粘貼它們，修改它們，如果需要的話，把它們刻在你的鍵盤上。
閱讀原文：https://mp.weixin.qq.com/s/iLr1on2RGHFK79C3Axr7MQ
該文章在 2025/5/19 12:26:39 編輯過
400 186 1886
