JavaScript 进阶必知的 3 个实用技巧
在现代前端开发中，掌握 ES6+ 的新特性是区分初级与高级开发者的关键。以下三个技巧能显著提升代码的可读性与健壮性。
一、神奇的扩展运算符
扩展运算符（spread）由三个点（...）组成，是 JavaScript 中最实用的语法糖之一。它主要用于以下三种场景：
1. 数组拷贝
创建数组的浅拷贝，比传统的 slice() 更简洁。
const arr = [1, 2, 3, 4];
const newArr = [...arr];
console.log(newArr); // [1, 2, 3, 4]
2. 数组合并
快速将多个数组合并为一个新数组。
const numArr = [1, 2, 3, 4];
const alphaArr = ['a', 'b', 'c'];
const newArr = [...numArr, ...alphaArr];
console.log(newArr); // [1, 2, 3, 4, 'a', 'b', 'c']
3. 对象展开
复制对象属性并允许在复制过程中修改或新增属性。
const rectangle = { width: 10, height: 10 };
const cube = { ...rectangle, length: 7 };
console.log(cube); // {width: 10, height: 10, length: 7}
二、进行空检查的最佳方法
早期的 JavaScript 代码常包含冗长的空值判断。现代语法提供了更优雅的方案。
1. 可选链操作符
可选链操作符（?.）允许安全地访问嵌套对象的属性。如果中间某个属性为 null 或 undefined，表达式会返回 undefined 而不会抛出错误。
const client = {
name: 'Liu Xing',
address: {
zipcode: '1234'
}
};
// 老式写法
if (client && client.address && client.address.zipcode) {}
// 现代写法
if (client?.address?.zipcode) {}
2. 空值合并运算符
空值合并操作符（??）仅在左侧操作数为 null 或 undefined 时返回右侧值，否则返回左侧值。这解决了逻辑或（||）误判 falsy 值的问题。
const defaultMessage = 'Hello JavaScript';
const msg = defaultMessage ?? 'Hello Liu Xing';
console.log(msg); // Hello JavaScript
// 链式使用
console.log(firstName ?? lastName ?? 'anonymous');
三、使用 .map()、.reduce() 和 .filter()
函数式编程方法让数据处理更加声明式和简洁。以下是三个最常用的数组方法。
场景示例
假设有一组购物清单，需要将欧元价格转换为人民币（汇率 7.18），并计算食品类的总花费。
传统循环方式
const items = [
{ name: 'pineapple', price: 2, type: 'food' },
{ name: 'beef', price: 20, type: 'food' },
{ name: 'advocate', price: 1, type: 'food' },
{ name: 'shampoo', price: 5, type: 'other' }
];
let sum = 0;
const itemsInYuan = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
item.price *= 7.18;
itemsInYuan.push(item);
if (item.type === 'food') {
sum += item.price;
}
}
console.log(itemsInYuan);
console.log(sum);
函数式编程方式
利用 map 转换数据，filter 筛选数据，reduce 聚合结果。这种方式避免了可变状态，代码更易读。
const itemsInYuan = items.map(item => {
const itemInYuan = { ...item };
itemInYuan.price *= 7.18;
return itemInYuan;
});
const sum = itemsInYuan.filter(item => item.type === 'food').reduce((total, item) => total + item.price, 0);
总结
掌握扩展运算符、空值检查优化以及函数式编程方法，不仅能减少代码量，还能降低出错概率。建议在日常开发中积极应用这些现代 JavaScript 特性，提升工程化水平。