JS 手写深拷贝(使用WeakMap处理了循环引用,防止进入死循环)

最新推荐文章于 2025-06-03 11:32:36 发布

原创最新推荐文章于 2025-06-03 11:32:36 发布 · 1.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JS 专栏收录该内容

48 篇文章

订阅专栏

这篇博客探讨了如何在JavaScript中手动实现深拷贝，以解决JSON.stringify和parse不能拷贝函数及undefined的问题。文章通过递归方式逐层拷贝对象、数组和特殊类型（如日期和正则），确保了复杂数据结构的复制。同时，文中提供了一个具体的深拷贝函数实现，并通过示例展示了其工作原理和效果。

JS 手写深拷贝

/* 
    一般来说通过JSON.stringify以及string.parse可以实现深拷贝
    但是拷贝不了函数以及undefined
    所以需要手写一个深拷贝的函数
    主要的思路是 递归拷贝 一层层的拷贝
*/

function deepClone(obj,hash = new WeakMap()) {
  /* 1.对传入的参数值进行判断 */

  // 当传入的参数是null或者undefined时 利用null==undefined 直接返回
  if (obj == null) return obj;

  // 当传入的是日期格式的对象时 再将其拷贝一层
  if (obj instanceof Date) return new Date(obj);

  // 当传入的是正则表达式格式的对象时 再将其拷贝一层
  if (obj instanceof RegExp) return new RegExp(obj);

  // 当初入的是函数对象时 直接返回
  if (typeof obj !== "object") return obj;

  // 如果拷贝的对象是存在,直接从weakmap中返回即可
  if (hash.has(obj)) return hash.get(obj);

  // 数组以及对象的拷贝
  let cloneObj = new obj.constructor();

  hash.set(obj,cloneObj);
  for (const key in obj) {
    // for...in循环会遍历obj原型上的属性
    // 通过obj.hasOwnProperty只遍历obj对象上的属性
    if (obj.hasOwnProperty(key)) {
      // 递归拷贝每一项的值
      cloneObj[key] = deepClone(obj[key],hash);
    }
  }
  return cloneObj;
}

  const obj = { age: { name: "小林" } };
  const n = deepClone(obj);
  n.age.name = "小n";
  console.log(obj);
  console.log(n);