深浅拷贝知多少？

导语日常工作开发中，赋值、拷贝是每天都在做的事情，可是有一些拷贝的改变会同时改变原有元素的内容，本次分享主要从拷贝前和拷贝后的数据对比来进行交流探讨～

背景

如上，一个简单的赋值和修改，引起了原有元素内容的改变。这种情况是否也会在你的项目中出现？如果没出现的，我来分享下，避免后续再有此情况发生。下面就针对在什么情况下赋值会改变原有对象的值进行进一步说明。首先带你了解下数据类型和基础概念。

JS数据类型分为：基本数据类型和对象数据类型。

基本数据类型：直接存储在栈(stack)中的数据。（如String，Number，Boolean，BigInt，undefined，Symbol等）

对象数据类型：存储的是该对象在堆中引用，真实的数据存放在堆内存里。（主要是包括数组对象和object对象）如下图所示：

概念：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

概念：会另外创造一个一模一样的对象，新对象跟原对象不共享内存

赋值赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

以上了解了数据类型的存储和拷贝的基础概念，来具体看一下哪一些情况，赋值、拷贝是可以完全独立存在的，哪一些情况是会改变到原有对象的内容的。请看：按照浅拷贝的基础概念，写了一个shallowCopy的方法，并且拷贝后同样改变原数据中的元素，如下：

所得到的结果是：

总结：name是基础数据类型，status所在的是对象数据类型，浅拷贝的概念是只按位拷贝一层，所以基础数据类型是直接得到的真实数据，而对象数据类型得到的是其真实数据的地址引用，所以myinfo和bindinfo中的param所指向的存储空间是同一个。

Object.assign()
Array.prototype.concat()
Array.prototype.slice()

举例：

按照深拷贝的基础概念，同样写了一个deepCopy的方法，并且拷贝后同样改变原数据中的元素，如下：

所得到的结果是：

总结：name是基础数据类型，自然不用说，status是对象数据类型，由于深拷贝是层层递进拷贝，并不只是一层，所以拷贝后的新对象和原对象是完全独立的，无论哪个改变，也不会改变另外一个对象的内容。所以深拷贝之后，改变新对象的status并未改变原有对象的值。

JSON.parse(JSON.stringify())  
Lodash库中的_.cloneDeep
$.extend

举例

js总是会有一些特殊情况，所以开发时要更加谨慎，深拷贝也并不是能拷贝所有的类型，例如下面的symbol，因为它是特殊的！

总结：通过上面的例子可以看到，symbol是一种特殊的数据类型，它的深拷贝也是浅拷贝，所以要格外小心～

同原数据比	是否同一对象	基本数据类型	对象数据类型
赋值	是	会	会
浅拷贝	否	不会	会
深拷贝	否	不会	不会

赋值：两个指向同一个对象，无论哪个改变，另外一个都会跟着改变。

浅拷贝：虽然不是同一对象，但是如果原数据都是基础数据类型，浅拷贝就是深拷贝，各自独立，否则如果有对象数据类型，就会出现联动现象。

深拷贝：不是同一对象，原数据和新数据是相互独立，互不影响的，但要注意symbol类型

原作者: 任春艳

未经同意，禁止转载！

更多精彩内容，尽请关注腾讯VTeam技术团队微信公众号和视频号