一个完美的深拷贝

云卷云舒%

已于 2023-03-21 11:27:40 修改

阅读量224

点赞数

文章标签：前端 Powered by 金山文档

于 2023-03-21 11:09:05 首次发布

本文链接：https://blog.csdn.net/qq_39290323/article/details/129684419

版权

该文章提供了一个JavaScript函数用于实现深度克隆，能处理包括null、日期、Set、Map、正则表达式、HTML元素以及复杂对象在内的各种数据类型。函数通过递归方式复制对象，确保原始对象和克隆对象之间的独立性。在测试代码中，展示了对不同类型的数据进行深拷贝的示例。

摘要由CSDN通过智能技术生成

    function deepClone(target, map = new WeakMap()) {
      if (target === null) return target;
      if (target instanceof Date) return new Date(target);
      if (target instanceof Set) return new Set([...target]);
      if (target instanceof Map) return new Map([...target]);
      if (target instanceof RegExp) return new RegExp(target);
      if (target instanceof HTMLElement) return target;

      if (typeof target !== "object") return target;

      if (map.get(target)) return map.get(target);
      const cloneTarget = new target.constructor();
      map.set(target, cloneTarget);

      Reflect.ownKeys(target).forEach((key) => {
        cloneTarget[key] = deepClone(target[key], map);
      });
      return cloneTarget;
    }

测试代码：

    // 特殊类型
    // let target = null;
    // let target = new Date();
    // let target = new Set([10, 10, 12, 14, { name: "zzz" }]);
    // let target = new Map([
    //   [
    //     ["watermelon", "fruit"],
    //     ["cat", "animal"],
    //   ],
    // ]);
    // let target =
    //   /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[1-9]|2[1-9])$/;
    // let target = `<div class="searchbtn"><a href="#" @click="search">检索</a></div>`;

    // 原始类型
    // let target = 3;

    let target = {
      name: "张三",
      info: {
        age: 18,
      },
      fun: function () {
        console.log("111");
      },
    };
    target.target = target;
    console.log(deepClone(target));