JS深拷贝与浅拷贝

前言

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化
①如果B也跟着变了，说明这是浅拷贝，功力不够
②如果B没变，那就是深拷贝，自食其力，修成正果

接下来会分别阐述栈堆，基本数据类型与引用数据类型，这些概念能帮助理解深拷贝与浅拷贝。
浅拷贝案例


有人可能会问：明明b复制了a，为啥修改数组a，数组b也跟着变了。这里就得引入基本数据类型与引用数据类型的概念了。
**数据类型
**
基本数据类型：
number，string，boolean，null，undefined

引用数据类型：
array，object，函数
数据存储
基本类型–名值存储在栈
内存中，例如let a=1;
当b=a复制时，栈内存会新开辟一个内存，例如这样：

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

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

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

引用数据类型–概念图
当a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

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

深拷贝
（1）slice()不带任何参数，默认返回一个长度和原数组相同的新数组


（2）concat()不带任何参数，把返回数组和一个空数组合并后返回，即返回一个长度和原数组相同的新数组


（3）直接遍历，添加到空数组


（4）ES2015，ES6三点扩展运算符


复制数组：

以上几种方法都实现了一级拷贝，为什么叫一级拷贝？
将上述案例，简单修改下，数据结构嵌套，做两层嵌套


验证后发现之前的几种方法只能拷贝一级数据，那如何拷贝所有层级呢？

接下来介绍两种常用的方案
①jquery的extend
②JSON的序列化和反序列化
（1）JQ的extend方法
语法：$.extend( [deep ], target, object )
①deep表示是否深拷贝，为true为深拷贝，为false为浅拷贝
②target目标对象，其他对象的成员属性将被附加到该对象
③object拷贝源对象

单词：extend延伸
（2）JSON的序列化和反序列化
语法：JSON.parse(JSON.stringify(XXXX))

实现原理：先将对象转为一个基本数据类型，再执行拷贝
深拷贝和浅拷贝的区别
（1）浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

（2）深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
深拷贝相关
（1）为什么要使用深拷贝？
希望在改变新的数组（对象）的时候，不改变原数组（对象）

（2）怎么检验深拷贝成功？
改变任意一个新对象/数组中的属性/元素, 都不改变原对象/数组