每个开发人员都必须知道的 20 个 JavaScript 技巧
JavaScript 是一种功能强大且灵活的语言，掌握一些实用的技巧可以使您的代码更加简洁、高效。以下是 20 个适用于实际应用程序开发的 JavaScript 技巧和窍门。
一、对象解构与重命名
您可以在对象解构过程中重命名变量，这在出现命名冲突时非常有用。
const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 25
二、可选链与函数调用
可选链可用于函数，以确保在调用函数之前函数存在。
const user = {
getName: () => 'Alice',
};
console.log(user.getName?.()); // Alice
console.log(user.getAge?.()); // undefined
三、使用 ||= 运算符进行默认赋值
逻辑 OR 赋值（||=）仅在变量为 null、undefined 或 falsey 值（如 0）时才分配值。
let count;
count ||= 10;
console.log(count); // 10
四、使用扩展运算符将 NodeList 转换为数组
扩展运算符提供了一种将 NodeList 快速转换为数组的方法。
const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true
五、数组/对象解构与默认值
在解构过程中分配默认值，以避免在缺少键时出现 undefined。
const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25
六、从数组中移除 falsy 值
使用 filter() 方法从数组中移除 falsy 值（如 0、null、undefined、false）。
const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]
七、按属性对对象数组进行排序
轻松按特定属性对对象数组进行排序。
const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]
八、动态导入以实现延迟加载
动态导入允许您仅在需要时加载模块，从而减少初始加载时间。
const loadModule = async () => {
const module = await import('./myModule.js');
module.default(); // 调用默认导出函数
};
loadModule();
九、带对象解构的默认参数
在使用默认参数时，还可以解构并设置特定属性的默认值。
function createUser({ name = 'Guest', age = 18 } = {}) {
console.log(name, age);
}
createUser(); // Guest 18
createUser({ name: 'Alice' }); // Alice 18
十、使用 Object.assign() 进行浅拷贝
Object.assign() 可以方便地对对象进行浅拷贝，而不更改原始对象。
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1（未更改）
十一、为性能缓存函数（Memoization）
Memoization 根据参数缓存昂贵函数调用的结果，对于计算密集型函数非常有用。
const memoize = (fn) => {
const cache = {};
return (...args) => {
const key = JSON.stringify(args);
if (!cache[key]) {
cache[key] = fn(...args);
}
return cache[key];
};
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16（第二次调用时缓存）
十二、使用 reduce() 对数组项进行分组
reduce() 可以根据属性对数组项进行分组，这在数据处理中经常需要。
const people = [
{ name: 'Alice', role: 'admin' },
{ name: 'Bob', role: 'user' },
{ name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
(acc[person.role] = acc[person.role] || []).push(person);
return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }
十三、使用 Array.flat(Infinity) 展平嵌套数组
使用 Array.flat(Infinity) 可以轻松展平多级嵌套数组。
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]
十四、使用 ! 切换布尔值
切换布尔值就像应用两次 NOT 运算符一样简单。
let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true
十五、使用 concat() 合并多个数组
concat() 可以方便地将多个数组合并为一个语句。
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]
十六、使用 for...of 和 await 进行异步数组迭代
当迭代包含承诺的数组时，for...of 与 await 确保每个承诺在下一个运行之前解决。
const fetchData = async () => {
const urls = ['url1', 'url2'];
for (const url of urls) {
const response = await fetch(url);
console.log(await response.json());
}
};
十七、快速获取数组中的最后一个元素
无需知道数组长度即可检索数组中的最后一个元素。
const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4
十八、使用 Intl 进行日期格式化
Intl.DateTimeFormat 提供了一种强大的方式来跨地区格式化日期。
const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
dateStyle: 'full',
}).format(date);
console.log(formatted); // 例如，"Monday, 25 October 2021"
十九、使用 Math.round() 和模板文字四舍五入数字
模板文字可以直接格式化四舍五入的数字。
const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14
二十、使用 Array.from() 将类数组对象转换为数组
使用 Array.from() 将类数组对象（例如，参数）转换为真实数组。
function example() {
const argsArray = Array.from(arguments);
console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]
结论
这些技巧简化了 JavaScript 中常见的编码模式。将它们集成到您的工作流程中，以编写既高效又富有表现力的代码。
通过掌握这些实用的 JavaScript 技巧，您可以提高开发效率，减少错误，并使代码更易于维护。