本文主要阅读对象：对深浅拷贝印象模糊对初级前端，想对js深浅拷贝聊一聊的中级前端。如果是对这些有完整对认知体系和解决方法的大佬，可以选择略过。
复制代码

正文： 讨论深浅拷贝，首先要从js的基本数据类型说起： 根据 JavaScript 中的变量类型传递方式，分为值类型和引用类型， 值类型变量包括 Boolean、String、Number、Undefined、Null。
引用类型包括了 Object 类的所有， 如 Date、Array、Function 等。在参数传递方式上，值类型是按值传递，引用类型是按地址传递。

我们来看一下这两则有什么区别：

//eg1:
// 值类型
var a = 10
var b = a
b = 20
console.log(a)  // 10
console.log(b)  // 20//解析：上述代码中，a b都是值类型，两者分别修改赋值，相互之间没有任何影响。再看引用类型的例子：//eg2
// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a)  // {x: 100, y: 200}
console.log(b)  // {x: 100, y: 200}
复制代码

解析： 上述代码中，a b都是引用类型。在执行了b = a之后，修改b的属性值，a的也跟着变化。因为a和b都是引用类型，指向了同一个内存地址，即两者引用的是同一个值，因此b修改属性时，a的值随之改动。

**那到底什么是深浅拷贝呢？**
<br />解析：深浅拷贝是拷贝对象的`深度`来说的：
<br />当你想拷贝的对象只有一级时，就是浅拷贝。
<br />当你拷贝的对象有多级的时候，就是深拷贝。
复制代码

再回到上面的那个例子： 在例子能看出来，如果直接采用“=”赋值，这种类型，当我们改变b的值时候，a也会随之改变的，假如不允许改变a呢？ 这时，深拷贝就出场了。

 function clone(val){if(!val && typeof val !== 'object'){return}const newArr = toString.call(val) === ['object Array'] ? [] : {}for (let item in val) {if(typeof val[item] ===  'object') {newArr[item] = clone(item)}else {newArr[item] = val[item]}}return newArr}//测试：var a = {x: 10, y: 20}var b = clone(a)b.x = 100b.y = 200console.log(a)  // {x: 10, y: 20}console.log(b)  //{x: 100, y: 200}复制代码

解析： 对于这个深拷贝，大家看到这里应该都可以看明白：主要思路就是浅拷贝 + 递归。
这有几个点需要注意：
1. 判断接收到的参数类型。
2. 使用toString.call()判断更加严谨。
3. 考虑对其他引用类型的数据兼容（这里并没有对每种类型的数据组做判断，引用类型包括了 Object 类的所有，如 Date、Array、Function 等。）

需要注意的是：用递归的话，会有一下几个需要特别注意的点：1. 当数据层次很深时，容易爆栈（栈溢出） 解决办法=>a. 消除尾递归b. 改用循环2. “循环引用”，会导致死循环  解决办法 =>a. 循环检测b. 暴力破解第一种：数据广度特别大，层次特别深
第二种：类似下面的这种情况var a = {}a.a = aclone(a) //死循环ES6中一行代码实现深拷贝：JSON.parse(JSON.stringify(source))
注释：JSON.stringify()其实利用了“循环检测”机制
复制代码

这里给大家推荐一篇循环解决递归的方法： 可以保持拷贝数据以后的引用关系

function cloneForce(x) {const uniqueList = []; // 用来去重let root = {};// 循环数组const loopList = [{parent: root,key: undefined,data: x,}];while(loopList.length) {// 深度优先const node = loopList.pop();const parent = node.parent;const key = node.key;const data = node.data;// 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素let res = parent;if (typeof key !== 'undefined') {res = parent[key] = {};}// 数据已经存在let uniqueData = find(uniqueList, data);if (uniqueData) {parent[key] = uniqueData.target;continue; // 中断本次循环}// 数据不存在// 保存源数据，在拷贝数据中对应的引用uniqueList.push({source: data,target: res,});for(let k in data) {if (data.hasOwnProperty(k)) {if (typeof data[k] === 'object') {// 下一次循环loopList.push({parent: res,key: k,data: data[k],});} else {res[k] = data[k];}}}}return root;
}function find(arr, item) {for(let i = 0; i < arr.length; i++) {if (arr[i].source === item) {return arr[i];}}return null;
}//eg1：
var a = {a1: b,a2: b,
}var b = {};a.a1 === a.a2 // truevar c = cloneForce(a);
c.a1 === c.a2 // true   引用保持一致//eg2:
var a = {};
a.a = a;console.log(cloneForce(a))//还可以破解循环引用
复制代码

主要思路是： 声明一个数组对象（父对象，key，value），其有值时，取其最后一个对象； 判断key有值，代表当前级下有子级，则拷贝到子元素。如果数据已经存在，则中断本次循环。数据不存在则对其拷贝。
有一点需要注意：cloneForce在对象数量很多时会出现很大的问题，如果数据量很大不适合使用cloneForce。

有兴趣的同学，可以前往 深拷贝的终极探索（90%的人都不知道），查看更多的细节。

总结：
如果觉得对你有帮助，请给作者一点小小的鼓励， 点个赞或者收藏吧。 有需要沟通的请联系我： 微信（ wx9456d ） 或 邮箱（ allan_liu986@163.com ）