扩展运算符 ... 的高效使用

ES6 (ECMAScript 2015) 引入的扩展运算符（Spread Operator）... 是JavaScript中一个极其强大且灵活的特性，它极大地简化了数组和对象的操作。本文将深入探讨扩展运算符的各种高效用法。

基本概念

扩展运算符由三个点...表示，它允许一个可迭代对象（如数组或字符串）在需要多个元素或参数的地方"展开"。

数组操作中的高效用法

1. 数组合并

javascript 复制代码

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

2. 数组复制

javascript 复制代码

const original = [1, 2, 3];
const copy = [...original]; // 创建浅拷贝

3. 在特定位置插入元素

javascript 复制代码

const numbers = [1, 2, 5, 6];
const newNumbers = [...numbers.slice(0, 2), 3, 4, ...numbers.slice(2)];
// [1, 2, 3, 4, 5, 6]

4. 将类数组对象转为真实数组

javascript 复制代码

const nodeList = document.querySelectorAll('div');
const nodeArray = [...nodeList]; // 转换为真实数组

函数参数中的高效用法

1. 替代apply方法

javascript 复制代码

// ES5方式
Math.max.apply(null, [1, 2, 3]);

// ES6方式
Math.max(...[1, 2, 3]); // 3

2. 收集剩余参数

javascript 复制代码

function sum(first, ...rest) {
  return rest.reduce((acc, val) => acc + val, first);
}
sum(1, 2, 3, 4); // 10

对象操作中的高效用法

1. 对象浅拷贝

javascript 复制代码

const obj = { a: 1, b: 2 };
const copy = { ...obj }; // { a: 1, b: 2 }

2. 对象合并

javascript 复制代码

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

3. 默认值与覆盖

javascript 复制代码

const defaults = { theme: 'light', fontSize: 16 };
const userSettings = { fontSize: 18 };
const finalSettings = { ...defaults, ...userSettings };
// { theme: 'light', fontSize: 18 }

高级技巧

1. 条件性展开

javascript 复制代码

const condition = true;
const obj = {
  ...(condition && { prop: 'value' })
};

2. 移除属性

javascript 复制代码

const { unwantedProp, ...rest } = { a: 1, b: 2, unwantedProp: 3 };
// rest = { a: 1, b: 2 }

3. 动态属性名

javascript 复制代码

const dynamicKey = 'color';
const obj = {
  ...(dynamicKey && { [dynamicKey]: 'blue' })
};

性能注意事项

虽然扩展运算符非常方便，但在处理大型数组或对象时需要注意：

每次使用都会创建新的数组/对象
深层嵌套对象的拷贝仍然是浅拷贝
在循环或高频操作中过度使用可能影响性能

总结

扩展运算符...是ES6中最实用的特性之一，它简化了数组和对象的操作，使代码更加简洁易读。掌握其各种用法可以显著提高开发效率，但在性能敏感的场景中仍需谨慎使用。