JS直接赋值、浅拷贝和深拷贝的区别

小咪咪 2022-08-28 07:43 239阅读 0赞

首先要知道JS的数据类型分为基本数据类型（String、Number、Boolean 等）和引用数据类型（Object、Array、Function）。基本数据类型值的存储是直接存储在栈内存中的，而引用数据类型值的储存是不同的，值是存储在堆内存中，不是直接存储在栈内存中，栈内存存储的是值的引用地址，可以通过引用地址找到堆内存中所对应的值。看图可以更好的理解。

现在有a对象，然后变量b等于a。

let a = { name : 'lisi' }
    let b = a

他们的值在内存中是这样存储的。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16][]

有了对基本数据类型和引用数据在内存的储存方法，就可以继续了。

## 一、直接赋值 ##

如果是基本数据类型的直接赋值，得到的是一个新的值，会在栈内存中新开辟一个空间储存赋值的值，所以不用考虑浅拷贝和深拷贝。

而引用数据类型的直接赋值，得到的是一个地址的引用，就会出现下面的情况。

let obj1 = {
      name: 'zhangsan',
      age: 18
    }
    let obj2 = obj1
    obj2.name = 'lisi'
    console.log('obj1:',obj1);
    console.log('obj2:',obj2);

![57940d06253f4aab8301369e38c11178.png][]

原因就是直接赋值后，obj2得到的只是obj1值的引用地址，此时obj1和obj2引用地址一样，指向堆内存的值也是同一个。所以obj2修改name属性后，obj1对应的值也改变了，因为是同一个值。

## 二、浅拷贝 ##

浅拷贝就是为了解决上面的情况，让赋值后的对象拿到的是新的引用地址和新的值，一人一份，不用两个对象用同一份值。但是都叫浅拷贝了，意思就是没有完全一人一份，有的地方还是会共用同一份值。比如一个对象的一个属性值是数组或对象（相当于对象里还有一个对象），而浅拷贝后，拷贝到的这个属性得到的还是同一个引用地址。

浅拷贝只能拷贝一层的基本数据类型，多层后就无法拷贝到了，如下例子。（我使用了lodash库中的 \_clone方法实现浅拷贝，使用前记得引入,而ES6中的Object.assign也可以进行浅拷贝。）

let obj1 = {
      name: 'zhangsan',
      age: 18,
      friend: {
        name: 'xiaobai'
      }
    }
    let obj2 = _.clone(obj1) //进行浅拷贝
    obj2.name = 'lisi'       //修改 obj2.name 看看obj1.name 是否改变
    obj2.friend.name = 'afu' //修改 obj2.friend.name 看看 obj1里的是否一起改变
    console.log('obj1:', obj1);
    console.log('obj2:', obj2);

![41c0ab2ea1704a3690eab1e827cc414b.png][]

可以看出来浅拷贝解决了直接赋值产生的问题，但是对于引用数据类型里有其他引用类型数据类型的时候，并不能完全的拷贝，相当于只能拷贝一层，而深拷贝就可以解决这个问题

## 三、深拷贝 ##

深拷贝就是可以给你一份一模一样的值，会在堆内存中开辟一个新的区域存放新的值，新的值和原值不存在共享内存的情况，不论你这个引用数据类型里嵌套了多少层，都可以拷贝给你，实现真正的拷贝。直接看例子：（我使用lodash库的\_.cloneDeep方法实现深拷贝）

let obj1 = {
      name: 'zhangsan',
      age: 18,
      friend: {
        name: 'xiaobai',
        animal: ['dog']  //数组也是引用类型
      }
    }
    let obj2 = _.cloneDeep(obj1) //进行深拷贝
    obj2.friend.animal[0] = 'cat' //修改了第三层的数据
    console.log('obj1:', obj1);
    console.log('obj2:', obj2);

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_12_color_FFFFFF_t_70_g_se_x_16][]

可以发现修改了obj2的值，obj1的中的值没有跟着变化，表示这两个对象是完全不同的了，这就是深拷贝的作用。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bfc6861843ae4d5497b3b73d2279b9f7.png
[57940d06253f4aab8301369e38c11178.png]: /images/20220828/753561a955374c4392de46c7530fb9e4.png
[41c0ab2ea1704a3690eab1e827cc414b.png]: /images/20220828/63e0b4fc48fb42e4b6f330b89c314aef.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e6c5c41527d24980bbd5ae4bee42ac8d.png