JS_浅拷贝_深拷贝

浅拷贝

为了避免引用数据类型中，修改一个数据时另一个数据发生变化，我们用到了拷贝
思考1（基础数据类型）

基础数据类型存储在栈内存中
思考2（引用数据类型）

引用数据类型的数据存储在堆中，保存和赋值时，都是指向内存空间的地址

拷贝：创造一个新对象/数组，把原来的值都复制过来

浅拷贝：把数组/对象第一层的值，复制到新的数组/对象中。第一层数据的值互不影响。

• 浅拷贝的方法：
  

1. for循环
2. 拓展运算符
3. Object.create()
4. Object.assign() （把 从第二个参数开始的所有参数 复制到 第一个参数 上)

浅拷贝的例子

深拷贝

浅拷贝只拷贝第一层，第二层数据还是会互相引用，互相影响

深拷贝：把数组/对象所有层的值，复制到新的数组/对象中。当更改源或副本时，可以确保不会导致其他对象也发生更改

深拷贝的实现原理

1. 创建新数组/对象
2. 遇到基础数据类型，直接赋值
3. 遇到对象/数组，创建一个新的，递归调用函数，继续判断
   （递归每层数据，遇到对象/数组，创建一个新的，把原来的值复制过来）
   

• 深拷贝的方法

1. JSON.parse(JSON.stringify())
2. Lodash.cloneDeep()
   文档地址 https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue

var obj = {
    a: 1,
    b: {
        b1: 1
    }
}
var obj1 = _.cloneDeep(obj)
obj1.a = 2
obj1.b.b1 = 2

• 深拷贝中的循环引用问题
  如下方代码，oneObj里引用了twoObj，twoObj里也引用了oneObj
  当判断到（value instanceof Object）进入无限循环
  
  解决办法：
  使用ES6中的Map集合解构，map对象的属性名（key）可以是任意类型（包括对象类型）
  在递归的时候，判断map集合中是否出现过这个值的对象
  没有出现过，递归进入
  出现过了，就留下一个空数组/空对象
  
  b站 黑马前端李师傅 的视频
  老师讲的很好