前端面試的底氣之實(shí)現(xiàn)一個深拷貝

更新時間：2022年05月10日 14:25:56 作者：紅塵煉心

最近學(xué)到一個有關(guān)深拷貝的實(shí)現(xiàn)方法,為加深印象,這里給大家分享一下,下面這篇文章主要給大家介紹了關(guān)于前端面試的底氣之實(shí)現(xiàn)一個深拷貝的相關(guān)資料,需要的朋友可以參考下

前言

深拷貝這個功能在開發(fā)中經(jīng)常使用到，特別在對引用類型的數(shù)據(jù)進(jìn)行操作時，一般會先深拷貝一份賦值給一個變量，然后在對其操作，防止影響到其它使用該數(shù)據(jù)的地方。

如何實(shí)現(xiàn)一個深拷貝，在面試中出現(xiàn)頻率一直居高不下。因?yàn)樵趯?shí)現(xiàn)一個深拷貝過程中，可以看出應(yīng)聘者很多方面的能力。

本專欄將從青銅到王者來介紹怎么實(shí)現(xiàn)一個深拷貝，以及每個段位對應(yīng)的能力。

青銅段位

JSON.parse(JSON.stringify(data))

這種寫法非常簡單，而且可以應(yīng)對大部分的應(yīng)用場景，但是它有很大缺陷的。如果你不知道它有那些缺陷，而且這種實(shí)現(xiàn)方法體現(xiàn)不出你任何能力，所以這種實(shí)現(xiàn)方法處于青銅段位。

如果對象中存在循環(huán)引用的情況也無法正確實(shí)現(xiàn)深拷貝。

const a = {
    b: 1,
}
a.c = a;
JSON.parse(JSON.stringify(a));

如果 data 里面有時間對象，則JSON.stringify后再JSON.parse的結(jié)果，時間將只是字符串的形式。而不是時間對象。

const a = {
    b: new Date(1536627600000),
}
console.log(JSON.parse(JSON.stringify(a)))

如果 data 里有RegExp、Error對象，則序列化的結(jié)果將只得到空對象；

const a = {
    b: new RegExp(/\d/),
    c: new Error('錯誤')
}
console.log(JSON.parse(JSON.stringify(a)))

如果 data 里有函數(shù)，undefined，則序列化的結(jié)果會把函數(shù)置為undefined或丟失；

const a = {
    b: function (){
        console.log(1)
    },
    c:1,
	d:undefined
}
console.log(JSON.parse(JSON.stringify(a)))

如果 data 里有NaN、Infinity和-Infinity，則序列化的結(jié)果會變成null

const a = {
    b: NaN,
    c: 1.7976931348623157E+10308,
    d: -1.7976931348623157E+10308,
}
console.log(JSON.parse(JSON.stringify(a)))

白銀段位

深拷貝的核心就是對引用類型的數(shù)據(jù)的拷貝處理。

function deepClone(target){
    if(target !== null && typeof target === 'object'){
        let result = {}
        for (let k in target){
            if (target.hasOwnProperty(k)) {
                result[k] = deepClone(target[k])
            }
        }
        return result;
    }else{
        return target;
    }
}

以上代碼中，deepClone函數(shù)的參數(shù) target 是要深拷貝的數(shù)據(jù)。

執(zhí)行 target !== null && typeof target === 'object' 判斷 target 是不是引用類型。

若不是，直接返回 target。

若是，創(chuàng)建一個變量 result 作為深拷貝的結(jié)果，遍歷 target，執(zhí)行 deepClone(target[k]) 把 target 每個屬性的值深拷貝后賦值到深拷貝的結(jié)果對應(yīng)的屬性 result[k] 上，遍歷完畢后返回 result。

在執(zhí)行 deepClone(target[k]) 中，又會對 target[k] 進(jìn)行類型判斷，重復(fù)上述流程，形成了一個遞歸調(diào)用 deepClone 函數(shù)的過程。就可以層層遍歷要拷貝的數(shù)據(jù)，不管要拷貝的數(shù)據(jù)有多少子屬性，只要子屬性的值的類型是引用類型，就會調(diào)用 deepClone 函數(shù)將其深拷貝后賦值到深拷貝的結(jié)果對應(yīng)的屬性上。

另外使用 for...in 循環(huán)遍歷對象的屬性時，其原型鏈上的所有屬性都將被訪問，如果只要只遍歷對象自身的屬性，而不遍歷繼承于原型鏈上的屬性，要使用 hasOwnProperty 方法過濾一下。

在這里可以向面試官展示你的三個編程能力。

對原始類型和引用類型數(shù)據(jù)的判斷能力。
對遞歸思維的應(yīng)用的能力。
深入理解for...in的用法。

黃金段位

白銀段位的代碼中只考慮到了引用類型的數(shù)據(jù)是對象的情況，漏了對引用類型的數(shù)據(jù)是數(shù)組的情況。

function deepClone(target){
    if(target !== null && typeof target === 'object'){
        let result = Object.prototype.toString.call(target) === "[object Array]" ? [] : {};
        for (let k in target){
            if (target.hasOwnProperty(k)) {
                result[k] = deepClone(target[k])
            }
        }
        return result;
    }else{
        return target;
    }
}

以上代碼中，只是額外增加對參數(shù) target 是否是數(shù)組的判斷。執(zhí)行 Object.prototype.toString.call(target) === "[object Array]" 判斷 target 是不是數(shù)組，若是數(shù)組，變量result 為 []，若不是數(shù)組，變量result 為 {}。

在這里可以向面試官展示你的兩個編程能力。

正確理解引用類型概念的能力。
精確判斷數(shù)據(jù)類型的能力。

鉑金段位

假設(shè)要深拷貝以下數(shù)據(jù) data

let data = {
    a: 1
};
data.f=data

執(zhí)行 deepClone(data)，會發(fā)現(xiàn)控制臺報錯，錯誤信息如下所示。

這是因?yàn)檫f歸進(jìn)入死循環(huán)導(dǎo)致棧內(nèi)存溢出了。根本原因是 data 數(shù)據(jù)存在循環(huán)引用，即對象的屬性間接或直接的引用了自身。

function deepClone(target) {
    function clone(target, map) {
        if (target !== null && typeof target === 'object') {
            let result = Object.prototype.toString.call(target) === "[object Array]" ? [] : {};
            if (map[target]) {
                return map[target];
            }
            map[target] = result;
            for (let k in target) {
                if (target.hasOwnProperty(k)) {
                    result[k] = clone(target[k],map)
                }
            }
            return result;
        } else {
            return target;
        }
    }
    let map = new Map();
    const result = clone(target, map);
    map.clear();
    map = null;
    return result
}

以上代碼中利用額外的變量 map 來存儲當(dāng)前對象和拷貝對象的對應(yīng)關(guān)系，當(dāng)需要拷貝當(dāng)前對象時，先去 map 中找，有沒有拷貝過這個對象，如果有的話直接返回，如果沒有的話繼續(xù)拷貝，這樣就巧妙化解的循環(huán)引用的問題。

之所以采用 ES6 中 Map 數(shù)據(jù)結(jié)構(gòu)，是因?yàn)橄鄬τ谄胀ǖ?Object 結(jié)構(gòu)，其鍵值不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。換句話來說。Object 結(jié)構(gòu)提供了“字符串——值”的對應(yīng)，Map 結(jié)構(gòu)提供了“值——值” 的對應(yīng)。若采用 Object 結(jié)構(gòu)，當(dāng) target 不是字符串時，那么其鍵值全部都是 [Object Object]，會引起混亂。

最后需要執(zhí)行 map.clear();map = null; ，釋放內(nèi)存，防止內(nèi)存泄露。

在這里可以向面試官展示你的三個編程能力。

對循環(huán)引用的理解，如何解決循環(huán)引用引起的問題的能力。
熟悉 ES6 中 Map 數(shù)據(jù)結(jié)構(gòu)的概念及應(yīng)用
對內(nèi)存泄露的認(rèn)識和避免泄露的能力。

磚石段位

該段位要考慮性能問題了。上面用 Map 來解決循環(huán)引用的問題。但是最后一定要執(zhí)行 map.clear();map = null; ，釋放內(nèi)存，防止內(nèi)存泄露。

也可以使用 WeakMap 來解決循環(huán)引用。WeakMap 數(shù)據(jù)結(jié)構(gòu)和 Map 數(shù)據(jù)結(jié)構(gòu)，有兩點(diǎn)區(qū)別：

WeakMap 只接受對象作為鍵名（ null 除外），不接受其他類型的值作為鍵名。但是 target 正好符合要求故不影響。
WeakMap 的鍵名所指向的對象不計入垃圾回收機(jī)制。這里用下面的例子來解釋。

let map = new WeakMap();
let obj = {a : 1}
map.set(obj , 1);

現(xiàn)代瀏覽器GC回收策略，采用計算引用次來回收，就是某個對象被引用的次數(shù)為 1，因?yàn)?map 中的鍵名 obj 和對象 obj 之間的引用是弱引用，也就是不計入引用次數(shù)，對象 obj 被引用的次數(shù)還是 1。當(dāng)執(zhí)行 obj = null后，執(zhí)行GC回收時，對象 obj 被引用的次數(shù)變成 0 ，故會把 obj 所占的內(nèi)存釋放掉。

但是如果 map 是 Map 數(shù)據(jù)結(jié)構(gòu)，因?yàn)?Map 的鍵名所引用的對象是強(qiáng)引用，就算執(zhí)行 obj = null 后，再執(zhí)行GC回收，Map 的鍵名 obj 對所引用的對象 obj 還是有引用，那么obj 被引用的次數(shù)還是 1，故 obj 所占的內(nèi)存釋放不掉。

所以使用 WeakMap 可以防止忘記把 map 置為 null 導(dǎo)致的內(nèi)存泄漏。然而 WeakMap 這種弱引用，僅僅只是為了防止內(nèi)存泄漏嗎？其還有個特性，當(dāng)執(zhí)行 obj = null，相當(dāng)對象 obj 被GC回收了，但是執(zhí)行 map.get(obj) 得到的值還是 1。我們可以利用這個特性來做一下性能優(yōu)化。

在深拷貝的代碼中。是使用拷貝的對象作為鍵名的，設(shè)想一下，當(dāng)拷貝的對象非常龐大時，導(dǎo)致 map 會占用很大的內(nèi)存。

如果 map 使用 Map 數(shù)據(jù)結(jié)構(gòu)，因?yàn)?Map 的鍵名所引用的對象是強(qiáng)引用，所以在瀏覽器定時執(zhí)行GC回收時，除非手動清除 Map 這個鍵值對，才能把這個拷貝對象所占用的內(nèi)存釋放掉。

如果 map 使用 WeakMap 數(shù)據(jù)結(jié)構(gòu)，因?yàn)?WeakMap 的鍵名所引用的對象是弱引用，所以在瀏覽器會定時執(zhí)行GC回收，會直接把這個拷貝對象所占用的內(nèi)存釋放掉，那么這樣是不是對內(nèi)存占用減少，間接優(yōu)化了代碼運(yùn)行性能。

此外在上面的代碼中，我們遍歷數(shù)組和對象都使用了 for...in 這種方式，實(shí)際上 for...in 在遍歷時效率是非常低的，故用效率比較高的 while 來遍歷。

function deepClone(target) {
    /**
     * 遍歷數(shù)據(jù)處理函數(shù)
     * @array 要處理的數(shù)據(jù)
     * @callback 回調(diào)函數(shù)，接收兩個參數(shù) value 每一項的值 index 每一項的下標(biāo)或者key。
    */
    function handleWhile(array, callback) {
        const length = array.length;
        let index = -1;
        while (++index < length) {
            callback(array[index], index)
        }
    }
    function clone(target, map) {
        if (target !== null && typeof target === 'object') {
            let result = Object.prototype.toString.call(target) === "[object Array]" ? [] : {};
            // 解決循環(huán)引用
            if (map.has(target)) {
                return map.get(target);
            }
            map.set(target, result);
            
            const keys = Object.prototype.toString.call(target) === "[object Array]" ? undefined : Object.keys(
                target);

            function callback(value, key) {
                if (keys) {
                    // 如果keys存在則說明value是一個對象的key，不存在則說明key就是數(shù)組的下標(biāo)。
                    key = value;
                }
                result[key] = clone(target[key], map)
            }
            handleWhile(keys || target, callback)
            return result;
        } else {
            return target;
        }
    }
    let map = new WeakMap();
    const result = clone(target,map);
    map = null;
    return result
}

用 while 遍歷的深拷貝記為 deepClone，把用 for ... in 遍歷的深拷貝記為 deepClone1。利用 console.time() 和 console.timeEnd() 來計算執(zhí)行時間。

let arr = [];
for (let i = 0; i < 1000000; i++) {
    arr.push(i)
}
let data = {
    a: arr
};
console.time();
const result = deepClone(data);
console.timeEnd();
console.time();
const result1 = deepClone1(data);
console.timeEnd();

從上圖明顯可以看到用 while 遍歷的深拷貝的性能遠(yuǎn)優(yōu)于用 for ... in 遍歷的深拷貝。

在這里可以向面試官展示你的五個編程能力。

熟悉 ES6 中 WeakMap 數(shù)據(jù)結(jié)構(gòu)的概念及應(yīng)用
具有優(yōu)化代碼運(yùn)行性能的能力。
了解遍歷的效率的能力。
了解 ++i 和 i++ 的區(qū)別。
代碼抽象的能力。

星耀段位

在這個階段應(yīng)該考慮代碼邏輯的嚴(yán)謹(jǐn)性。在上面段位的代碼雖然已經(jīng)滿足平時開發(fā)的需求，但是還是有幾處邏輯不嚴(yán)謹(jǐn)?shù)牡胤健?/p>

判斷數(shù)據(jù)不是引用類型時就直接返回 target，但是原始類型中還有 Symbol 這一特殊類型的數(shù)據(jù)，因?yàn)槠涿總€ Symbol 都是獨(dú)一無二，需要額外拷貝處理，不能直接返回。
判斷數(shù)據(jù)是不是引用類型時不嚴(yán)謹(jǐn)，漏了 typeof target === function' 的判斷。
只考慮了 Array、Object 兩種引用類型數(shù)據(jù)的處理，引用類型的數(shù)據(jù)還有Function 函數(shù)、Date 日期、RegExp 正則、Map 數(shù)據(jù)結(jié)構(gòu)、Set 數(shù)據(jù)機(jī)構(gòu)，其中 Map 、Set 屬于 ES6 的。

廢話不多說，直接貼上全部代碼，代碼中有注釋。

function deepClone(target) {
    // 獲取數(shù)據(jù)類型
    function getType(target) {
        return Object.prototype.toString.call(target)
    }
    //判斷數(shù)據(jù)是不是引用類型
    function isObject(target) {
        return target !== null && (typeof target === 'object' || typeof target === 'function');
    }
    //處理不需要遍歷的應(yīng)引用類型數(shù)據(jù)
    function handleOherData(target) {
        const type = getType(target);
        switch (type) {
            case "[object Date]":
                return new Date(target)
            case "[object RegExp]":
                return cloneReg(target)
            case "[object Function]":
                return cloneFunction(target)

        }
    }
    //拷貝Symbol類型數(shù)據(jù)
    function cloneSymbol(targe) {
        const a = String(targe); //把Symbol字符串化
        const b = a.substring(7, a.length - 1); //取出Symbol()的參數(shù)
        return Symbol(b); //用原先的Symbol()的參數(shù)創(chuàng)建一個新的Symbol
    }
    //拷貝正則類型數(shù)據(jù)
    function cloneReg(target) {
        const reFlags = /\w*$/;
        const result = new target.constructor(target.source, reFlags.exec(target));
        result.lastIndex = target.lastIndex;
        return result;
    }
    //拷貝函數(shù)
    function cloneFunction(targe) {
        //匹配函數(shù)體的正則
        const bodyReg = /(?<={)(.|\n)+(?=})/m;
        //匹配函數(shù)參數(shù)的正則
        const paramReg = /(?<=\().+(?=\)\s+{)/;
        const targeString = targe.toString();
        //利用prototype來區(qū)分下箭頭函數(shù)和普通函數(shù)，箭頭函數(shù)是沒有prototype的
        if (targe.prototype) { //普通函數(shù)
            const param = paramReg.exec(targeString);
            const body = bodyReg.exec(targeString);
            if (body) {
                if (param) {
                    const paramArr = param[0].split(',');
                    //使用 new Function 重新構(gòu)造一個新的函數(shù)
                    return new Function(...paramArr, body[0]);
                } else {
                    return new Function(body[0]);
                }
            } else {
                return null;
            }
        } else { //箭頭函數(shù)
            //eval和函數(shù)字符串來重新生成一個箭頭函數(shù)
            return eval(targeString);
        }
    }
    /**
     * 遍歷數(shù)據(jù)處理函數(shù)
     * @array 要處理的數(shù)據(jù)
     * @callback 回調(diào)函數(shù)，接收兩個參數(shù) value 每一項的值 index 每一項的下標(biāo)或者key。
     */
    function handleWhile(array, callback) {
        let index = -1;
        const length = array.length;
        while (++index < length) {
            callback(array[index], index);
        }
    }
    function clone(target, map) {
        if (isObject(target)) {
            let result = null;
            if (getType(target) === "[object Array]") {
                result = []
            } else if (getType(target) === "[object Object]") {
                result = {}
            } else if (getType(target) === "[object Map]") {
                result = new Map();
            } else if (getType(target) === "[object Set]") {
                result = new Set();
            }

            // 解決循環(huán)引用
            if (map.has(target)) {
                return map.get(target);
            }
            map.set(target, result);

            if (getType(target) === "[object Map]") {
                target.forEach((value, key) => {
                    result.set(key, clone(value, map));
                });
                return result;
            } else if (getType(target) === "[object Set]") {
                target.forEach(value => {
                    result.add(clone(value, map));
                });
                return result;
            } else if (getType(target) === "[object Object]" || getType(target) === "[object Array]") {
                const keys = getType(target) === "[object Array]" ? undefined : Object.keys(target);

                function callback(value, key) {
                    if (keys) {
                        // 如果keys存在則說明value是一個對象的key，不存在則說明key就是數(shù)組的下標(biāo)。
                        key = value
                    }
                    result[key] = clone(target[key], map)
                }
                handleWhile(keys || target, callback)
            } else {
                result = handleOherData(target)
            }
            return result;
        } else {
            if (getType(target) === "[object Symbol]") {
                return cloneSymbol(target)
            } else {
                return target;
            }
        }
    }
    let map = new WeakMap;
    const result = clone(target, map);
    map = null;
    return result
}

在這里可以向面試官展示你的六個編程能力。

代碼邏輯的嚴(yán)謹(jǐn)性。
深入了解數(shù)據(jù)類型的能力。
JS Api 的熟練使用的能力。
了解箭頭函數(shù)和普通函數(shù)的區(qū)別。
熟練使用正則表達(dá)式的能力。
模塊化開發(fā)的能力

王者段位

以上代碼中還有很多數(shù)據(jù)類型的拷貝，沒有實(shí)現(xiàn)，有興趣的話可以在評論中實(shí)現(xiàn)一下，王者屬于你哦！

總結(jié)

綜上所述，面試官叫你實(shí)現(xiàn)一個深拷貝，其實(shí)是要考察你各方面的能力。例如

白銀段位
- 對原始類型和引用類型數(shù)據(jù)的判斷能力。
- 對遞歸思維的應(yīng)用的能力。
黃金段位
- 正確理解引用類型概念的能力。
- 精確判斷數(shù)據(jù)類型的能力。
鉑金段位
- 對循環(huán)引用的理解，如何解決循環(huán)引用引起的問題的能力。
- 熟悉 ES6 中 Map 數(shù)據(jù)結(jié)構(gòu)的概念及應(yīng)用。
- 對內(nèi)存泄露的認(rèn)識和避免泄露的能力。
磚石段位
- 熟悉 ES6 中 WeakMap 數(shù)據(jù)結(jié)構(gòu)的概念及應(yīng)用。
- 具有優(yōu)化代碼運(yùn)行性能的能力。
- 了解遍歷的效率的能力。
- 了解 ++i 和 i++ 的區(qū)別。
- 代碼抽象的能力。
星耀段位
- 代碼邏輯的嚴(yán)謹(jǐn)性。
- 深入了解數(shù)據(jù)類型的能力。
- JS Api 的熟練使用的能力。
- 了解箭頭函數(shù)和普通函數(shù)的區(qū)別。
- 熟練使用正則表達(dá)式的能力。
- 模塊化開發(fā)的能力