日韩精品中文字幕一区三区,欧美交,亚州国产

前言

之前去一家公司面試的時(shí)候，面試官問了我一個(gè)問題，說:"如何才能深拷貝一個(gè)對象"。當(dāng)時(shí)我心里有些竊喜，這么簡單的問題還用想嗎？于是脫口而出:"平時(shí)常用的有兩種辦法，第一種用JSON.parse(JSON.stringify(obj))，第二種可以使用for...in加遞歸完成"。面試官聽了以后點(diǎn)了點(diǎn)頭覺得挺滿意的。
當(dāng)時(shí)我也并沒有太過在乎這個(gè)問題，直到前段時(shí)間又想起這個(gè)問題，發(fā)現(xiàn)上面說的兩種方法都是有Bug的。

提出問題

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

特殊對象拷貝

首先讓我們試想有這么一個(gè)對象，在不考慮普通類型的情況下，它有如下成員:

const obj = {
    arr: [111, 222],
    obj: {key: "對象"},
    a: () => {console.log("函數(shù)")},
    date: new Date(),
    reg: /正則/ig
}

然后我們用上面兩種方式分別拷貝一次

JSON法

JSON.parse(JSON.stringify(obj))

輸出結(jié)果:

JavaScript深拷貝的一些踩坑記錄

可以從中看出，obj中的普通對象和數(shù)組都能拷貝，然而date對象成了字符串，函數(shù)直接就不見了，正則成了一個(gè)空對象。
再來看看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
}

結(jié)果:

JavaScript深拷貝的一些踩坑記錄

結(jié)論

通過上面的測試可知，這兩個(gè)方法都無法拷貝函數(shù)，date，reg類型的對象;

環(huán)

什么是環(huán)?

環(huán)就是對象循環(huán)引用，導(dǎo)致自己成為一個(gè)閉環(huán)，例如下面這個(gè)對象:

var a = {}

a.a = a

JavaScript深拷貝的一些踩坑記錄

使用上面兩個(gè)方法拷貝一下會(huì)直接報(bào)錯(cuò)

JavaScript深拷貝的一些踩坑記錄

解決方案

環(huán)

可以使用一個(gè)WeakMap結(jié)構(gòu)存儲(chǔ)已經(jīng)被拷貝的對象，每一次進(jìn)行拷貝的時(shí)候就先向WeakMap查詢該對象是否已經(jīng)被拷貝，如果已經(jīng)被拷貝則取出該對象并返回，將deepCopy函數(shù)改造成如下

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
}

拷貝環(huán)結(jié)果:

JavaScript深拷貝的一些踩坑記錄

特殊對象的拷貝

這個(gè)問題的解決比較麻煩，因?yàn)樾枰貏e對待的對象種類實(shí)在太多，于是我參考了MDN上的結(jié)構(gòu)化拷貝，然后結(jié)合解決環(huán)的方案：

// 只解決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
}

拷貝結(jié)果:

JavaScript深拷貝的一些踩坑記錄