什么是深拷贝和浅拷贝?
假设我们有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));
还有一种就是通过遍历两者来实现。