彻底理解浅拷贝和深拷贝的区别及用法

总结：字面意思，浅拷贝：拷贝浅层次（只拷贝引用类型，与原对象有操作类型上的冲突）。深拷贝：（完全拷贝全部属性内容，与原对象脱离开。）
浅拷贝：创建一个新对象来存储原对象。这其中有2个注意点：
（1）如果对象的属性是基本类型，拷贝的值是基本类型；如果拷贝的对象是引用类型那么，拷贝的值就是内存地址。
（2）在操作拷贝后的新对象时，操作基本类型原对象属性值不会变化；操作引用类型时，原对象属性值和新对象属性值，都会发生变化。
![在这里插入图片描述](https://img-blog.csdnimg.cn/13e96a1a596a4200929336fda0776863.png

深拷贝：新对象属性值完全拷贝原对象属性值，开辟的是一个新区域。新对象属性的任何操作都不会影响原对象属性。![在这里插入图片描述](https://img-blog.csdnimg.cn/ad3d505e2b2748adb79029cd40b9ec04.png

区别：浅拷贝基本类型之前互不影响，引用类型其中一个对象改变了地址，就会影响另一个对象；深拷贝改变新对象不会影响原对象，他们之前互不影响。

用法demo：
浅拷贝：（1）Object.assign （2）{…}
深拷贝：（1）JSON.parse(JSON.stringify()) 常用 （2）jQuery.extend()

在这里插入代码片
```// 浅拷贝 Object.assign（）
let Obj1 = {name: '张三', age: 5, action:{ sex:'man'}}
let Obj2 = Object.assign({},Obj1)
Obj2.name = "李四"
Obj2.age = 10
Obj2.action.sex = 'woman'

console.log('Obj1',Obj1);
// Obj1 { name: '张三', age: 5, action: { sex: 'woman' } }
console.log('Obj2',Obj2);
// Obj2 { name: '李四', age: 10, action: { sex: 'woman' } }


// 浅拷贝 {...} ES新特性
let Obj1 = {name: '张三', age: 5, action:{ sex:'man'}}
let Obj2 = {...Obj1}
Obj2.name = "李四"
Obj2.age = 10
Obj2.action.sex = 'woman'

console.log('Obj1',Obj1);
// Obj1 { name: '张三', age: 5, action: { sex: 'woman' } }
console.log('Obj2',Obj2);
// Obj2 { name: '李四', age: 10, action: { sex: 'woman' } }


// 深拷贝 JSON.parse(JSON.stringify())   常用
let Obj1 = {name: '张三', age: 5, action:{ sex:'man'}}
let Obj2 = JSON.parse(JSON.stringify(Obj1))
Obj2.name = "李四"
Obj2.age = 10
Obj2.action.sex = 'woman'

console.log('Obj1',Obj1);
// Obj1 { name: '张三', age: 5, action: { sex: 'man' } }
console.log('Obj2',Obj2);
// Obj2 { name: '李四', age: 10, action: { sex: 'woman' } }


// 深拷贝 jQuery.extend() 
//$.extend(deepCopy, target, object1, [objectN]) //第一个参数为true,就是深拷贝
//需要引用jQuery包才能使用
let Obj1 = {name: '张三', age: 5, action:{ sex:'man'}}
let Obj2 = $.extend(true, {}, Obj1);
Obj2.name = "李四"
Obj2.age = 10
Obj2.action.sex = 'woman'

console.log('Obj1',Obj1);
// Obj1 { name: '张三', age: 5, action: { sex: 'man' } }
console.log('Obj2',Obj2);
// Obj2 { name: '李四', age: 10, action: { sex: 'woman' } }