js【详解】深拷贝

  什么是深拷贝?

对于引用类型的数据,才有深浅拷贝的说法

  • 浅拷贝 :执行拷贝的变量只复制被拷贝变量内存的引用数据的地址。
被拷贝变量内地址指向的数据发生变化时,执行拷贝的变量也会同步改变
  • 深拷贝
  1. 在堆内存中开辟一个全新的存储空间
  2. 将被拷贝变量中引用地址对应的内容完整复制一份存入新的存储空间
  3. 将新的存储空间的地址存入执行拷贝的变量中。
被拷贝变量内地址指向的数据发生变化时,执行拷贝的变量不会改变

深拷贝方案一 JSON.parse(JSON.stringify(obj))

缺陷:

  • 属性值为函数和undefined的属性会丢失
  • 属性值为正则表达式的会变成{}
  • 属性值为时间对象的会变成时间字符串
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      let obj = {
        string: "字符串",
        Number: 10,
        null: null,
        undefined: undefined,
        date: new Date(),
        function: () => {
          console.log("函数");
        },
        RegExp: /^([0]{2}|0[1-9]|[1-9])\d*$/,
      }
      console.log("被拷贝的对象");
      console.log(obj);
      let objJSONclone = JSON.parse(JSON.stringify(obj));
      console.log("使用JSON.parse(JSON.stringify(obj))拷贝对象");
      console.log(objJSONclone);

    </script>
  </body>
</html>

 深拷贝方案二

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      /**
       * 深拷贝
       * @param {Object} obj 要拷贝的对象
       */
      let obj = {
        string: "字符串",
        Number: 10,
        null: null,
        undefined: undefined,
        date: new Date(),
        function: () => {
          console.log("函数");
        },
        RegExp: /^([0]{2}|0[1-9]|[1-9])\d*$/,
      }
      function deepClone(obj) {
        if (obj === null) return null;
        if (typeof obj !== "object") return obj;
        if (obj.constructor === Date) return new Date(obj);
        if (obj.constructor === RegExp) return new RegExp(obj);
        var newObj = new obj.constructor(); //保持继承链
        for (var key in obj) {
          //不遍历其原型链上的属性
          if (obj.hasOwnProperty(key)) {
            var val = obj[key];
            // 使用arguments.callee解除与函数名的耦合
            newObj[key] = typeof val === "object" ? arguments.callee(val) : val; 
          }
        }
        return newObj;
      }
      let test = deepClone(obj)
      console.log(test)
    </script>
  </body>
</html>

 

相关推荐

  1. js拷贝与浅拷贝

    2024-03-22 03:12:02       48 阅读
  2. Python拷贝、浅拷贝详解

    2024-03-22 03:12:02       54 阅读
  3. 拷贝和浅拷贝js的问题)

    2024-03-22 03:12:02       61 阅读
  4. js中浅拷贝拷贝的区别

    2024-03-22 03:12:02       59 阅读
  5. js中浅拷贝拷贝的区别

    2024-03-22 03:12:02       61 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-22 03:12:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-22 03:12:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-22 03:12:02       82 阅读
  4. Python语言-面向对象

    2024-03-22 03:12:02       91 阅读

热门阅读

  1. CCF-CSP认证考试 202303-4 星际网络II 100分题解

    2024-03-22 03:12:02       36 阅读
  2. AOP+MySQL实现一个简历的日志收集工具

    2024-03-22 03:12:02       36 阅读
  3. C++ 小玉家的电费

    2024-03-22 03:12:02       40 阅读
  4. 【Python-Pandas】to_csv用法示例

    2024-03-22 03:12:02       41 阅读
  5. 【mybatis】MetaObject解读

    2024-03-22 03:12:02       45 阅读
  6. “横扫”时代的《大数据》

    2024-03-22 03:12:02       45 阅读
  7. 单目深度估计:从理论到实践

    2024-03-22 03:12:02       40 阅读
  8. python离线安装依赖库 依赖库版本

    2024-03-22 03:12:02       44 阅读
  9. element ui实践bug

    2024-03-22 03:12:02       40 阅读
  10. 温湿度项目V1.0 设计——简介

    2024-03-22 03:12:02       42 阅读
  11. python数据分析numpy基础之unique对数组元素去重

    2024-03-22 03:12:02       43 阅读