【Vue】JS什么是深拷贝,与浅拷贝

绝地灬酷狼 2022-12-08 04:24 145阅读 0赞

[https://www.cnblogs.com/echolun/p/7889848.html][https_www.cnblogs.com_echolun_p_7889848.html] 参考

区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

此篇文章中也会简单阐述到**栈堆**，**基本数据类型**与**引用数据类型**，因为这些概念能更好的让你理解深拷贝与浅拷贝。

我们来举个浅拷贝例子：

![20200917163200787.png][]

`JSON.parse(JSON.stringify(obj))`我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输（例如 如果请求的`Content-Type`是 `application/x-www-form-urlencoded`，则前端这边需要使用`qs.stringify(data)`来序列化参数再传给后端，否则后端接受不到； ps: `Content-Type` 为 `application/json;charset=UTF-8`或者 `multipart/form-data` 则可以不需要 ）；我们在使用 `JSON.parse(JSON.stringify(xxx))`时应该注意一下几点：  
1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

var test = {
            name: 'a',
            date: [new Date(1536627600000), new Date(1540047600000)],
          };
    
          let b;
          b = JSON.parse(JSON.stringify(test))

![format_png][]

那么这里，就得引入基本数据类型与引用数据类型的概念了。

面试常问，基本数据类型有哪些，number,string,boolean,null,undefined五类,当然symbol也算一个。

引用数据类型(Object类)有常规名值对的无序对象\{a:1\}，数组\[1,2,3\]，以及函数等。

**而这两类数据存储分别是这样的：**

**a.基本类型--名值存储在栈内存中**，例如let a=1;

![a4a3aab2236bb8818c6b538bb8e6b9ac.png][]

当你b=a复制时，栈内存会新开辟一个内存，例如这样：

![d1f0ba5bad07c7bf96c440c6269c4f89.png][]

所以当你此时修改a=2，对b并不会造成影响，因为此时的b已自食其力，翅膀硬了，不受a的影响了。当然，let a=1,b=a;虽然b不受a影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。

**b.引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值**，我们以上面浅拷贝的例子画个图：

![format_png 1][]

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。

![format_png 2][]

而当我们**a\[0\]=1**时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

![format_png 3][]

那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了

![format_png 4][]

**1.我们怎么去实现深拷贝呢，这里可以递归递归去复制所有层级属性。**

这么我们封装一个深拷贝的函数

可以看到

![format_png 5][]

[https_www.cnblogs.com_echolun_p_7889848.html]: https://www.cnblogs.com/echolun/p/7889848.html
[20200917163200787.png]: /images/20221123/9c90a22f9f654b56a49ff846c2c0d5a2.png
[format_png]: /images/20221123/015acd9785ae448d9abc0918b3d7f90f.png
[a4a3aab2236bb8818c6b538bb8e6b9ac.png]: /images/20221123/a6c5dc12e16243479c77a2c0d15a1071.png
[d1f0ba5bad07c7bf96c440c6269c4f89.png]: /images/20221123/9ba32363917043308aed4d6747c4af95.png
[format_png 1]: /images/20221123/d3804d33a84f4351bbbe330a14ca4d8a.png
[format_png 2]: /images/20221123/976034aff33c481aa95689af8dcb88dc.png
[format_png 3]: /images/20221123/de04bdd9d7a149d7bdd942337e2b5ff8.png
[format_png 4]: /images/20221123/eb22726471f14da9bc696860cf9e4b08.png
[format_png 5]: /images/20221123/e8593945174b45a1b8c8ede877c64f5a.png