从 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 实用函数。
复制粘贴它们，修改它们，如果需要的话，把它们刻在你的键盘上。
