JavaScript深拷贝的注意事项

tangjin

作者

小编给大家分享一下JavaScript深拷贝的注意事项，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

之前去一家公司面试的时候，面试官问了我一个问题，说:"如何才能深拷贝一个对象"。当时我心里有些窃喜，这么简单的问题还用想吗？于是脱口而出:"平时常用的有两种办法，第一种用JSON.parse(JSON.stringify(obj))，第二种可以使用for...in加递归完成"。面试官听了以后点了点头觉得挺满意的。当时我也并没有太过在乎这个问题，直到前段时间又想起这个问题，发现上面说的两种方法都是有Bug的。

提出问题

那么上面所说的Bug是什么呢？

特殊对象拷贝

首先让我们试想有这么一个对象，在不考虑普通类型的情况下，它有如下成员:

constobj={
arr:[111,222],
obj:{key:'对象'},
a:()=>{console.log('函数')},
date:newDate(),
reg:/正则/ig
}

然后我们用上面两种方式分别拷贝一次

JSON法

JSON.parse(JSON.stringify(obj))

输出结果:

可以从中看出，obj中的普通对象和数组都能拷贝，然而date对象成了字符串，函数直接就不见了，正则成了一个空对象。再来看看for...in加递归的方法

递归

functionisObj(obj){
return(typeofobj==='object'||typeofobj==='function')&&obj!==null
}
functiondeepCopy(obj){
lettempObj=Array.isArray(obj)?[]:{}
for(letkeyinobj){
tempObj[key]=isObj(obj[key])?deepCopy(obj[key]):obj[key]
}
returntempObj
}

结果:

结论

通过上面的测试可知，这两个方法都无法拷贝函数，date，reg类型的对象;

什么是环?

环就是对象循环引用，导致自己成为一个闭环，例如下面这个对象:

vara={}

a.a=a

使用上面两个方法拷贝一下会直接报错

解决方案

可以使用一个WeakMap结构存储已经被拷贝的对象，每一次进行拷贝的时候就先向WeakMap查询该对象是否已经被拷贝，如果已经被拷贝则取出该对象并返回，将deepCopy函数改造成如下

functiondeepCopy(obj,hash=newWeakMap()){
if(hash.has(obj))returnhash.get(obj)
letcloneObj=Array.isArray(obj)?[]:{}
hash.set(obj,cloneObj)
for(letkeyinobj){
cloneObj[key]=isObj(obj[key])?deepCopy(obj[key],hash):obj[key];
}
returncloneObj
}

拷贝环结果:

特殊对象的拷贝

这个问题的解决比较麻烦，因为需要特别对待的对象种类实在太多，于是我参考了MDN上的结构化拷贝，然后结合解决环的方案：

//只解决date，reg类型，其他的可以自己添加

functiondeepCopy(obj,hash=newWeakMap()){
letcloneObj
letConstructor=obj.constructor
switch(Constructor){
caseRegExp:
cloneObj=newConstructor(obj)
break
caseDate:
cloneObj=newConstructor(obj.getTime())
break
default:
if(hash.has(obj))returnhash.get(obj)
cloneObj=newConstructor()
hash.set(obj,cloneObj)
}
for(letkeyinobj){
cloneObj[key]=isObj(obj[key])?deepCopy(obj[key],hash):obj[key];
}
returncloneObj
}

拷贝结果: