ES复制拷贝数组

基础概念

在JavaScript中，数组复制是一个常见的操作。ES（ECMAScript）提供了多种复制数组的方法，包括浅拷贝和深拷贝。

相关优势

1. 性能：不同的复制方法在性能上有所差异，选择合适的方法可以提高代码执行效率。
2. 数据独立性：深拷贝可以确保新数组与原数组完全独立，修改新数组不会影响原数组。

类型

浅拷贝

浅拷贝只复制数组的第一层元素，如果数组元素是对象或数组，则复制的是引用。

• 方法一：Array.prototype.slice()
• 方法一：Array.prototype.slice()
• 方法二：Array.prototype.concat()
• 方法二：Array.prototype.concat()
• 方法三：展开运算符（Spread Operator）
• 方法三：展开运算符（Spread Operator）

深拷贝

深拷贝会递归复制数组的所有层级，确保新数组与原数组完全独立。

• 方法一：JSON.parse(JSON.stringify())
• 方法一：JSON.parse(JSON.stringify())
• 方法二：递归函数
• 方法二：递归函数

应用场景

• 数据备份：在进行数据操作前，复制一份数据进行备份。
• 函数参数传递：避免函数内部修改传入的数组影响外部数据。
• 并发处理：在多线程或多进程环境中，确保每个线程或进程操作的是独立的数组副本。

遇到的问题及解决方法

问题：浅拷贝导致的数据共享问题

原因：浅拷贝只复制了数组的第一层元素，如果数组元素是对象或数组，则复制的是引用，导致修改新数组中的对象会影响原数组。

解决方法：使用深拷贝方法，如JSON.parse(JSON.stringify())或自定义递归函数。

示例代码

let originalArray = [1, 2, {a: 3}];
let shallowCopy = [...originalArray]; // 浅拷贝
shallowCopy[2].a = 4; // 修改新数组中的对象属性
console.log(originalArray); // 输出: [1, 2, {a: 4}]，原数组也被修改了

let deepCopy = JSON.parse(JSON.stringify(originalArray)); // 深拷贝
deepCopy[2].a = 5; // 修改新数组中的对象属性
console.log(originalArray); // 输出: [1, 2, {a: 4}]，原数组不受影响

通过以上方法，可以有效解决数组复制过程中遇到的问题，确保数据的独立性和安全性。