前端20个高效开发的JS工具函数

我们日常工作中一些工具函数可以帮助我们快速的、高效的开发，不至于在小地方卡壳很久。
以下就是整理的20个常见的工具方法

一、精准的获取数据类型（比typeof更准确的获取一个变量的数据类型）

function getType(value) {return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}// 使用示例
console.log(getType([])); // "array"
console.log(getType(Symbol(1))); // "symbol"
console.log(getType(new Date())); // "date"
console.log(getType({})); // "object"

二、截断字符串（字符串超出指定长度，截断并添加省略号…）

function truncateString(str, maxLength) {if (str.length <= maxLength) return str;return str.slice(0, maxLength) + '...';
}// 使用示例
const text = '大家好，我是xxx，我喜欢xxx';
console.log(truncateString(text, 6)); // 输出 "大家好，我是..."

三、平滑滚动到顶部（点击按钮页面平滑的滚回页面顶部）

function smoothScrollToTop() {window.scrollTo({top: 0,behavior: 'smooth',});
}

四、判断是不是浏览器环境

const isBrowser = () => typeof window !== 'undefined' && typeof window.document !== 'undefined';// 使用示例
console.log(isBrowser()); // 在浏览器中为 true，在 Node.js 中为 false

五、函数只执行一次（创建一个只能被调用一次的函数）

function once(fn) {let hasBeenCalled = false;let result;return function(...args) {if (!hasBeenCalled) {hasBeenCalled = true;result = fn.apply(this, args);}return result;};
}
const initApp = once(() => console.log('项目初始化'));
initApp(); // 输出 "项目初始化"
initApp(); // 无输出

六、防抖（防止函数在短时间内被高频触发，常用于输入框搜索、窗口大小调整等）

function debounce(fn, delay) {let timer = null;return function(...args) {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};
}// 使用示例
const debouncedSearch = debounce(() => console.log('搜索中'), 200);
window.addEventListener('input', debouncedSearch);

七、节流（保证函数在一定时间间隔内只执行一次，常用于监听滚动事件、拖拽事件）

function throttle(fn, delay) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime > delay) {lastTime = now;fn.apply(this, args);}};
}// 使用示例
const throttledScroll = throttle(() => console.log('滚动中'), 1200);
window.addEventListener('scroll', throttledScroll);

八、深拷贝（完全复制一个对象，包括其嵌套的对象和数组，保留继承关系 可以实现各种类型的拷贝及实现递归拷贝）。

function deepClone(obj) {if (typeof obj !== 'object') return Object;if (obj === null) return null;if (obj instanceof Date) return new Date(obj);if (obj instanceof RegExp) return new RegExp(obj);// Object.prototype.toString.call(obj) === '[object Array]'let o = new obj.constructor();for (const key in obj) {if (obj.hasOwnProperty(key)) {o[key] = typeof obj[key] === 'object' ? deepClone(obj[key]): obj[key];	}}return o;
}

九、数组去重（去掉数组中的重复数据）

function uniqueArray(arr) {return [...new Set(arr)];
}// 使用示例
console.log(uniqueArray([0, 1, 1, 'a', 'b', 'a', 2, 2, 3])); // 输出 [0, 1, 'a', 'b', 2, 3]

十、数组扁平化（多维数组转化为一维数组）

function flattenArray(arr) {return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}
// 或者使用原生方法 (ES2019)
const flattened = arr.flat(Infinity);// 使用示例
const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flattenArray(nestedArray)); // 输出 [1, 2, 3, 4, 5]

十一、生成随机字符串（生成一个指定长度的随机字符串，用作唯一ID）

function randomString(length = 8) {return Math.random().toString(36).substring(2, 2 + length);
}// 使用示例
console.log(randomString(10)); // 输出类似 "7a3lu3y4bm"

十二、首字母大写

function capitalize([first, ...rest]) {return first.toUpperCase() + rest.join('');
}// 使用示例
console.log(capitalize('helloWorld')); // 输出 "HelloWorld"

十三、检查对象是否为空（判断对象有没有自身属性）

function isObjectEmpty(obj) {return obj && Object.keys(obj).length === 0 && obj.constructor === Object;
}// 使用示例
console.log(isObjectEmpty({})); // true
console.log(isObjectEmpty({ a: 1 })); // false

十四、异步延迟/休眠（在async/await 暂定指定毫秒数）

function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}// 使用示例
async function otherFn() {console.log('Start');await sleep(2000);console.log('End after 2 seconds');
}
otherFn();

十五、获取URL查询参数（将url中的?后面的参数，解析为一个对象）

function getQueryParams(url = window.location.href) {const searchParams = new URL(url).searchParams;const params = {};for (const [key, value] of searchParams.entries()) {params[key] = value;}return params;
}
// ES2019 fromEntries
function getQueryParams(url = window.location.href) {const search = window.location.searchconst sParams = new URLSearchParams(search);const paramObj = Object.fromEntries(sParams)return paramObj
}
// 使用示例
// 假设 URL 是 "https://example.com?name=cherry&age=18"
// console.log(getQueryParams()); // 输出 { name: "cherry", age: "18" }

十六、格式化货币（万千,百十个 10,000）

function formatCurrency(amount, currency = 'CNY', locale = 'zh-CN') {return new Intl.NumberFormat(locale, {style: 'currency',currency: currency,}).format(amount);
}// 使用示例
console.log(formatCurrency(12345.67)); // 输出 "¥12,345.67"
console.log(formatCurrency(12345.67, 'USD', 'en-US')); // 输出 "$12,345.67"

十七、复制到剪切板

async function copyToClipboard(text) {if (!navigator.clipboard) {console.error('Clipboard API not available');return Promise.reject('Clipboard API not available');}try {await navigator.clipboard.writeText(text);console.log('Copied to clipboard');return Promise.resolve();} catch (err) {console.error('Failed to copy: ', err);return Promise.reject(err);}
}// 使用示例
// copyToClipboard('Hello, Cherry!');

十八、数组分块（按照指定大小分割成小数组）

function chunkArray(arr, size) {const result = [];for (let i = 0; i < arr.length; i += size) {result.push(arr.slice(i, i + size));}return result;
}// 使用示例
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(chunkArray(numbers, 3)); // 输出 [[1, 2, 3], [4, 5, 6], [7, 8]]

十九、从对象中拾取属性 (从一个对象中选择指定的若干个属性，返回一个新对象)

function pick(obj, ...keys) {return keys.reduce((acc, key) => {if (obj && Object.prototype.hasOwnProperty.call(obj, key)) {acc[key] = obj[key];}return acc;}, {});
}// 使用示例
const user = { id: 1, name: 'Cherry', age: 1, email: '[e-mail]' };
console.log(pick(user, 'id', 'name')); // 输出 { id: 1, name: 'Cherry' }

二十、生成范围内的随机数

function randomInRange(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}// 使用示例
console.log(randomInRange(10, 20)); // 输出 10 到 20 之间的一个整数