js对象深拷贝浅拷贝

对象的深拷贝于浅拷贝

对于基本类型，浅拷贝过程就是对值的复制，这个过程会开辟出一个新的内存空间，将值复制到新的内存空间。而对于引用类型来书，浅拷贝过程就是对指针的复制，这个过程并没有开辟新的堆内存空间，只是将指向该内存的地址进行了复制。然而对引用类型的浅拷贝会出现一个问题，那就是修改其中一个对象的属性，则另一个对象的属性也会改变。产生了问题那必然有相对解决的方法， 就这样深拷贝就开始入场了，深拷贝会开辟新的栈，两个对象对应两个不同的地址，这样一来，改一个对象的属性，也不会改变另一个对象的属性。
下面我们用代码看一下深拷贝于浅拷贝是如何实现的 :

对象的浅拷贝

对象的浅拷贝实现方法很简单,说白了就是一个for in 循环的事情 :

let obj = { ???nNum : 1, ???sName : 'aaron'};function shallowCopy(args) { ???let result = {}; ???????for(let item in args) { ???????if(args.hasOwnProperty(item)) { ???????????result[item] = args[item]; ???????}; ???}; ???return result;};shallowCopy(obj);

或者,我们可以使用最常见的jQuery来实现这个功能 :

$.extend({} , obj);

亦或者,我们也可以采用ES6的方法用一行代码实现相同的功能 :

Object.assign({} , obj);

对于浅拷贝就说到这了,如果有补充或者发现问题的大牛可以回复我或者邮件通知,我会第一时间进行回复,好了废话说多了,我们接下来看一下深拷贝

对象的深拷贝

如果我们把上面的obj稍微修改一下那浅拷贝就有心无力了 :

let obj = { ???nNum : 1, ???oAar : [1,2,3,4]};

我们不妨可以再用上面的方法试一下

let newObj = shallowCopy(obj);newObj === obj ?????// falsenewObj.oAar === obj.oAar ??// true

从上面的结果显示我们可以看出,newObj.oAar与obj.oAar指针所指的是同一个位置,那我们如何改正这个问题呢?

其实也很容易,我们将obj.oAar再看待为一个新的对象,对其再进行一次浅拷贝不就可以了吗??不说了,上代码

function deepCopy(args) { ???let result = {}; ???????for(let item in args){ ????????if(typeof args[item] === 'object' && args[item] !== null){ ????????????result[item] = deepCopy(args[item]); ????????}else{ ????????????result[item] = args[item]; ????????}; ????}; ???return result;};result(obj);

我们来验证一下

let newObj = result(obj);newObj === obj ?????// falsenewObj.oAar === obj.oAar ??// false

结果也显示我们实现了,ok

但是有没有其他的方式呢,比如说更简洁一些的,也是有的:

我们可以使用jQuery的$.extend(true, {}, obj),同样也可以实现,是不是觉得眼熟。前面我们说浅拷贝的时候也说过这个方法,但是多了一个为true的参数,$.extend()方法,第一个参数默认为false,当设置它为true时则会开启深拷贝模式。

想想还有没有什么其他的方式=￣ω￣=?

其实还有一个捷径可走

还是上面举的那个obj,我们对它再进行一次尝试

 let obj = { ???nNum : 1, ???oAar : [1,2,3,4] }; ?function deepCopy(args) { ?????let result = {}; ???????????try { ?????????result = JSON.parse(JSON.stringify(args)); ?????} ???????????return result; ?} ?let newObj = deepCopy(obj); ?newObj === obj ?????// false newObj.oAar === obj.oAar ??// false

ヾ(?｀Д′?) 什么鬼,这样也行? 那还前面说那么多废话,直接上这个方法岂不是爽歪歪?

但是这里不得不说明一点,投机取巧往往能达到看似相同的结果,但是还是存在一些隐性的问题的

就如上面这种方式和递归的方法相比是有弊端的,比如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。

这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

最后再说一种方法,可以使用Object.create()方法达到深拷贝的效果

function deepCopy(args) { ???let result = {}; ???????for(let item in args){ ??????????if(typeof args[item] === 'object' && args[item] !== null){ ??????????????result[item] = args[item].constructor === Array ? [] : ??????????????Object.create(prop); ??????????}else{ ??????????????result[item] = args[item]; ??????????}; ????}; ???????return result;}let newObj = deepCopy(obj); newObj === obj ?????// falsenewObj.oAar === obj.oAar ??// false

好了,更多的第三方库的方法我们就不一一列举了,原理更重要嘛,对吧。

最后我们来总结一下:

浅拷贝我们说了3种方法 :

• 通过for...in循环来实现
• 通过Object.assign()方法来实现
• 通过jQuery中的$.extend()方法来实现

深拷贝我们同样说了四种方法 :

• 通过递归的手法实现
• 通过jQuery中的$.extend()添加true参数方法来实现
• 通过JSON序列化反序列化来实现
• 用过Object.create()方法来实现

除了这几种如果各位还想到了其他什么好的方法欢迎下方留言ヾ(￣▽￣)