当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript深拷贝处理循环引用技巧

JavaScript深拷贝处理循环引用技巧

2025-09-18 08:06:29 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript深拷贝处理循环引用方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

深拷贝通过创建完全独立的对象避免修改原对象，使用递归结合WeakMap可处理循环引用；为防堆栈溢出，可用循环替代递归；根据场景选择JSON方法、递归、循环或第三方库以平衡性能与功能。

JavaScript中如何实现深拷贝函数以处理循环引用？

深拷贝的核心在于创建一个与原始对象完全独立的新对象，这意味着修改新对象不会影响到原始对象。处理循环引用则需要在拷贝过程中追踪已拷贝过的对象，避免无限递归。

解决方案

实现深拷贝并处理循环引用，通常需要结合递归和哈希表（或WeakMap）来记录已拷贝的对象。

function deepCopy(obj, map = new WeakMap()) {
  if (typeof obj !== "object" || obj === null) {
    return obj; // 如果是基本类型或null，直接返回
  }

  if (map.has(obj)) {
    return map.get(obj); // 如果已经拷贝过，直接返回拷贝后的对象
  }

  const newObj = Array.isArray(obj) ? [] : {}; // 创建新的对象或数组
  map.set(obj, newObj); // 将原始对象和新对象关联起来

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key], map); // 递归拷贝属性
    }
  }

  return newObj;
}

// 示例
const obj = {
  a: 1,
  b: { c: 2 },
};
obj.b.d = obj; // 创建循环引用

const newObj = deepCopy(obj);

newObj.a = 3;
newObj.b.c = 4;

console.log(obj.a); // 输出 1
console.log(newObj.a); // 输出 3
console.log(obj.b.c); // 输出 2
console.log(newObj.b.c); // 输出 4

console.log(obj.b.d === obj); // 输出 true
console.log(newObj.b.d === newObj); // 输出 true
console.log(obj.b.d === newObj.b.d); // 输出 false

上述代码使用 WeakMap 来存储已拷贝的对象。WeakMap 的好处在于，当原始对象被垃圾回收时，WeakMap 中对应的键值对也会被自动移除，避免内存泄漏。

如何避免深拷贝中的堆栈溢出错误？

深拷贝涉及递归，如果对象层级过深，可能会导致堆栈溢出。解决这个问题的方法主要有两种：

尾递归优化（虽然 JavaScript 引擎支持有限）：理论上，尾递归可以被优化为循环，从而避免堆栈溢出。但是，JavaScript 引擎对尾递归的优化支持并不完善，因此这种方法的实际效果可能有限。
使用循环代替递归：将递归转换为循环可以有效地避免堆栈溢出。这通常需要使用栈或队列来模拟递归过程。下面是一个使用栈的例子：

function deepCopyIterative(obj) {
  const stack = [{ source: obj, target: Array.isArray(obj) ? [] : {} }];
  const map = new WeakMap();

  while (stack.length > 0) {
    const { source, target } = stack.pop();

    if (map.has(source)) {
      continue; // 已经拷贝过，跳过
    }
    map.set(source, target);

    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        const value = source[key];

        if (typeof value === "object" && value !== null) {
          if (map.has(value)) {
            target[key] = map.get(value); // 已经拷贝过，直接引用
          } else {
            const newTarget = Array.isArray(value) ? [] : {};
            target[key] = newTarget;
            stack.push({ source: value, target: newTarget }); // 将待拷贝的对象入栈
          }
        } else {
          target[key] = value; // 基本类型直接拷贝
        }
      }
    }
  }

  // 找到最终的拷贝对象
  for (const [key, value] of map) {
    if (key === obj) {
      return value;
    }
  }
}

这个循环版本的深拷贝使用 stack 数组来模拟递归调用栈。它将待拷贝的对象及其对应的拷贝目标压入栈中，然后循环处理栈中的元素，直到栈为空。这种方法避免了递归调用，从而避免了堆栈溢出。

如何选择合适的深拷贝方法？

选择合适的深拷贝方法取决于具体的需求和场景。

JSON.parse(JSON.stringify(obj))：这种方法简单快捷，但有一些限制：
- 无法拷贝函数、Symbol、undefined 等特殊类型。
- 无法处理循环引用。
- 性能相对较差，因为它需要将对象转换为字符串，然后再解析为对象。
递归深拷贝：这种方法可以拷贝所有类型的对象，包括函数和循环引用。但是，如果对象层级过深，可能会导致堆栈溢出。
循环深拷贝：这种方法可以避免堆栈溢出，但代码相对复杂。
第三方库（如 Lodash 的 _.cloneDeep）：这些库通常提供了高性能、功能完善的深拷贝实现。