前言
关于深拷贝和浅拷贝其实是两个比较基础的概念,但是我还是想整理一下,因为里面有很多小细节还是很有意思的。
深拷贝和浅拷贝的区别
深拷贝和浅拷贝是大家经常听到的两个名词,两者到底有什么不同呢?
先看看什么是浅拷贝。
var obj1 = {a: 1, b: 2};
var obj2 = obj1;
obj2.a = 3;
console.log(obj1); // {a: 3, b: 2}
console.log(obj2); // {a: 3, b: 2}
这是一个最简单的浅拷贝的例子,我把 obj1 赋值给 obj2,改变了 obj2 中的一个属性值,obj1 中的相应属性值也跟着变化了,这是为什么呢?
因为浅拷贝其实只是引用的拷贝,两者还是指向内存中的同一个地址。简而言之,就是 obj1 和 obj2 其实指向的是同一个对象。打个比方,就像一个房间把门牌号 1 换成了门牌号 2,但是这个房间还是这个房间。
那深拷贝就是两者指向不同的内存地址,是真正意义上的拷贝。拿上面的房间举例子,就是你真的重新开了一间房,并不是只是换门牌号。
谈谈 Object.assign()
Object.assign() 是我们经常用到的方法,其实这个方法就是浅拷贝。但是它又有一点特殊的地方,就是可以处理第一层的深拷贝。
var obj1 = {a: 1, b: { c: 2} };
var obj2 = Object.assign({}, obj1);
obj2.a = 3;
obj2.b.c = 3;
console.log(obj1); // {a: 1, b: { c: 3} }
console.log(obj2); // {a: 3, b: { c: 3} }
看上面的例子,属性 a 的值并没有跟着变,但是属性 b 中的 c 的值跟着变了。
常用的实现深拷贝的方式
JSON
这是最常用的实现深拷贝的方式,直接看例子:
var obj1 = {a: { b: 1} };
var obj2 = JSON.parse(JSON.stringify(obj1));
这种方法很简单而且好用,但是有一点点瑕疵,它会抛弃对象的 constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成 Object。
而且这种方法能正确处理的对象只有 Number, String, Boolean, Array,即那些能够被 JSON 直接表示的数据结构。RegExp 对象或者 function 是无法通过这种方式深拷贝。
lodash
这是我个人目前使用的方法,只需要一行 var obj2 = _.cloneDeep(obj1) 就能实现。而且 lodash 是一个功能很强大的库,提供的方法可靠又简单,真的是懒人必备,点击这里去了解它吧!