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

JavaScript 进阶必知的 3 个实用技巧 | 极客日志

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

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