深浅拷贝知多少？

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

背景

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

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

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

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

概念：只复制指向某个对象的指针，而不复制对象自己，新旧对象仍是共享同一块内存prototype

概念：会另外创造一个如出一辙的对象，新对象跟原对象不共享内存指针

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

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

所获得的结果是：视频

总结：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技术团队微信公众号和视频号