JS中实现深度拷贝，复制一个对象

JavaScript09

JS中实现深度拷贝，复制一个对象,第1张

在JS中拷贝、复制一个对象的方式有多种，我常用的一般是 Object.assign({},sourceObj)。

Object.assign()因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。如果合并的对象是多层嵌套对象那就属于浅拷贝了，修改内层对象的值还是会影响原对象。

要想实现深度复制可以使用JSON方式。

写法如下：

它的原理是把JS对象转换为JSON字符串，再由JSON字符串转换为JS对象，这样新对象的指针就不会指向原对象的指针了。但这种也有副作用的，有一下几点副作用：

1、有属性包含时间对象，拷贝后就是字符串的形式。

2、有函数或undefined，拷贝后会丢失。

3、有RegExp和Error对象，拷贝后变为空对象。

4、存在循环引用的情况，没法正确拷贝。

5、内层对象是构造函数生成的，会丢失constructor。

6、属性值为NaN、Infinity，拷贝后变为null。

虽然有些副作用，但大多情况还是符合要求可以使用。

对象类型在赋值的过程中实际上是复制了地址，从而导致了其中一方被改变其他也都被改变的情况，在开发中我们通常不希望出现这样的问题，这里可以使用浅拷贝来解决这个情况。

首先我们可以通过Object.assign来实现浅拷贝，该函数只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，即为浅拷贝而不是深拷贝。

以下为Object.assign浅拷贝的简单实现：

还可以通过展开运算符...来实现浅拷贝：

但是，浅拷贝只解决了第一层的问题，如果对象下还有对象的话，那么又回到最开始的问题了，第二层的对象拷贝过来的只是地址，两者享有相同的地址，这时就需要用到深拷贝了。

我们通常使用JSON.parse(JSON.stringify(object))来解决：

但是该方法具有以下局限性：

遇到函数、undefined和symbol时，会直接忽略掉他们，该对象不能正常的序列化，此时我们需要实现一个更为完善的深拷贝。

小结：以上深拷贝的方法依然只是较为简易的，要想实现一个比较完美的深拷贝其实是很困难的，需要我们考虑很多种边界情况，比如原型链如何处理、DOM如何处理等。该deepClone函数就有两个较为明显的问题，一是没有解决对象的循环引用的问题（参考方案：用弱映射做一个哈希表，存储原对象，若缓存命中，则过滤本次拷贝，直接使用记忆化数据，否则惰性拷贝。一般不是为了解决IE的兼容性问题，都没有问题，考虑兼容性则按需垫片。生产环境其实还需要考虑其它类型的拷贝，一般直接使用辅助工具库。总而言之，按需拷贝）；二是无法实现函数的拷贝。