数组展开运算符

数组展开运算符的基本概念

ECMAScript 6引入的数组展开运算符（Spread Operator）用三个连续的点（...）表示，它允许一个可迭代对象在需要多个元素的地方展开。这个运算符极大地简化了数组操作，使代码更加简洁和易读。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

展开运算符的常见用法

数组拼接

传统方式需要使用concat()方法，而展开运算符提供了更直观的语法：

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const food = [...fruits, ...vegetables];
console.log(food); // ['apple', 'banana', 'carrot', 'potato']

函数参数传递

展开运算符可以轻松将数组元素作为独立参数传递给函数：

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

复制数组

展开运算符可以创建数组的浅拷贝：

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]
console.log(original === copy); // false

展开运算符的高级应用

与解构赋值结合使用

展开运算符可以与解构赋值一起使用来提取数组的特定部分：

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]

转换类数组对象

展开运算符可以将类数组对象（如arguments或NodeList）转换为真正的数组：

function convertToArray() {
  return [...arguments];
}
console.log(convertToArray(1, 2, 3)); // [1, 2, 3]

在对象字面量中使用

虽然这不是数组展开运算符的直接应用，但ES2018引入了对象展开运算符，语法类似：

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

展开运算符的性能考虑

虽然展开运算符语法简洁，但在处理大型数组时可能会有性能影响：

// 对于大型数组，这可能不是最高效的方式
const largeArray = new Array(1000000).fill(0);
const newArray = [...largeArray];

展开运算符的限制

展开运算符只能用于可迭代对象，尝试在非可迭代对象上使用会抛出错误：

const obj = { a: 1, b: 2 };
console.log([...obj]); // TypeError: obj is not iterable

实际应用场景

合并多个数组

const defaultSettings = ['theme: light', 'font-size: 14px'];
const userSettings = ['theme: dark', 'sidebar: collapsed'];
const finalSettings = [...defaultSettings, ...userSettings];

移除数组中的重复项

结合Set使用展开运算符可以轻松去重：

const duplicates = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(duplicates)];
console.log(unique); // [1, 2, 3, 4, 5]

实现不可变数据更新

在React等框架中，展开运算符常用于状态更新：

const initialState = { count: 0, user: 'guest' };
const newState = { ...initialState, count: initialState.count + 1 };

与其他ES6特性的结合

与箭头函数结合

const combineArrays = (...arrays) => [].concat(...arrays);
console.log(combineArrays([1, 2], [3, 4])); // [1, 2, 3, 4]

与默认参数结合

function createUser(name, ...preferences) {
  return {
    name,
    preferences: preferences.length ? preferences : ['default']
  };
}

浏览器兼容性考虑

虽然现代浏览器都支持展开运算符，但在旧环境中可能需要Babel等工具进行转译：

// Babel会将展开运算符转换为兼容代码
const arr = [1, 2, 3];
const newArr = [...arr];
// 可能被转译为：
// var newArr = [].concat(arr);