浅谈JS对象的深拷贝和浅拷贝

什么是深拷贝和浅拷贝？

假设我们有a、b 两个变量：

let a = 10;
let b;

// 将a赋值给b
b = a;

console.log(b);  // 10

b = 15;

console.log(a); // 10
console.log(b); // 15

上面代码，将a 赋值给了b，输出b，结果自然是10。然后我们有给b赋值15，那么b就为15了，而a肯定还是10。上面代码的表现形式跟我们平常的认知是符合的。但是如果a和b类型变成是对象的属性。那结果就不一样了。

let a = {
  val : 10
};
let b = {};

// 将a赋值给b
b = a;

console.log(b.val);  // 10

b.val = 15;
console.log(a.val);  // 15
console.log(b.val);  // 15

但a和b变成对象是，前面代码还是正常的。但是当对b的val属性的值进行改动时，出乎意料的a的val属性的值也跟着被改动。这是因为，js的对对象的拷贝有两种方式，一种是只拷贝对象的访问地址（对象浅拷贝）。也就是说，将a浅拷贝给b，那a和b都会指向同一个数据存储块。如果任何一方对该数据块进行了数据改动，那双的数据都会跟着改动（因为双方的数据都是同一个数据）。

而深拷贝就不会有这种现象出现。因为深拷贝是拷贝的是数据块的数据。a和b是完全独立的。

怎么实现深拷贝和浅拷贝呢？

浅拷贝

实现浅拷贝的方法比较简单，正常的赋值就行了。例如上面的例子。

深拷贝

常用的有二种

第一种：

Object.assign(b,a)

第二种：

b = JSON.parse(JSON.stringify(a));

还有一种就是通过遍历两者来实现。