JS的深拷贝与浅拷贝

深拷贝和浅拷贝主要是针对对象赋值的。

对象a赋值给对象b，实际上只是b接受了a对象的指针。当引用对象b时，先引用a的地址，再引用a的属性和方法。

这样，如果对a的属性值进行修改的时候，再引用b时，b的属性值也会发生变化。

为了避免这种混乱的局面，js提出浅拷贝和深拷贝的概念。

浅拷贝  Object.assgin() 或 {...}

浅拷贝对象时，会直接把原对象内的属性值都赋值到新对象中。例如：

let a = {
  age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

但是这种方法也有弊端，即不能深拷贝是对象的属性值，拷贝的是地址。

浅拷贝也可以通过展开运算符来实现。

let a = {
  age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1

深拷贝 ——如果对象属性值是对象的话，就要用到深拷贝了。

例如：

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = { ...a }
a.jobs.first = 'native'
console.log(b.jobs.first) // native

这里虽然对对象a用了浅拷贝，但是对象的属性jobs也是对象，拷贝的时候这个属性并没有按属性值赋给对象b。这种情况需要用到深拷贝。

JSON.parse(JSON.stringify(object))

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

但是这种方法也有缺点，对于undefined的属性，symbol，序列化函数，循环引用等 不能深拷贝。具体请听下回分解。