在 JavaScript 中，扩展运算符（...）是一种非常强大且灵活的语法，可以简化数组和对象的操作。本文将详细介绍扩展运算符的基本用法、应用场景及其背后的原理。

什么是扩展运算符？

扩展运算符（spread operator）是 ES6（ECMAScript 2015）引入的一项特性，用于将数组或对象拆分成单独的元素或属性。它的语法非常简单，只需在表达式前面添加三个点 ...。

基本用法

数组的拆分和合并

扩展运算符最常见的用途是用于数组的拆分和合并。

// 拆分数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 复制数组
console.log(arr2); // 输出: [1, 2, 3]

// 合并数组
const arr3 = [4, 5];
const mergedArr = [...arr1, ...arr3]; // 合并 arr1 和 arr3
console.log(mergedArr); // 输出: [1, 2, 3, 4, 5]

函数参数

扩展运算符可以将数组元素传递给函数作为独立的参数。

function sum(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];
console.log(sum(...nums)); // 输出: 6

对象的拆分和合并

从 ES2018 开始，扩展运算符也可以用于对象的合并和属性的复制。

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

// 合并对象
const mergedObj = { ...obj1, ...obj2 }; // obj2 的属性会覆盖 obj1 的相同属性
console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 }

常见应用场景

克隆数组或对象

使用扩展运算符可以方便地创建数组或对象的浅拷贝。

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
clonedArray[0] = 99;
console.log(originalArray); // 输出: [1, 2, 3]
console.log(clonedArray); // 输出: [99, 2, 3]

合并状态

在 React 等框架中，常常使用扩展运算符来更新状态。

const state = { name: 'Alice', age: 25 };
const newState = { ...state, age: 26 }; // 更新年龄
console.log(newState); // 输出: { name: 'Alice', age: 26 }

传递参数到组件

在 React 组件中，可以使用扩展运算符将对象属性传递给子组件。

const Button = ({ label }) => <button>{label}</button>;
const props = { label: 'Click me' };

// 使用扩展运算符传递 props
<Button {...props} />;

注意事项

• 浅拷贝：扩展运算符只会进行浅拷贝，如果数组或对象中包含嵌套结构，嵌套的对象仍然会引用原来的对象。

const original = { a: 1, b: { c: 2 } };
const copy = { ...original };
copy.b.c = 3;
console.log(original.b.c); // 输出: 3（原对象也被修改）

• 不能用于普通对象的 forEach 等方法：扩展运算符只能用于数组和对象，不能用于普通对象的 forEach 等数组方法。