展开运算符（Spread Syntax）：数组与对象的扩展 (ES6+)

欢迎来到展开运算符的世界

大家好，欢迎来到今天的讲座！今天我们要聊的是JavaScript中的一个非常实用且强大的特性——展开运算符（Spread Syntax）。这个特性从ES6（ECMAScript 2015）开始引入，极大地简化了我们处理数组和对象的方式。如果你还在用concat()、apply()这些老方法，那么是时候更新你的技能树了！

什么是展开运算符？

展开运算符用三个点 ... 表示，它可以将一个数组或对象“展开”成多个元素或属性。它的作用类似于解压缩，把原本打包在一起的东西拆开来使用。听起来是不是很简单？别急，咱们慢慢来。

展开运算符的三大应用场景

1. 数组的展开
2. 对象的展开
3. 函数参数的展开

1. 数组的展开

1.1 合并数组

以前我们合并两个数组，可能会用concat()方法：

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

现在有了展开运算符，我们可以这样写：

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

是不是简洁多了？而且，展开运算符还可以在中间插入其他元素：

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

1.2 复制数组

复制数组也是一个常见的需求。以前我们可能会用slice()或者Array.from()：

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

现在可以用展开运算符轻松搞定：

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

1.3 将类数组对象转换为数组

有时候我们会遇到一些类数组对象，比如arguments或者NodeList，它们看起来像数组，但并不是真正的数组。我们可以通过展开运算符将它们转换为真正的数组：

function logArguments() {
  const args = [...arguments];
  console.log(args); // [1, 2, 3]
}

logArguments(1, 2, 3);

对于DOM操作中的NodeList，也可以这样做：

const nodeList = document.querySelectorAll('div');
const array = [...nodeList];
console.log(array); // [div, div, div]

2. 对象的展开

2.1 合并对象

对象的展开运算符可以用来合并多个对象。假设我们有两个对象：

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

如果我们想把它们合并成一个新的对象，可以这样做：

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

注意：如果两个对象中有相同的键，后面的值会覆盖前面的值。在这个例子中，b的值被obj2中的3覆盖了。

2.2 复制对象

复制对象也很简单：

const obj = { a: 1, b: 2 };
const copy = { ...obj };
console.log(copy); // { a: 1, b: 2 }

2.3 添加或修改属性

我们还可以在展开对象的同时添加或修改属性：

const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3, b: 4 };
console.log(newObj); // { a: 1, b: 4, c: 3 }

这里，c是一个新添加的属性，而b的值被修改为4。

2.4 嵌套对象的展开

展开运算符也可以用于嵌套对象，但它只会进行浅拷贝。例如：

const obj = { a: 1, nested: { x: 10 } };
const copy = { ...obj };
copy.nested.x = 20;
console.log(obj.nested.x); // 20

可以看到，虽然obj和copy是两个不同的对象，但它们共享同一个nested对象。如果你想进行深拷贝，可能需要借助其他工具或递归函数。

3. 函数参数的展开

3.1 将数组作为参数传递

以前我们想把数组作为参数传递给函数，可能会用apply()：

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

const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // 6

现在可以用展开运算符：

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

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

3.2 可变参数函数

展开运算符还可以与剩余参数（Rest Parameters）一起使用，创建可变参数函数。例如：

function sum(...args) {
  return args.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

在这里，...args会把所有传入的参数收集到一个数组中，然后我们可以对这个数组进行操作。

总结

展开运算符是一个非常强大且灵活的工具，它可以帮助我们更简洁地处理数组和对象。通过今天的讲座，你已经学会了如何使用展开运算符来合并数组、复制数组、转换类数组对象、合并对象、复制对象、添加或修改对象属性，以及将数组作为参数传递给函数。

希望你能把这些技巧应用到实际开发中，让代码更加简洁易读。如果你还有任何问题，欢迎随时提问！

参考文献

• MDN Web Docs: Spread syntax (...)
• ECMAScript 2015 (ES6) Specification

谢谢大家的聆听，下期再见！