Javascript深度克隆中的循環引用問題怎么解決

這篇文章主要介紹“Javascript深度克隆中的循環引用問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Javascript深度克隆中的循環引用問題怎么解決”文章能幫助大家解決問題。

概要

在前端項目開發中，我們經常需要深度克隆JS對象。在克隆代碼開發過程中，我們經常會遇到數組判定或對象循環引用的問題。

本文通過實例來解決上述問題

代碼及實現

常見深度克隆JS對象的代碼

function deepClone(origin){

    if (origin == undefined || typeof origin !== "object"){

        return origin;

    }

    if (origin instanceof Date){

        return new Date(origin);

    }

    let keys = Reflect.ownKeys(origin);

    let target = {};

    if (Object.prototype.toString.call(origin) === "[object Array]"){

        target = [];

    }

    for(let key of keys){

        target[key] = deepClone(origin[key]);

    }

    return target;

} 

上述代碼主要存在兩個問題：

數組判定代碼過于麻煩

對象中如果出現循環引用，代碼將會報錯。

循環引用代碼：

var obj = {a: 1};

obj.obj1 = obj;

var newObj = deepClone(obj);

console.log(newObj);

錯誤信息：

產生錯誤的原因很簡單，由于對象中存在循環引用，所以遞歸無法結束，最后內存溢出了。

循環引用問題的解決

由于對象中的循環引用，所以遞歸無法結束。如果我們記錄下哪個對象被克隆了，哪個對象沒有被克隆，就可以強制結束遞歸，避免內存泄漏。

我們選擇WeekMap來記錄對象是否被克隆，主要考慮以下三點：

WeakMap對象是key => value形式，不會重復記錄

WeakMap對象的key必須是一個對象

WeakMap是若引用，如果不再使用，內存空間直接釋放。

改進代碼如下：

function deepClone(origin, map = new WeakMap()){

    if (origin == undefined || typeof origin !== "object"){

        return origin;

    }

    if (origin instanceof Date){

        return new Date(origin);

    }

    if (origin instanceof RegExp){

        return new RegExp(origin);

    }

    var copied = map.get(origin);

    if (!!copied){

        return copied;

    }   

    let target = {};

    if (Object.prototype.toString.call(origin) === "[object Array]"){

        target = [];

    }

    map.set(origin, target);

    let keys = Reflect.ownKeys(origin);

    for(let key of keys){   

        target[key] = deepClone(origin[key], map);

    }

    return target;

} 

通過WeakMap記錄對象是否被拷貝過，如果拷貝過，就直接將拷貝過的對象返回，不再重復克隆

如果沒有被拷貝過，構建數組或普通JS對象，然后再進行記錄。

克隆存在循環引用的對象，代碼如下：

var obj = {a: 1};

obj.obj1 = obj;

var newObj = deepClone(obj);

console.log(newObj);

執行結果如下：

數組判定的代碼優化

在克隆之前，我們必須知道要克隆的對象是一個普通JS對象還是一個數組。我們是否可以換一個思路，任何對象都有自己的構建器，如果我們直接使用構造器構造對象，也就不需要之前對象是什么類型了。

JS中所有對象都有自己的原型鏈，原型鏈中包含基類Object的構造器，如下所示：

JS普通對象

JS數組：

JS普通對象的構造方法可以構建出{}，JS數組的構建方法可以構造出[]。所以如果我們調用該構造方法，就無需再去判定數組還是普通對象了。

改進后的代碼如下：

function deepClone(origin, map = new WeakMap()){

    if (origin == undefined || typeof origin !== "object"){

        return origin;

    }

    if (origin instanceof Date){

        return new Date(origin);

    }

    var copied = map.get(origin);

    if (!!copied){

        return copied;

    }   

    let target = new origin.constructor();

    map.set(origin, target);

    let keys = Reflect.ownKeys(origin);

    for(let key of keys){   

        target[key] = deepClone(origin[key], map);

    }

    return target;

} 

關于“Javascript深度克隆中的循環引用問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。