JavaScript 带给了我们极大的自由，但也带来了一定的复杂性。为了让你的代码更高效、易于维护，下面认真分享 12个 JavaScript 的高级技巧和实用场景。
空值合并(??)
场景：如果变量为 null 或 undefined ，则使用默认值。
const username = user.name ?? 'Guest';
console.log(username); // 如果 user.name 为 null 或 undefined，输出‘Guest’
使用 Intl 进行格式化
场景：Intl 对象可以用于格式化货币、日期以及数字，非常适合需要进行本地化处理的场景。
const formatter = newIntl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' });
console.log(formatter.format(1000)); // 输出：¥1,000.00
缓存函数
场景：缓存函数结果以加快重复调用速度。
const memoize = fn => {
const cache = {};
return(...args) => {
const key = JSON.stringify(args);
if (!cache[key]) cache[key] = fn(...args);
return cache[key];
};
};
可选链接
场景：简化字符串插值和多行字符串。
const address = user?.contact?.address?.city;
console.log(address);
使用 Set 保存唯一值
场景：当需要存储一组不重复的值时，可以使用 Set。
const unique = newSet([1, 2, 3, 1]);
console.log(unique); // 输出：Set { 1, 2, 3 }
模板字面量
场景：插入变量，实现多行字符串。
const username = "Saurabh";
const entries = 1567;
const message = `Hello, ${username}!, Welcome to dashboard you have ${entries} left`;
默认参数
场景：为函数参数分配默认值。
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
数组扩展运算符
场景：克隆或合并数组。
const newArray = [...array1, ...array2];
数组映射
场景：将元素转换成新数组。
const names = users.map(user => user.name);
防抖
场景：控制函数执行频率。
const debounce = (func, delay) => {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), delay);
};
};
节流
场景：控制函数随时间推移的执行频率。
const throttle = (func, limit) => {
let lastFunc;
let lastRan;
return(...args) => {
if (!lastRan) {
func(...args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func(...args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
};
Promise.all
场景：并行处理多个 promise。
const results = await Promise.all([fetchData1(), fetchData2()]);
结论
通过掌握这些高级 JavaScript 技巧，你可以在编写代码时更加高效、优雅，并能轻松解决复杂问题。无论是通过 Intl 进行数据格式化，还是使用 Set 去重和管理集合，这些实用的方法都能帮助你写出更简洁、更专业的代码。
本文首发于公众号“web前端开发之旅”，转载请注明出处！
该文章在 2025/1/3 9:12:58 编辑过
400 186 1886
