JavaScript数组复制详解

下面是关于JavaScript数组复制的完整攻略。

什么是JavaScript数组复制？

JavaScript中的数组复制是指将一个数组的所有元素拷贝到另一个数组中。数组复制通常涉及到浅拷贝和深拷贝的概念。

如何实现JavaScript数组复制？

浅拷贝

浅拷贝是指将原数组的元素拷贝到一个新数组中，但这个新数组中的元素仍然指向了原数组中的对象。也就是说，新数组中的对象和原数组中的对象是共享的。

实现浅拷贝有许多方式，下面介绍其中两种：

方法一：使用concat()方法

let arr1 = [1, 2, {a: 3}];
let arr2 = arr1.concat();
// 修改arr2中的第三个元素
arr2[2].a = 4;

console.log(arr1); // [1, 2, {a: 4}]
console.log(arr2); // [1, 2, {a: 4}]

可以看到，arr1和arr2的第三个元素都被修改了，说明这是一个浅拷贝。

方法二：使用slice()方法

let arr1 = [1, 2, {a: 3}];
let arr2 = arr1.slice();
// 修改arr2中的第三个元素
arr2[2].a = 4;

console.log(arr1); // [1, 2, {a: 4}]
console.log(arr2); // [1, 2, {a: 4}]

同样可以看到，arr1和arr2的第三个元素都被修改了，说明这也是一个浅拷贝。

深拷贝

深拷贝是指将原数组的元素拷贝到一个新数组中，但这个新数组中的元素和原数组中的对象是独立的，两者之间没有任何关联。

深拷贝的实现方法很多，下面介绍其中两种：

方法一：使用JSON.parse()和JSON.stringify()方法

let arr1 = [1, 2, {a: 3}];
let arr2 = JSON.parse(JSON.stringify(arr1));
// 修改arr2中的第三个元素
arr2[2].a = 4;

console.log(arr1); // [1, 2, {a: 3}]
console.log(arr2); // [1, 2, {a: 4}]

可以看到，arr2的第三个元素被修改了，而arr1的第三个元素没有被修改，说明这是一个深拷贝。

需要注意的是，JSON.stringify()方法会将对象中所有不可枚举的属性和方法都忽略掉，所以在使用这种方式时需要特别注意。

方法二：使用递归实现深拷贝

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  const newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}

let arr1 = [1, 2, {a: 3}];
let arr2 = deepCopy(arr1);
// 修改arr2中的第三个元素
arr2[2].a = 4;

console.log(arr1); // [1, 2, {a: 3}]
console.log(arr2); // [1, 2, {a: 4}]

同样可以看到，arr2的第三个元素被修改了，而arr1的第三个元素没有被修改，说明这是一个深拷贝。

总结

以上就是JavaScript数组复制的详细讲解，其中包括了浅拷贝和深拷贝的概念和实现方法，希望能对你有所帮助。