关于JavaScript的浅拷贝和深拷贝
在 JS 中有一些基本类型像是Number
、String
、Boolean
var a = 10;
var b = a;
b = 20
console.log(a) // 10
console.log(b) // 20
像这种基本类型的拷贝,就各自独立修改其中一个不会影响另一个。
而对象就是像这样的东西 [1,2,3]或者{name:1,age:2},对象跟基本类型最大的不同就在于他们的传值方式。
对象的传值方式是引用传值
浅拷贝例子
var a = [1,2,3]
var b = [];
b = a; // 浅拷贝a
console.log(a === b); // true
console.log(b) // [1, 2, 3]
b[0] = 5; // 改变拷贝过来的数组任意一个值
console.log(a) // [5, 2, 3] ==> 原数组被改变了
结果输出:
上面的例子拷贝的其实是引用的内存地址,如果更改了其中任意一个对象的值,另外一个拷贝的对象也会被改变,这就是浅拷贝。
而在很多情况下我们这么做会存在很多问题,比如一个项目多个人开发,多个人都有用到这个对象,如果我们浅拷贝的话,改变了引用内存地址的值,其他开发人员就会出错,所以我们需要做深拷贝,拷贝出来的东西自己独立出来,不跟原对象冲突
使用:JSON的parse和stringify进行深拷贝
深拷贝例子:
var a = [1,2,3,[4,5,6]];
var b = JSON.parse(JSON.stringify(a));
console.log(a === b) // false
b[3][0] = 22;
console.log(a)
console.log(b)
结果输出:
这里使用JSON的parse和stringify方法拷贝出来的,就都是独立了,互不干扰。