07 JS 深浅拷贝

最新推荐文章于 2024-08-04 16:33:59 发布

学前端的坤坤bond

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量337

点赞数 4

文章标签： javascript 开发语言 ecmascript es6 前端 java tomcat

本文链接：https://blog.csdn.net/m0_64904350/article/details/140549017

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      /*
            深浅拷贝
            - 将集合中的数据一模一样的复制到另一个集合中(两个集合数据类型一致)
            - 注意:一般我们说的数据 是不包含函数的 （拷贝一般拷贝数组或对象）

            1 赋值
            2 浅拷贝
            3 深拷贝
        */

      // 赋值
      // let o1 = { a: 1 }
      // let o2 = o1
      // // console.log(o2)
      // o2.a = 2
      // console.log(o1 === o2)
      // console.log(o2)

      // 浅拷贝
      // 1-使用for in 语法拷贝对象
      // 将对象(数组)的第一层数据复制一份给另一个对象
      // 注意 拷贝一层数据
      // let o1 = { name: 'zs', age: 17, classInfo: { score: 100 } }
      // let o2 = {}
      // for (const k in o1) {
      //     // 只拷贝了一层
      //     o2[k] = o1[k]
      //     // 如果第一层数据是对象或数组 则仅仅拷贝地址
      // }
      // o2.name = 'ls'
      // o2.classInfo.score = 99
      // console.log(o1)
      // console.log(o2)

      // 2-使用Object.assign()方法 实现浅拷贝
      // 语法 Object.assign(新对象，被拷贝对象)
      // 作用：将拷贝对象的数据进行浅拷贝到对象中
      // 返回值是 浅拷贝后得到的新对象
      // let o1 = { name: 'zs', age: 17, classInfo: { score: 100 } }
      // let o2 = Object.assign({}, o1)
      // o2.name = 'ls'
      // o2.classInfo.score = 99
      // console.log(o1)
      // console.log(o2)

      // 深拷贝
      //  - 无论数据有多少层，都要进行拷贝
      //  - 拷贝后的变量相互之间 不会影响
      // 缺陷 1 不支持函数 和 undefined 的深拷贝 JSON.stringify()会忽略对象中的函数和undefined值，
      // 因此通过这种方法深拷贝的对象将丢失这些数据
      // 无法转换的特殊数据类型 Date RegExp Map Set 等
      // 使用递归实现深拷贝
      function deepCopy(obj, origin) {
        // origin  源头
        for (const k in origin) {
          // console.log(Object.prototype.toString.call(origin[k]))
          if (Object.prototype.toString.call(origin[k]) === "[object Object]") {
            // console.log(origin[k])
            obj[k] = {};
            deepCopy(obj[k], origin[k]);
          } else if (
            Object.prototype.toString.call(origin[k]) === "[object Array]"
          ) {
            obj[k] = [];
            deepCopy(obj[k], origin[k]);
          } else {
            obj[k] = origin[k];
          }
        }
      }
      let o1 = {
        name: "zs",
        age: 17,
        classInfo: {
          score: 100,
          hobby: ["抽烟", "喝酒", "烫头", [1, 2, 3]],
        },
        fn: function () {
          console.log("fn");
        },
      };
      // // let e = o1[name]
      // // console.log(e)
      // let o2 = {}
      // deepCopy(o2, o1)
      // o2.name = 'ls'
      // o2.classInfo.hobby[0] = '说相声'
      // console.log('o1:', o1)
      // console.log('o2:', o2)

      // 使用JSON方法实现深拷贝
       // 缺陷 1 不支持函数 和 undefined 的深拷贝 JSON.stringify()会忽略对象中的函数和undefined值，
      // 因此通过这种方法深拷贝的对象将丢失这些数据
      // 无法转换的特殊数据类型 Date RegExp Map Set 等
    
      let str = JSON.stringify(o1);
      console.log(str);
      let o2 = JSON.parse(str);

      o2.name = "ls";
      o2.classInfo.hobby[0] = "说相声";
      // o1.fn()

      console.log(o1);
      console.log(o2);
      // o2.fn()

      let fn2 = fn.bind(null);
    </script>
  </body>
</html>