JavaScript数组深拷贝|极客笔记

JavaScript数组深拷贝

在JavaScript中，数组是一种非常常用的数据结构，用来存储一组相关的数据。有时候我们需要对数组进行拷贝，以便于对原数组进行操作而不影响到原始数据。在这种情况下，我们需要进行深拷贝，即拷贝数组中的每个元素，而不仅仅是拷贝数组的引用。

为什么需要数组深拷贝

在JavaScript中，数组是引用数据类型，当我们将一个数组赋值给另一个变量时，实际上是将数组的引用赋给了新的变量。这意味着如果对新的变量进行操作，原数组也会受到影响。

let arr1 = [1, 2, 3];
let arr2 = arr1;

arr2.push(4);

console.log(arr1); // [1, 2, 3, 4]

上面的代码中，我们将arr1数组赋值给arr2，然后对arr2进行push操作。最后打印arr1数组，发现arr1数组也被改变了。这是因为arr2实际上是指向arr1的引用，对arr2的操作会影响到arr1。

实现数组深拷贝的方法

为了解决上述问题，我们需要对数组进行深拷贝，即创建一个新的数组，其中包含原数组的所有元素。下面介绍几种实现数组深拷贝的方法。

方法一：使用slice方法

let arr1 = [1, 2, 3];
let arr2 = arr1.slice();

arr2.push(4);

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

使用slice方法可以创建一个数组的浅拷贝，也就是拷贝原数组的所有元素并将它们放入新数组中。这样修改新数组就不会影响到原数组。

方法二：使用concat方法

let arr1 = [1, 2, 3];
let arr2 = arr1.concat();

arr2.push(4);

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

concat方法也可以用来创建数组的浅拷贝，将原数组的所有元素拼接到新数组中。同样，修改新数组不会影响到原数组。

方法三：使用JSON方法

let arr1 = [1, 2, 3];
let arr2 = JSON.parse(JSON.stringify(arr1));

arr2.push(4);

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

使用JSON方法可以实现数组的深拷贝。首先将数组转换成JSON字符串，再将字符串转换成新的数组。这样创建的新数组是原数组的完整拷贝，对新数组的操作不会影响到原数组。

需要注意的是，上述方法虽然可以实现数组的深拷贝，但是对于包含函数等特殊属性的对象，会出现无法正确拷贝的情况。在此情况下，可以使用自定义递归函数来实现深拷贝。

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

  let result = obj instanceof Array ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }

  return result;
}

let arr1 = [1, 2, {a: 3}];
let arr2 = deepCopy(arr1);

arr2[2].a = 4;

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

通过自定义递归函数，我们可以实现任意数据结构的深拷贝，包括数组、对象、嵌套数组和对象等。