JS的浅拷贝和深拷贝

首先理解什么是浅拷贝和深拷贝:

浅拷贝:

  • 浅拷贝只会复制对象的第一层属性,而不会递归地复制嵌套的对象。
  • 浅拷贝仅复制对象的引用,新对象和原始对象仍然共享相同的引用,因此对新对象的修改可能会影响到原始对象。
  • 浅拷贝方法包括Object.assign()、扩展运算符...等。

代码解释:

const obj = {
            uname:'pink',
            age:18,
            family:{
                baby:'一'
            }
        }
        const o = {...obj};
        o.age = 20;
        console.log(obj.age);//18
        console.log(o.age);//20

这是浅拷贝  只会复制对象的第一次层属性   因此会看到两个对象的age值不一样

再看对象嵌套多层对象时的输出:

const obj = {
            uname:'pink',
            age:18,
            family:{
                baby:'一'
            }
        }
        
        const o = {};
        Object.assign(o,obj);
        o.age = 20;
        o.family.baby = '二';
        console.log(obj.age);//18
        console.log(o.age);//20
        console.log(obj.family.baby);//二
        console.log(o.family.baby);//二

这里我们可以看到  浅拷贝在我们只有一层属性的时候 修改不会对源对象造成影响,但是当源对象中有多层对象的时候  对于o.family.baby的赋值操作,由于oobj对象都引用了相同的family对象,所以修改o.family.baby实际上也会影响到obj.family.baby。这是因为浅拷贝只复制对象的引用,所以当引用指向的对象发生改变时,所有引用该对象的变量都会受到影响。当执行Object.assign(o, obj)时,o对象获得了obj对象的属性和值。所以,o.age的赋值操作并不会影响到obj.age,因为这只是修改了o对象的属性值,并没有改变原始的obj对象。

常用方法:

  1. 拷贝对象:Object.assgin()/展开运算符{...obj}拷贝对象

  2. 拷贝数组:Array.prototype.concat()或者[...arr]

直接赋值获得前拷贝有什么区别?

  • 直接赋值的方法,只要是对象,都会影响,因为是直接拷贝对象栈的地址

  • 浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还是回相互影响

浅拷贝怎么理解?

  • 拷贝对象之后,里面的属性值是简单数据类型直接拷贝值

  • 如果属性值是引用数据类型则拷贝的是地址

深拷贝:

深拷贝:拷贝的是对象,不是地址

常用的方法:

  1. 通过递归实现深拷贝

  2. lodash/cloneDeep

    语法:_.cloneDeep(要被克隆的对象);
    const o = _.cloneDeep(obj);

  3. 通过JSON.stringify()实现

    常用使用JSON方法:
    1. const obj = {
                  uanme:'pink',
                  age:18,
                  hobby:['乒乓球','足球'],
                  family:{
                      baby:'小pink'
                  }
              }
      
              //把对象转换成JSON字符串
              // console.log(JSON.stringify(obj));
              /*
              {"uanme":"pink","age":18,"hobby":["乒乓球","足球"],"family":{"baby":"小pink"}}
              */
              const o = JSON.parse(JSON.stringify(obj));
              console.log(o);
              o.family.baby = '123';
              console.log(o);
              console.log(obj);
      这里的const o = JSON.parse(JSON.stringify(obj));console.log(o);输出的值为:JS的浅拷贝和深拷贝_第1张图片
      1. 这里的baby的值改变下因为下面的 o.family.baby = '123'; 对它进行了改变
      2. 当我们输出那个值的时候会发现和上面的一模一样:
        1. JS的浅拷贝和深拷贝_第2张图片
      3. 而当我们输出obj的值的时候会发现它的baby的值并没有改变:
        1. JS的浅拷贝和深拷贝_第3张图片

这就是深拷贝 当拷贝的对象发生变化时  源对象不会发生变化

你可能感兴趣的:(javascript,开发语言,ecmascript)