在 JavaScript 中，拷贝数组是一种常见的操作。在 ES6 中，我们可以使用 Spread operator（扩展运算符）来实现数组的浅拷贝。在 ES8/ES2017 中，Spread operator 进一步增强了其功能，使得我们可以轻松地实现数组的深拷贝。本文将详细介绍如何在 ES8/ES2017 中使用 Spread operator 进行数组拷贝，并提供示例代码。
什么是 Spread operator
Spread operator 是 ES6 中引入的一种新的语法，它使用三个点（...）表示。它可以将一个数组或者类数组对象展开成多个独立的元素。例如：
const arr = [1, 2, 3]; console.log(...arr); // 1 2 3
在上面的代码中，Spread operator 将数组 arr 展开成了三个独立的元素，然后使用 console.log() 方法打印出来。
如何使用 Spread operator 进行浅拷贝
在 ES6 中，我们可以使用 Spread operator 进行数组的浅拷贝。例如：
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
在上面的代码中，Spread operator 将数组 arr1 展开成了三个独立的元素，然后赋值给了数组 arr2，从而实现了数组的浅拷贝。
需要注意的是，浅拷贝只能拷贝一层，如果数组中包含了对象或者其他引用类型的数据，那么拷贝后的数组中仍然是引用类型的数据，而不是真正的拷贝。
如何使用 Spread operator 进行深拷贝
在 ES8/ES2017 中，Spread operator 增加了对对象和数组的深拷贝支持。例如：
const arr1 = [1, 2, { name: 'Alice' }];
const arr2 = [...arr1];
arr2[2].name = 'Bob';
console.log(arr1); // [1, 2, { name: 'Bob' }]
console.log(arr2); // [1, 2, { name: 'Bob' }]在上面的代码中，我们使用 Spread operator 对数组 arr1 进行深拷贝，并将拷贝后的数组赋值给了数组 arr2。然后我们修改了数组 arr2 中的第三个元素的 name 属性，并打印出了数组 arr1 和数组 arr2。可以看到，数组 arr1 和数组 arr2 的第三个元素的 name 属性都被修改了。
需要注意的是，Spread operator 进行的是浅拷贝，所以如果数组中嵌套的是对象或者其他引用类型的数据，那么拷贝后的数组中仍然是引用类型的数据，而不是真正的拷贝。如果要实现真正的深拷贝，可以使用 JSON.parse() 和 JSON.stringify() 方法，例如：
const arr1 = [1, 2, { name: 'Alice' }];
const arr2 = JSON.parse(JSON.stringify(arr1));
arr2[2].name = 'Bob';
console.log(arr1); // [1, 2, { name: 'Alice' }]
console.log(arr2); // [1, 2, { name: 'Bob' }]在上面的代码中，我们使用 JSON.parse() 方法将数组 arr1 转换成字符串，然后使用 JSON.stringify() 方法将字符串转换成数组 arr2，从而实现了数组的深拷贝。
总结
在 ES8/ES2017 中，Spread operator 增强了其功能，使得我们可以轻松地实现数组的深拷贝。需要注意的是，Spread operator 进行的是浅拷贝，所以如果数组中嵌套的是对象或者其他引用类型的数据，那么拷贝后的数组中仍然是引用类型的数据，而不是真正的拷贝。如果要实现真正的深拷贝，可以使用 JSON.parse() 和 JSON.stringify() 方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6561ad5ad2f5e1655dbba938