深拷贝浅拷贝深拷贝浅拷贝的方法

浅拷贝：浅拷贝拷贝的是对象的一层属性如果对象里面还有对象则拷贝的是复杂数据类型的地址浅拷贝一般使用Object.assign(给谁，拷贝谁）{...对象名}

深拷贝：深拷贝拷贝的是对象的多层属性如果对象里面还有对象则继续拷贝一般我们使用递归、lodash/cloneDeep或者是（JSON.parse(JSON.stringify))=>后端给的数据涉及函数体 undefined则不能拷贝成功）

来实现

<body>
    <script>
      const obj = {
        uname: "张三",
        age: 18,
        family: {
          baby: "小阿三",
        },
      };
      /* 
      浅拷贝：拷贝对象的一层属性 如果对象里面还有对象（复杂数据类型）则拷贝的是地址 两者之间会相互影响 浅拷贝只适用于简单数据类型
      深拷贝：拷贝对象的多层属性 如果对象里面还有对象 则继续拷贝 一般使用递归、lodash/cloneDeep或者Json,stringify()来实现
      */

      // 方法一：浅拷贝 Object.assign(给谁，拷贝谁)
      // let newObject = {};
      // Object.assign(newObject, obj);
      // newObject.uname = "ll"; //改名
      // console.log(newObject); //这里拷贝出来的方法是一个地址

      // console.log(obj); //原对象里面的属性值没有被修改
      // newObject.family.baby = "大阿三";
      // console.log(newObject);
      // console.log(obj); //原对象里面的方法也会被修改

      // 方法2：浅拷贝 {...对象名}
      const o = { ...obj };
      // 原数据中的方法的值（复杂数据类型）又被修改了
      o.family.baby = "复杂数据类型浅拷贝拷贝的是地址";
      console.log(obj);
    </script>
  </body>

使用递归深拷贝

<body>
    <script>
      /* 
    深拷贝 ：1.一般使用递归
            2.lodsh/cloneDeep
            3.JSON.parse(JSON.stringify())来实现
          */
      //  利用递归实现深拷贝
      let obj = {
        name: "zs",
        age: 17,
        msg: ["179", "1000000"],
        family: {
          cat: "菜包",
          dog: "肉包",
        },
      };

      // for (let k in obj) {
      //   // console.log(k); //所有的属性名name age msg family

      //   // console.log(obj[k]); //所有的属性值zs 17 179 1000000 菜包 肉包
      //   newObj[k] = obj[k];
      //   console.log(newObj);
      // }
      // 手写深拷贝 有缺陷
      let newObj = {};
      function deepClone(newObj1, oldObj) {
        for (let k in oldObj) {
          if (oldObj[k] instanceof Array) {
            // 开辟一个新数组
            newObj1[k] = [];
            deepClone(newObj1[k], oldObj[k]);
          } else if (oldObj[k] instanceof Object) {
            newObj1[k] = {};
            deepClone(newObj1[k], oldObj[k]);
          } else {
            newObj1[k] = oldObj[k];
          }
        }
        return newObj1;
      }
      const res = deepClone(newObj, obj);
      // console.log(res);
      res.family.cat = "闹闹"; //将原来复杂数据类型中的属性值修改为了闹闹
      console.log(res); //把菜包变成闹闹
      console.log(obj); //没有修改原数组
    </script>
  </body>

用lodash 进行深拷贝 _.cloneDeep(value)

<body>
    <!-- 先引用 -->
    <script src="./lodash.min.js"></script>
    <script>
      let obj = {
        name: "zs",
        age: 17,
        msg: ["179", "1000000"],
        family: {
          cat: "菜包",
          dog: "肉包",
        },
      };
      //用lodash 进行深拷贝 _.cloneDeep(value)
      const o = _.cloneDeep(obj);
      console.log(o);
      o.msg.push("3");
      o.family.dog = "哄哄";
      console.log(o); //深拷贝后修改成哄哄
      console.log(obj); //原数据没有被修改 还是肉包
      console.log(o === obj); //false
    </script>
  </body>

JSON.parse(JSON.stringify(obj))利用字符串的不可变性将字符串转换成复杂数据类型进行深拷贝

  <body>
    <script>
      const obj = {
        uname: "pink",
        age: 18,
        hobby: ["乒乓球", "足球"],
        family: {
          baby: "小pink",
        },
      };
      /*  
      // 深拷贝
    JSON.parse(JSON.stringify(obj))利用字符串的不可变性 将字符串转换成复杂数据类型 进行深拷贝
    JSON.stringify(obj) 将复杂数据类型转换为JSON字符串 
    */
      // 开辟一个新的空间
      const newObj = JSON.parse(JSON.stringify(obj)); //利用字符串的不可变性 把字符串转换成js数据类型
      newObj.family.baby = "小丸子";
      console.log(newObj); //小丸子 深拷贝后的新数据
      console.log(obj); //还是小pink 没有修改原数据

      //  拓展：字符串的不可变性 数据还是占内存的 不要大量拼接字符串 会导致内存泄漏
      // let str = "pink";
      // str = "123"; //数据还是占内存的
      // str = "red";
      // console.log(str);
    </script>
  </body>