JS中的深浅拷贝

一 浅拷贝

        1 浅拷贝的概念在 JavaScript 中，浅拷贝是指创建一个新对象或数组，然后将原始对象或数组的所有属性或元素复制到新对象或数组中。浅拷贝只会复制对象或数组的第一层结构，如果原始对象或数组的属性或元素是对象或数组，浅拷贝只会复制它们在栈中的指向而不是在堆中创建一个新的空间。

        2 浅拷贝实现的方法：

        2.1 扩展运算符（…）

      // 扩展运算符
      let arr = [1, 2, 3, 4, 5, 6,[2,3]];
      let arrs = [...arr];
      console.log(arr); // [1, 2, 3, 4, 5, 6,[2,3]];
      console.log(arrs); // [1, 2, 3, 4, 5, 6,[2,3]];
      // 只能对第一层数据修改有效
      arrs[2] = 10;
      console.log(arr); // [1, 2, 3, 4, 5, 6,[2,3]];
      console.log(arrs); // [1, 2, 10, 4, 5, 6,[2,3]];
      // 对深层次数据修改 全部会改变
      arrs[6][1] = 10;
      console.log(arr); // [1, 2, 3, 4, 5, 6,[2,10]];
      console.log(arrs); // [1, 2, 10, 4, 5, 6,[2,10]];

        2.2 Object.assign() 方法

  // Object.assign方法
    const original = { a: 1, b: 2 ,c:[10,{d:4}]};
    const copy = Object.assign({}, original);
    console.log(original); //{ a: 1, b: 2 ,c:[10,{d:4}]};
    console.log(copy); //{ a: 1, b: 2 ,c:[10,{d:4}]};
    // 只能对第一层数据进行修改 
    copy.a=10
    console.log(original); //{ a: 1, b: 2 ,c:[10,{d:4}]};
    console.log(copy); //{ a: 10, b: 2 ,c:[10,{d:4}]};
    // 对深层数据修改  会全部改变
    copy.c[1].d=12
    console.log(original); //{ a: 1, b: 2 ,c:[10,{d:12}]};
    console.log(copy); //{ a: 10, b: 2 ,c:[10,{d:12}]};

二 深拷贝

        1 深拷贝概念 深拷贝是指创建一个新的对象或数组，并且将原始对象或数组的所有属性或元素以及它们的嵌套对象或数组都复制到新的对象或数组中，简单来说就是在堆中开辟了一个新的空间，以此来保存拷贝后的数据。

        2 深拷贝的方法：

        2.1 JSON.parse(JSON.stringify(obj)）

   // JSON.parse(JSON.stringify(obj))
    const original = { a: 1, b: 2 ,c:[10,{d:4}],e:function(){console.log(1);}};
    const copy = JSON.parse(JSON.stringify(original));
    // 深拷贝只会改变自身 
    copy.c[1].d=10
    console.log(original);//{ a: 1, b: 2 ,c:[10,{d:4}]};
    console.log(copy);//{ a: 1, b: 2 ,c:[10,{d:10}]};
    // JSON.parse(JSON.stringify(obj)) 方法的缺点 无法拷贝函数
    original.e() //1
    copy.e()//copy.e is not a function

        2.2 使用递归函数实现深拷贝

      //   递归函数
      function deepClone(obj) {
        if (obj === null || typeof obj !== "object") {
          return obj; // 基本类型或 null 直接返回
        }

        const clone = Array.isArray(obj) ? [] : {}; // 判断是对象还是数组

        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            // 保证只复制实例属性
            clone[key] = deepClone(obj[key]); // 递归复制嵌套对象
          }
        }

        return clone;
      }
      let a = {
        age: 1,
        name: "5",
        ftn: function (val) {
          console.log(val);
        },
      };
      let b=deepClone(a)
      // 深拷贝只会修改自身
      b.age=10
      console.log(a.age); // 1
      console.log(b.age); // 10
      // 递归函数深拷贝 可以拷贝函数
      a.ftn(a.age) // 1
      b.ftn(b.age) // 10

        2.3 使用第三方库 如： Lodash

        

    // 安装
    npm i lodash
    // 引用
    const loda= require('lodash');
    //使用
    // 原始对象
    let a = {
    //     age: 1,
    //     name: "5",
    //     ftn: function (val) {
    //       console.log(val);
    //     },
    //   };

    // 使用 cloneDeep 方法进行深拷贝
    let b= loda.cloneDeep(a);
    //   // 深拷贝只会修改自身
    //   b.age=10
    //   console.log(a.age); // 1
    //   console.log(b.age); // 10
    //   // cloneDeep 方法深拷贝 可以拷贝函数
    //   a.ftn(a.age) // 1
    //   b.ftn(b.age) // 10