JavaScript对象的深浅拷贝

在项目中我们会经常遇到这样的问题,当我把一个对象赋值给另一个新的对象的时候,当我改变其中一个,另一个数据也跟着改变,但是我的需求是只想让新的对象改变,之前的对象不改变,那么问题来了,我该怎么实现呢?


JavaScript对象的深浅拷贝_第1张图片


上边的问题,我想大家会经常遇见,这就是深浅拷贝的问题了,那么我们现在来探讨一下什么叫深浅拷贝,如何实现深浅拷贝

,对象的深拷贝会拷贝对象中层层嵌套的对象的属性。

浅复制:

浅拷贝是指只拷贝一层对象的属性,不会拷贝对象中的对象的属性。下面是一个简单的浅拷贝实现。


JavaScript对象的深浅拷贝_第2张图片

这种方法不能实现数组的浅拷贝,而且丢失了对象的constructor属性,这样的话我们就针对的讲construtor也复制过来


JavaScript对象的深浅拷贝_第3张图片

那么我们现在来尝试一下


JavaScript对象的深浅拷贝_第4张图片

结果如下:


JavaScript对象的深浅拷贝_第5张图片

可以正确实现数组复制和并且保留constructor了,但细心的你一定发现了,浅复制后的对象的 arr2Copy[3] 和 arr2[3] 指向的是一个对象,改变其中一个,同时也会改变另一个。我们想要实现的是复制,但这并不是复制呀!

这是浅复制的一个弊端所在,接下让我们看看深复制是怎样解决这个问题的。

深复制:

深复制需要层层递归,复制对象的所有属性,包括对象属性的属性的属性

如果只是需要简单地复制对象的属性,而不用考虑它的constructor,也不用考虑函数,正则,Data等特殊数据类型,那这里有一个深复制的小trick,两行代码即可:


JavaScript对象的深浅拷贝_第6张图片

大多数情况下,上面的就可以满足要求了,但一些时候,我们需要把函数,正则等特殊数据类型也考虑在内,或者当前环境不支持JSON时,上面的方法也就不适用了。这时,我们可以通过递归来实现对象的深层复制,如下:


JavaScript对象的深浅拷贝_第7张图片

这样就可以完美实现大多数对象的拷贝
面向对象的编程语言,其核心是对象,因此深入了解对象的相关操作,纵向比较异同,对学习过程是极有好处的。

你可能感兴趣的:(JavaScript对象的深浅拷贝)