介绍
在 ES6 中，展开运算符是一种非常强大且常用的操作符，它可以帮助我们快速且方便地对一些数据进行操作。展开运算符可以展开数组、对象、字符串等数据类型。本文将详细介绍展开运算符的各种应用场景，并且提供相应的示例代码。
数组展开
1. 数组合并
使用展开运算符可以很方便地合并两个数组，示例如下：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
在上面的代码中，[...arr1, ...arr2] 的格式表示将 arr1 中的元素和 arr2 中的元素展开成一个新的数组 arr3。
2. 数组复制
使用展开运算符可以非常方便地实现数组的复制，示例如下：
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
在上面的代码中，[...arr1] 会展开 arr1 中的元素并创建一个新的数组 arr2，因此 arr1 和 arr2 是两个不同的数组。
3. 数组插入
使用展开运算符可以很方便地向数组中插入元素，示例如下：
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5, 6]; console.log(arr2); // [1, 2, 3, 4, 5, 6]
在上面的代码中，[...arr1, 4, 5, 6] 会将 arr1 中的元素展开成一个新的数组，再插入 4、5 和 6 这三个元素。
4. 数组切片
使用展开运算符可以实现数组的切片，示例如下：
const arr1 = [1, 2, 3, 4, 5]; const arr2 = [...arr1.slice(0, 3), ...arr1.slice(4)]; console.log(arr2); // [1, 2, 3, 5]
在上面的代码中，[...arr1.slice(0, 3), ...arr1.slice(4)] 会将 arr1 中的前三个元素和后一个元素展开成一个新的数组 arr2，从而实现了删除 arr1 中索引为 3 的元素。
对象展开
1. 对象合并
使用展开运算符可以很方便地合并两个对象，示例如下：
const obj1 = { name: 'Jack', age: 18 };
const obj2 = { gender: 'male', city: 'New York' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'Jack', age: 18, gender: 'male', city: 'New York' }在上面的代码中，{...obj1, ...obj2} 的格式表示将 obj1 中的属性和 obj2 中的属性合并成一个新的对象 obj3。
2. 对象复制
使用展开运算符可以很方便地实现对象的复制，示例如下：
const obj1 = { name: 'Jack', age: 18 };
const obj2 = { ...obj1 };
console.log(obj2); // { name: 'Jack', age: 18 }在上面的代码中，{...obj1} 会复制 obj1 的所有属性并创建一个新的对象 obj2，因此 obj1 和 obj2 是两个不同的对象。
字符串展开
在 ES6 中，字符串也可以使用展开运算符来展开成数组，示例如下：
const str = 'hello'; const arr = [...str]; console.log(arr); // ['h', 'e', 'l', 'l', 'o']
在上面的代码中，[...str] 将字符串 str 展开成一个新的数组 arr，其中每个元素表示字符串中的一个字符。
总结
展开运算符是一种非常强大且常用的操作符，能够帮助我们快速且方便地对一些数据进行操作。包括数组的合并、复制、插入和切片，对象的合并和复制，以及字符串的展开成数组等等。在实际编写代码的过程中，我们应该灵活运用展开运算符，以提高代码的可读性和效率。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594b77ceb4cecbf2d900798