关于深拷贝和浅拷贝实际上是两个比较基础的概念,可是我仍是想整理一下,由于里面有不少小细节仍是颇有意思的。javascript
深拷贝和浅拷贝是你们常常听到的两个名词,二者到底有什么不一样呢?java
先看看什么是浅拷贝。数据结构
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,可是这个房间仍是这个房间。code
那深拷贝就是二者指向不一样的内存地址,是真正意义上的拷贝。拿上面的房间举例子,就是你真的从新开了一间房,并非只是换门牌号。对象
Object.assign()是咱们常常用到的方法,其实这个方法就是浅拷贝。可是它又有一点特殊的地方,就是能够处理第一层的深拷贝。ip
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的值跟着变了。内存
这是最经常使用的实现深拷贝的方式,直接看例子:get
var obj1 = { a: { b: 1 } }; var obj2 = JSON.parse(JSON.stringify(obj1));
这种方法很简单并且好用,可是有一点点瑕疵,它会抛弃对象的constructor。也就是深拷贝以后,无论这个对象原来的构造函数是什么,在深拷贝以后都会变成Object。string
并且这种方法能正确处理的对象只有 Number, String, Boolean, Array,即那些可以被JSON直接表示的数据结构。RegExp对象或者function是没法经过这种方式深拷贝。
这是我我的目前使用的方法,只须要一行var obj2 = _.cloneDeep(obj1)
就能实现。并且lodash是一个功能很强大的库,提供的方法可靠又简单,真的是懒人必备,点击这里去了解它吧!