JavaScript 进阶必知的 3 个实用技巧

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 特性，提升工程化水平。