25 個(gè) JavaScript 實(shí)用函數(shù)，我會(huì)復(fù)制粘貼到每個(gè)項(xiàng)目中（必備）
從 debounce 到 deepClone——你的 JS 瑞士軍刀。
你也經(jīng)歷過(guò)那種感覺(jué)吧：當(dāng)你深入一個(gè)項(xiàng)目，突然需要對(duì)某個(gè)函數(shù)進(jìn)行 debounce 處理、限制某個(gè)滾動(dòng)事件，或者安全地訪問(wèn)一個(gè)嵌套對(duì)象。
沒(méi)錯(cuò)，我也是。
所以，與其每次都從頭開(kāi)始編寫(xiě)這些實(shí)用工具，不如整理一下這個(gè)包含 25 個(gè)可復(fù)用的 JavaScript 函數(shù)的小集合，我?guī)缀鯐?huì)把它們復(fù)制粘貼到每個(gè)項(xiàng)目中。
它們簡(jiǎn)短、精煉，而且非常實(shí)用。嘿，如果你正在用 React、Vue、Angular、Vanilla JS 構(gòu)建任何東西，或者甚至用記事本（別覺(jué)得丟人）抄 HTML（這可不是鬧著玩的），這些函數(shù)都能幫你節(jié)省時(shí)間。
我們開(kāi)始吧。
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)畫(huà)或模擬異步加載。
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) 無(wú)法滿(mǎn)足需求時(shí)。
function isEmpty(obj) {
return Object.keys(obj).length === 0;
}9. UUID 生成器
即時(shí)唯一 ID——無(wú)需 npm i uuid。
function uuid() {
return crypto.randomUUID();
}10. Once
有時(shí)候，一次就夠了。想想：事件監(jiān)聽(tīng)器、API 調(diào)用、煙火表演。
function once(fn) {
let called = false; return (...args) => {
if (!called) {
called = true; fn(...args);
}
};
}11. 獲取查詢(xún)參數(shù)
是的，?page=2&sort=desc 需要解碼。
function getQueryParams() {
return Object.fromEntries(new URLSearchParams(location.search));
}12. 范圍生成器
因?yàn)?for 循環(huán)現(xiàn)在已經(jīng)過(guò)時(shí)了。
function range(start, end, step = 1) {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step);
}13. 移除重復(fù)項(xiàng)
不再需要復(fù)雜的過(guò)濾操作。讓 Set 自行處理。
function unique(arr) {
return [...new Set(arr)];
}14. 安全訪問(wèn) (get)
深度訪問(wèn)，不會(huì)導(dǎo)致應(yīng)用崩潰。類(lèi)似 Lodash 的 get()，但更精簡(jiǎn)。
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 或測(cè)驗(yàn)應(yīng)用增添一點(diǎn)混亂。
function shuffle(arr) {
return arr.sort(() => Math.random() - 0.5);
}20. 格式化貨幣
因?yàn)?$123456.789 看起來(lái)應(yīng)該寫(xiě)成 $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] —— 遞歸，誰(shuí)用得著？
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. 大寫(xiě)
將 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. 深度合并
類(lèi)似 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不開(kāi)的 JavaScript 實(shí)用函數(shù)。
復(fù)制粘貼它們，修改它們，如果需要的話，把它們刻在你的鍵盤(pán)上。
如果你有我遺漏的殺手級(jí)函數(shù)，請(qǐng)?jiān)谠u(píng)論區(qū)留言告訴我們，也讓更多人知道它們。
最后，感謝您的閱讀，祝編程愉快。
