JavaScript中如何实现深拷贝函数以处理循环引用？-js教程-PHP中文网

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

狼影

发布： 2025-09-17 23:02:01

原创

847人浏览过

深拷贝通过创建完全独立的对象避免修改原对象，使用递归结合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

登录后复制

中对应的键值对也会被自动移除，避免内存泄漏。

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

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

立即学习“Java免费学习笔记（深入）”；

尾递归优化（虽然 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))
```
登录后复制
：这种方法简单快捷，但有一些限制：

阿贝智能
阿贝智能是基于AI技术辅助创作儿童绘本、睡前故事和有声书的平台，助你创意实现、梦想成真。

17

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

如果对象结构简单，且不需要拷贝特殊类型，可以使用

JSON.parse(JSON.stringify(obj))

登录后复制

。如果需要拷贝所有类型的对象，且对象层级不深，可以使用递归深拷贝。如果对象层级较深，或者需要更好的性能，可以使用循环深拷贝或第三方库。

深拷贝会带来哪些性能问题？

深拷贝会带来一定的性能开销，因为它需要遍历对象的每一个属性，并递归地拷贝所有子对象。这会导致 CPU 和内存的消耗增加。

以下是一些可能影响深拷贝性能的因素：

对象的大小和复杂度：对象越大、层级越深，深拷贝的性能开销就越大。
对象的类型：拷贝基本类型比拷贝对象类型更快。
拷贝方法：不同的拷贝方法性能不同。
```
JSON.parse(JSON.stringify(obj))
```
登录后复制
的性能通常最差，而循环深拷贝和第三方库的性能相对较好。

为了提高深拷贝的性能，可以采取以下措施：

避免不必要的深拷贝：只在必要时才进行深拷贝。
使用更高效的拷贝方法：选择合适的拷贝方法，例如循环深拷贝或第三方库。
优化对象结构：尽量减少对象的层级和复杂度。
使用缓存：如果需要多次拷贝同一个对象，可以考虑使用缓存来避免重复拷贝。

记住，深拷贝是一个权衡的过程。在选择深拷贝方法时，需要根据具体的需求和场景，权衡性能和功能。

以上就是JavaScript中如何实现深拷贝函数以处理循环引用？的详细内容，更多请关注php中文网其它相关文章！