告别Shallow Copy之痛：Javascript深拷贝让数据丝滑复制

2023-10-01 08:27:13

JavaScript 深拷贝：复制数据的终极指南

前言

复制数据是 JavaScript 程序员经常遇到的难题，浅拷贝和深拷贝是两种截然不同的复制方式。浅拷贝仅复制对象的第一层属性，而深拷贝则会递归地复制所有属性，包括嵌套的对象和数组。本文将深入探讨深拷贝，揭开它的奥秘，并提供解决方案来应对它的挑战。

浅拷贝 vs 深拷贝

浅拷贝就像用胶带粘住文件的副本，而深拷贝则是用扫描仪创建一份完全相同的副本。浅拷贝只复制最顶层的属性，而深拷贝则会深入挖掘，复制每个细节。

JSON 深拷贝的局限性

JSON 深拷贝是使用 JSON 字符串进行复制的，但它有一个缺陷——它无法处理循环引用，特殊对象（如日期）和原型链。

深拷贝的难题

深拷贝虽然强大，但也存在一些固有的问题：

效率低：由于需要递归复制，因此比浅拷贝慢。
内存消耗大：创建完整副本会占用更多内存。
难以实现：特别是对于复杂的数据结构。

解决方案

1. 循环引用：哈希表

当遇到循环引用时，我们可以使用一个哈希表来跟踪已复制的对象。遇到重复对象时，直接返回副本，避免无限循环。

2. 特殊对象：专门处理

对于日期、正则表达式和错误等特殊对象，需要使用特殊的方法进行复制，如 new Date()、new RegExp() 和 new Error()。

3. 原型链：Object.create()

Object.create() 方法允许我们创建一个新对象，该对象的原型链指向另一个对象，从而复制原型链。

实现深拷贝函数

使用上述技术，我们可以编写一个深拷贝函数，它可以复制任何类型的数据结构，包括循环引用、特殊对象和原型链。

function deepCopy(obj) {
  // 哈希表存储已复制对象
  const visited = new WeakMap();

  // 递归函数
  function copy(obj) {
    // 如果对象已存在于哈希表中，则直接返回
    if (visited.has(obj)) return visited.get(obj);

    // 如果是特殊对象，则使用特殊方法复制
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (obj instanceof Error) return new Error(obj);

    // 对于其他对象，创建副本并保存到哈希表
    const copy = {};
    visited.set(obj, copy);

    // 复制对象属性
    Object.keys(obj).forEach(key => {
      copy[key] = copy(obj[key]);
    });

    // 如果对象有原型链，则复制原型链
    if (Object.getPrototypeOf(obj) !== null) {
      copy.__proto__ = copy(Object.getPrototypeOf(obj));
    }

    return copy;
  }

  return copy(obj);
}