JS实现数组深拷贝的方法分析

2023年5月28日上午10:33 • JavaScript

下面是一份详细的“JS实现数组深拷贝的方法分析”的攻略：

背景

在使用 JavaScript 中的数组时, 如果我们要将一个数组赋值给另一个变量, 只是简单地将数组变量赋给另一个变量，这样会导致两个变量指向同一个数组引用，即两个数组变量会指向同一个数组对象，如果只是数组的一些简单操作，这不会产生什么问题, 但如果涉及到多次修改某个数组，这时不停地修改一个数组会引用到其他变量之前时的状态，这样会影响程序运行结果。这时候，就需要对数组进行深拷贝。

方法

数组深拷贝有很多方法，比如使用 JSON 库深度复制、使用递归实现深度克隆、使用 ES6 的扩展符等等。下面将介绍其中两个方法：

方法一：JSON 库转换

const arr1 = [1, 2, { a: 3 }];
const arr2 = JSON.parse(JSON.stringify(arr1));

JSON 库中有两个方法：JSON.stringify() 和 JSON.parse()，可以将任意复杂的东西转换成 JSON 字符串，再将这个 JSON 字符串解析成对象。在深拷贝数组中，我们可以利用 JSON 库的这两个方法：先把数组变成 JSON 字符串，再通过解析 JSON 字符串变成对象，从而达到深拷贝的目的。

但是，这种方法的缺陷是：它不能拷贝函数、正则、Date 等引用类型的值。

方法二：递归实现深度克隆

递归地从最简单的数据类型开始，每次返回时都进行一次克隆。遇到对象时，继续进行递归。

function deepClone(obj) {
  if (obj === null) {
    return null;
  }
  if (typeof obj !== "object") {
    return obj;
  }
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }
  const newObj = new obj.constructor();
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]);
    }
  }
  return newObj;
}

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

这种方法是通过递归实现深拷贝的。当拷贝的是基本类型时，直接返回该值，当是引用类型的时候，递归地拷贝该引用类型的值，并返回相应的克隆对象。这种方法比较完美地解决了 JSON 库方法的缺陷。

示例

下面两个示例将说明这两种方法分别是如何实现数组深拷贝的：

示例一：JSON 库转换

const arr1 = [1, 2, { a: 3 }, function () { console.log('hello') }];
const arr2 = JSON.parse(JSON.stringify(arr1));
arr2[2].a = 100;
console.log(arr1, arr2); // [1, 2, { a: 3 }, [Function]] [1, 2, { a: 100 }, null]

在这个示例中，我们把数组 arr1 赋值给 arr2 并使用 JSON 序列化和反序列化来完成深度复制。然后我们修改 arr2 的第三个元素，并输出 arr1 和 arr2。可以看到，虽然我们仅仅是修改了 arr2 的第三个元素，但 arr1 也跟着变了，即两个数组的第三个元素是不同的。

示例二：递归实现深度克隆

function deepClone(obj) {
  if (obj === null) {
    return null;
  }
  if (typeof obj !== "object") {
    return obj;
  }
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }
  const newObj = new obj.constructor();
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]);
    }
  }
  return newObj;
}

const arr1 = [1, 2, { a: 3 }, function () { console.log('hello') }];
const arr2 = deepClone(arr1);
arr2[2].a = 100;
console.log(arr1, arr2); // [1, 2, { a: 3 }, [Function]] [1, 2, { a: 100 }, [Function]]

在这个示例中，我们使用递归方式来实现数组的深拷贝，同时也打印出 arr1 和 arr2 以验证两个数组对象的不同。由于我们使用了递归方式实现深拷贝，因此即使修改了 arr2 的第三个元素，arr1 也不会受到影响，两个数组对象是相互独立的。