JavaScript深拷贝的一些踩坑记录_js教程

JavaScript深拷贝的一些踩坑记录

2022-02-19 17:32YDJFE js教程

这篇文章主要给大家介绍了关于JavaScript深拷贝的一些踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

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

提出问题

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

特殊对象拷贝

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

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

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

JSON法

JSON.parse(JSON.stringify(obj))

输出结果:

JavaScript深拷贝的一些踩坑记录

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

递归

function isObj(obj) {
    return (typeof obj === "object" || typeof obj === "function") && obj !== null
}
function deepCopy(obj) {
    let tempObj = Array.isArray(obj) ? [] : {}
    for(let key in obj) {
        tempObj[key] = isObj(obj[key]) ? deepCopy(obj[key]) : obj[key]
    }
    return tempObj
}

结果:

JavaScript深拷贝的一些踩坑记录

结论

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

什么是环?

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

var a = {}

a.a = a

JavaScript深拷贝的一些踩坑记录

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

JavaScript深拷贝的一些踩坑记录

解决方案

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

function deepCopy(obj, hash = new WeakMap()) {
    if(hash.has(obj)) return hash.get(obj)
    let cloneObj = Array.isArray(obj) ? [] : {}
    hash.set(obj, cloneObj)
    for (let key in obj) {
        cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
    }
    return cloneObj
}

拷贝环结果:

JavaScript深拷贝的一些踩坑记录

特殊对象的拷贝

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

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

function deepCopy(obj, hash = new WeakMap()) {
    let cloneObj
    let Constructor = obj.constructor
    switch(Constructor){
        case RegExp:
            cloneObj = new Constructor(obj)
            break
        case Date:
            cloneObj = new Constructor(obj.getTime())
            break
        default:
            if(hash.has(obj)) return hash.get(obj)
            cloneObj = new Constructor()
            hash.set(obj, cloneObj)
    }
    for (let key in obj) {
        cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
    }
    return cloneObj
}

拷贝结果:

JavaScript深拷贝的一些踩坑记录