关于JavaScript的浅拷贝和深拷贝
前言
要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型。JavaScript有两种数据类型，基础数据类型和引用数据类型。
js的基本类型：undefined，null，string，boolean，number,symbol(es6新增)，保存在栈内存中
js的引用类型：Object类型， Array类型，Date类型，RegExp类型，Function类型，基本包装对象（Boolean类型，Number类型，String类型），单体内置对象（Global对象，Math对象），保存在堆内存空间中
1.基本类型值和引用类型值的复制
1.1基本类型值
基本类型值是指在栈内存保存的简单数据段，在复制基本类型值的时候，会开辟出一个新的内存空间，将值复制到新的内存空间。
var a = 1; var b = a; a = 2; console.log(a);//输出2； console.log(b);//输出1；
var a = 1;
var b = a;
a = 2;
从上面例子看出，当一个变量的值是基本类型，把它复制给另一个变量，复制完成后改变它的值，不会影响已经复制了它的值的变量。
1.2引用类型值
引用类型值是保存在堆内存中的对象，变量保存的只是指向该内存的地址，在复制引用类型值的时候，其实只复制了指向该内存的地址。
var a = {
name: 'Kitty',
age: '20',
sex: 'man'
};
var b = a;
a.name = 'Jack';
console.log(a);//输出{name: 'Jack',age: 20,sex: 'man'}
console.log(b);//输出{name: 'Jack',age: 20,sex: 'man'}var a = {name: ‘Kitty’,age: ‘20’,sex: ‘man’};
var b = a;
a.name = ‘Jack’;
从上面例子看出，当一个变量的值是引用类型值，把它复制给另外一个变量，复制的只是指向储存对象内存的地址，所以复制完成后，改变它的值，会影响复制了它的值的变量。
注意：如果有两个变量的值是引用类型值，就算它们的值完全相同，它们也是不相等的，因为它们指向的内存地址不同，例子：
2. 对象的浅拷贝与深拷贝
当一个变量是对象，如果像上面那样直接将一个变量赋值给另一个变量，如果改变某个变量的值，另外一个变量也会跟着改变，如果我们不想发生这种情况，就需要写一个函数用来拷贝对象。
深拷贝和浅拷贝的示意图大致如下：
2.1 对象浅拷贝
var a = {name:'wanger'}
var b = Object.assign({}, a)
a===b // false
b.name = 'zhangsan'
a.name //'wanger'上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆，这时候a与b指向的是不同的栈对象，所以对b.name重新复制也不会影响到a.name。但是如果a.name是一个对象的引用，而不是一个字符串，那么上面的代码也会遇到一些问题，参考如下代码：
var a = {name:{firstName:'wang',lastName:'er'}}
var b = Object.assign({}, a)
a===b // false
b.name.firstName = 'zhang'
a.name.firstName //'zhang'b.name.firstName又影响到了a.name.firstName，这是因为Object.assign()方法只是浅层拷贝，a.name是一个栈对象的引用，赋值给b时，b.name也同样是这个栈对象的引用，很多时候，我们不想让这种事情发生，所以我们就需要用到对象的深拷贝。
2.2 对象深拷贝
2.2.1 万能的for循环实现对象的深拷贝
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}2.2.2 JSON.parse(JSON.stringify(objectToClone))
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))2.2.3 扩展运算符实现对象的深拷贝
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)运行结果如下：
3. 数组的浅拷贝与深拷贝
3.1 数组浅拷贝
var arr = ['old', 1, true, null, undefined]; var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果; new_arr[0] = 'new'; console.log(arr); // ["old", 1, true, null, undefined] console.log(new_arr); // ["new", 1, true, null, undefined]
数组的浅拷贝，可用concat、slice返回一个新数组的特性来实现拷贝，但是如果数组嵌套了对象或者数组的话用concat、slice拷贝只要有修改会引起新旧数组都一起改变了，比如：
var arr = [{old: 'old'}, ['old']];
var new_arr = arr.concat();
arr[0].old = 'new';
new_arr[1][0] = 'new';
console.log(arr); // [{old: 'new'}, ['new']]
console.log(new_arr); // [{old: 'new'}, ['new']]如果数组元素是基本类型，就会拷贝一份，互不影响，而如果是对象或者数组，就会只拷贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化。这种叫浅拷贝 。
深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。
3.2 数组深拷贝
3.2.1 利用扩展运算符...对数组中嵌套对象进行深拷贝
var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=[];
arr.forEach(item=>{
var {...obj}=item;
arr2.push(obj);
})
arr2[1].d=7
console.log(arr,arr2)
3.2.2 利用lodash库的cloneDeep方法
var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=_.cloneDeep(arr)
arr2[1].d=7;
console.log(arr,arr2)
3.2.3 JSON.parse(JSON.stringify(objectToClone))
var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=JSON.parse(JSON.stringify(arr));
arr2[1].d=7;
console.log(arr,arr2)