展开运算符（Spread Operator）

展开运算符（Spread Operator）是ES6中引入的一种语法，使用三个连续的点（...）表示。它可以在多种场合下使用，主要用途是“展开”数组或对象中的元素或属性。

使用展开运算符的几种常见情景：

1. 在函数调用时展开数组元素:

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 相当于执行 sum(1, 2, 3)，输出6
1
2
3
4
5

2. 在数组字面量中合并多个数组:

const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // 输出 ['apple', 'banana', 'orange', 'grape']
1
2
3
4

3. 复制数组:

const arr = [1, 2, 3];
const arrCopy = [...arr]; // 创建arr的一个浅拷贝
1
2

4. 在对象字面量中合并对象:

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出 { foo: 'baz', x: 42, y: 13 }
1
2
3
4

请注意，在合并对象时，如果有重复的键，则后面展开的对象属性会覆盖前面的。

5. 复制对象:

const obj = { name: 'John', age: 30 };
const objCopy = { ...obj }; // 创建obj的一个浅拷贝
1
2

6. 使用展开运算符代替apply方法:

const numbers = [9, 3, 2];
const maxNum = Math.max.apply(null, numbers); // 之前的写法
const maxNumNew = Math.max(...numbers); // 使用展开运算符的写法
console.log(maxNumNew); // 输出9，同样获得数组中的最大值
1
2
3
4

当使用展开运算符时有几点需要注意：

• 展开运算符拷贝的是数组或对象的元素或属性的引用，这意味着如果数组或对象中的元素是对象或数组，那么展开的是这些元素的引用，而不是它们的实际深拷贝。
• 展开对象时，只有对象自己的可枚举属性会被展开，不包括从原型链继承来的属性。

展开运算符大大简化了某些操作，并使代码更整洁和易读。