深度拷贝 JavaScript 对象的有效方法

2023-10-01 10:26:33

深度拷贝，顾名思义，就是将一个对象的所有属性，包括其子对象，都复制到一个新对象中。这在 JavaScript 开发中很常见，特别是在需要处理复杂数据结构时。

传统的 JavaScript 深度拷贝方法如下：

const newObject = JSON.parse(JSON.stringify(object));

这种方法简单易用，但存在一些局限性，例如无法处理循环引用、函数和某些特殊类型的数据。

为了解决这些问题，我们可以手动实现一个更健壮的深度拷贝函数。以下是实现步骤：

处理基本类型： 对于字符串、数字、布尔值等基本类型，直接将其赋值给新对象即可。
处理引用类型： 对于对象和数组等引用类型，创建一个新对象或数组，并使用递归将原始对象的属性和元素逐一复制到新对象或数组中。
处理循环引用： 在开始复制之前，创建一个哈希表来存储原始对象的引用。如果在复制过程中遇到循环引用，则直接从哈希表中获取对象的副本。
处理特殊类型： 对于函数、日期和正则表达式等特殊类型，需要使用专门的方法进行复制。
处理嵌套对象： 对于包含嵌套对象的复杂数据结构，需要逐层递归地进行复制。

下面是一个实现深度拷贝函数的示例代码：

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

  const hashTable = new Map();
  const newObject = Array.isArray(object) ? [] : {};

  const copy = (obj, hash) => {
    if (hash.has(obj)) {
      return hash.get(obj);
    }

    if (typeof obj === "object" && obj !== null) {
      hash.set(obj, newObject);

      if (Array.isArray(obj)) {
        for (let i = 0; i < obj.length; i++) {
          newObject[i] = copy(obj[i], hash);
        }
      } else {
        for (const key in obj) {
          newObject[key] = copy(obj[key], hash);
        }
      }
    } else {
      newObject = obj;
    }

    return newObject;
  };

  return copy(object, hashTable);
}

使用这个函数，我们可以安全地深度拷贝任何 JavaScript 对象：

const originalObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

const copiedObject = deepCopy(originalObject);
copiedObject.name = "Jane Doe";
copiedObject.address.city = "Newtown";

console.log(originalObject); // { name: "John Doe", age: 30, address: { street: "123 Main Street", city: "Anytown", state: "CA" } }
console.log(copiedObject); // { name: "Jane Doe", age: 30, address: { street: "123 Main Street", city: "Newtown", state: "CA" } }