深拷贝和浅拷贝的理解和应用场景

首先，浅拷贝和深拷贝都是只针对于像Object，Array这样的复杂对象。

区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制

一：理解

1、浅拷贝：简单的说，浅拷贝就是增加了一个指针指向已存在的内存（JavaScript并没有指针的概念，这里只是用于辅助说明），浅拷贝只是拷贝了内存地址，子类的属性指向的是父类属性的内存地址，当子类的属性修改后，父类的属性也随之被修改。

const a = { name: 'Jerry', age: 20 }
const b = a
console.log(a, b)

b.name = 'Tom'
console.log(a, b)

a.name = 'Jack'
console.log(a, b)

// { name: 'Jerry', age: 20 } { name: 'Jerry', age: 20 }
// { name: 'Tom', age: 20 } { name: 'Tom', age: 20 }
// { name: 'Jack', age: 20 } { name: 'Jack', age: 20 }

从上图代码及结果可看出，不管a或者是b发生改变时，a和b的值都会同时改变，这是他们同用了一个内存地址，故而不管谁发生改变都会改变了同一个内存地址，这就是浅拷贝。

通俗易懂的理解就是：一件衣服两个人穿不管你穿还是我穿都还是那件衣服

2、深拷贝：深拷贝就是增加一个指针，并申请一个新的内存，并且让这个新增加的指针指向这个新的内存地址使用深拷贝，在释放内存的时候就不会像浅拷贝一样出现释放同一段内存的错误，当我们需要复制原对象但有不能修改原对象的时候，深拷贝就是一个，也是唯一的选择。

const a = { name: 'Jerry', age: 20 }
const b = JSON.parse(JSON.stringify(a))
console.log(a, b)

b.name = 'Tom'
console.log(a, b)

a.name = 'Jack'
console.log(a, b)

{ name: 'Jerry', age: 20 } { name: 'Jerry', age: 20 }
{ name: 'Jerry', age: 20 } { name: 'Tom', age: 20 }
{ name: 'Jack', age: 20 } { name: 'Tom', age: 20 }

从上图代码及结果可以看出，刚开始a和b都是Jerry，当b变成Tom时，a还是Jerry，当a变成Jack时，b还是Tom，故而可以看出a值的改变不影响b值，b值改变不影响a值。let b = JSON.parse(JSON.stringfy(a))，这句话其实是给b指定了一个新的内存虽然内存地址和a的是一样的，但是内存地址不一样，因此彼此的改变互不相干，这就是所谓的深拷贝。

通俗易懂的理解就是：b通过a分享的链接买了一件和a一样的衣服，但是a和b的衣服确是两件长得一样的衣服，不管a的衣服是脏了还是破了都不会影像b的衣服

二：应用场景

1：从服务器fetch到数据之后我将其存放在store中，通过props传递给界面，然后我需要对这堆数据进行修改，那涉及到的修改就一定有保存和取消，所以我们需要将这堆数据拷贝到其它地方。

2：当你想使用某个对象的值，在修改时不想修改原对象，那么可以用深拷贝弄一个新的内存对象。像es6的新增方法都是深拷贝，所以推荐使用es6语法。