25 個 JavaScript 實用函數，我會復制粘貼到每個項目中（必備）
從 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 實用函數。
復制粘貼它們，修改它們，如果需要的話，把它們刻在你的鍵盤上。
如果你有我遺漏的殺手級函數，請在評論區留言告訴我們，也讓更多人知道它們。
最后，感謝您的閱讀，祝編程愉快。
