一、概念区分
1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
2.深拷贝： 创建一个新的对象和数组，将原对象各个层级的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
二、问题与思考
定义数组a，将a赋值给b,修改b数组里的元素，分别打印a,b两个数组，结果a,b两个数组的元素同时被修改。
let a=[0,1,2,3,4],
b=a;
a[0]=1;
console.log(a); // [1,1,2,3,4]
console.log(b); // [1,1,2,3,4]
因为上述的问题，引出了栈堆，js的基本数据类型与引用数据类型
1、栈(stack)和堆（heap）
stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小也不一定会自动释放
2、数据类型
JS分两种数据类型：
(1) 基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。
(2) 引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）
3、基本数据类型
基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问
4、引用数据类型
引用类型是存放在堆内存中的对象，每个空间大小不一样，要根据情况进行特定的配置，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址，这个指针指向堆内存。）实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象
上述问题中，将a赋值给b,实际上是将a的引用赋值给了b,此时a和b同时指向同一个堆内存，当修改b的值，自然也会影响到a的值。那么将a赋值给b,修改b的时候如何做到不影响a呢？？？那么就用深拷贝，将a的各项属性的“值”都拷贝给b。实现方法很多。
三、深拷贝的方法与评析
1.方法一：封装一个深拷贝的方法
/**
* @desc 深拷贝
* @param {Object} obj 需要拷贝的数据
*/
export const deepClone = obj => {
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(let key in obj){
if(obj.hasOwnProperty(key)){
//判断obj子元素是否为对象，如果是，递归复制；否则，简单复制
if(obj[key] && typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
测试：定义对象a，b调用自定义方法deepClone，深拷贝a,并修改b对象的值，测试是否会影响a。
let a=[
{name:'April',age:18},
[3,4,5],
1
]
let b=deepClone(a)
b[0].name='april'
b[1][0]=300
console.log("b==>",b,"a==>",a)
测试结果，修改b,并不会影响到a。（结果如下图）
2. 方法二：借用JSON对象的parse和stringify
let b = JSON.parse(JSON.stringify(a)) //深拷贝a , 并赋值给b
这种方法可以简单，便捷的实现深拷贝，但是它有局限性。当值为undefined、function、symbol 会在转换过程中被忽略。所以，对象值有这三种的话用这种方法会导致属性丢失。测试如下：
let sym=Symbol(sym);
let a=[
{name:'April',age:18,fun:function(){ console.log(100) },telephone:undefined,sym:sym},
[3,4,5],
1
]
let b = JSON.parse(JSON.stringify(a))
console.log("a==>",a,"b==>",b)
建议：当对象中包含值为undefined、function、symbol 的数据时，不要采用此方法进行深拷贝。
以下介绍的方法只能拷贝到数据的第一级，从严格意义上来说，它并不是深拷贝，因为我们说深拷贝是将原对象各个层级的各项属性的“值”拷贝过来。
建议：当数据类型足够简单只包含一级的时候可以采用以下方法。
3.方法三：for...in遍历对象，存入新对象
function deepCloneObj(obj){
if(Array.isArray(obj)){
let objClone=[];
for (let i in obj){
objClone.push(obj[i])
}
return objClone
}else{
let objClone={};
for (let i in obj){
objClone[i]=obj[i]
}
return objClone
}
}
let a=[1,2,3]
let b=deepCloneObj(a)
b[0]=100
console.log("a==>",a,"b==>",b)
let a1={name:'april',age:18}
let b1=deepCloneObj(a1)
b1.name='April'
console.log("a1==>",a1,"b1==>",b1)
测试结果如下：
4. 方法四：ES6扩展运算符(...)
扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
let a={name:'April',age:18}
let b={...a}
b.age=16
console.log(a,b)
let a1=[1,2,3,4,5]
let b1=[...a1]
a1[0]=100
console.log(a1,b1)
5. 方法五：利用数组/对象上的一些方法
这种实现深拷贝的方法，实际上是利用操作数组/对象的方法，操作原数据后，不改变原数据，返回一个新的数据的特性实现的。
(1) 数组
slice() 方法返回一个从已有的数组中截取一部分元素片段组成的新数组（不改变原来的数组！）
用法：array．slice(start,end) start表示是起始元素的下标，end表示的是终止元素的下标
当slice()不带任何参数的时候，默认返回一个长度和原数组相同的新数组
let a=[1,2,3]
let b=a.slice()
b[0]=100
console.log(a,b)
concat() 方法用于连接两个或多个数组。( 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。)
用法：array.concat(array1,array2,......,arrayN)
当concat()不带任何参数的时候，表示返回数组和一个空数组合并后返回，默认返回一个长度和原数组相同的新数组
let a=[1,2,3]
let b=a.concat()
b[0]=100
console.log(a,b)
(2) 对象
Object.assign()：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），并返回合并后的target
用法： Object.assign(target, source1, source2);
所以 b=Object.assign({},a) 这段代码将会把 a 中的一级属性都拷贝到 ｛｝中，然后将其返回赋给b
let a={name:'April',age:18}
let b=Object.assign({},a)
b.age=16
console.log(a,b)
实现的方法，没有最优，只有最适合，根据实际需求选择就好了。
