在 ES11 中，新增了一种语法：收集操作符（spread syntax），也称为展开操作符（spread operator），它可以让我们更方便地操作数组和对象。本文将详细介绍收集操作符的使用，包括其语法、应用场景和示例代码。
语法
收集操作符使用三个点（...）表示，分为数组和对象两种用法。
数组
在数组中，收集操作符可以将一个数组展开成多个元素。示例如下：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr1, ...arr2]; console.log(newArr); // [1, 2, 3, 4, 5, 6]
在上面的代码中，我们使用收集操作符将两个数组 arr1 和 arr2 展开成一个新数组 newArr。
对象
在对象中，收集操作符可以将一个对象展开成多个键值对。示例如下：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }在上面的代码中，我们使用收集操作符将两个对象 obj1 和 obj2 展开成一个新对象 newObj。
应用场景
收集操作符在实际开发中有很多应用场景，下面我们将介绍其中的几个。
数组合并
当我们需要将两个数组合并成一个新数组时，可以使用收集操作符。示例如下：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr1, ...arr2]; console.log(newArr); // [1, 2, 3, 4, 5, 6]
数组复制
当我们需要复制一个数组时，可以使用收集操作符。示例如下：
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
对象合并
当我们需要将两个对象合并成一个新对象时，可以使用收集操作符。示例如下：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }对象复制
当我们需要复制一个对象时，可以使用收集操作符。示例如下：
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }示例代码
下面是一些使用收集操作符的示例代码。
数组合并
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr1, ...arr2]; console.log(newArr); // [1, 2, 3, 4, 5, 6]
数组复制
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }对象复制
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }总结
收集操作符是 ES11 中新增的语法，可以让我们更方便地操作数组和对象。本文介绍了收集操作符的语法、应用场景和示例代码，希望能够帮助读者更好地理解和应用收集操作符。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65517700d2f5e1655db3637b