利用深度/廣度優先遍歷手動實現JavaScript對象的深度拷貝

RobinTang 發布于2019-08-26 10:36 / 950人閱讀

摘要：引言搜索對象的深度拷貝，往往會冒出轉換和遞歸拷貝大法。但遇到大數據量，它們都有調用棧爆棧的風險今天，我們嘗試利用樹的利用深度廣度優先遍歷來實現對象的深度拷貝。以下代碼在環境下全部測試通過。

引言

搜索JavaScript對象的深度拷貝，往往會冒出JSON轉換和遞歸拷貝大法。但遇到大數據量，它們都有調用棧爆棧的風險
今天，我們嘗試利用樹的利用深度/廣度優先遍歷來實現對象的深度拷貝。以下代碼在chrome環境下全部測試通過。

深度優先遍歷實現對象的深度拷貝

深度優先遍歷對象，利用棧做中間節點緩存

     function deepCopy(orginObject) {
    if (orginObject == null || typeof orginObject !== "object") {
        return;
    }
    console.log("starting")
    const resultObject = {}
    const rootKey = Symbol("root");
    //深度遍歷需要創建棧
    const stack = [];
    for (let key of Object.keys(orginObject)) {
        stack.push({
            key: key,//屬性名
            value: orginObject[key],//value屬性記錄當前節點下屬數據
            parent: resultObject//記錄節點在resultObject中的位置
        })
    }

    while (stack.length) {
        const currentNode = stack.pop();
        const parent = currentNode.parent;
        const currentKey = currentNode.key;
        const currentValue = currentNode.value;
        //若是無下屬對象，返回其值
        if (currentValue == null || typeof currentValue !== "object") {
            parent[currentKey] = currentValue;
        } else {
            //若下屬值是對象，將子節點壓入棧中
            parent[currentKey] = Object.prototype.toString.call(currentValue) === "[object Array]"?[]:{};
            for (let key of Object.keys(currentValue)) {
                console.log("loop:" + key, currentValue[key])
                stack.push({
                    key: key,
                    value: currentValue[key],
                    parent: parent[currentKey]
                })
            }
        }
    }
    return resultObject;
}
var copyObj = deepCopy({ a: { b: 1, d: { e: 6 } }, c: 3 });
console.log(copyObj);

廣度優先遍歷實現對象的深度拷貝

廣度優先遍歷對象，利用隊列做中間節點緩存

    function deepCopy(orginObject) {
    if (orginObject == null || typeof orginObject !== "object") {
        return;
    }
    console.log("starting")
    const resultObject = {}
    const rootKey = Symbol("root");
    //深度遍歷需要創建棧
    const queue = [];
    for (let key of Object.keys(orginObject)) {
        queue.push({
            key: key,//屬性名
            value: orginObject[key],//value屬性記錄當前節點下屬數據
            parent: resultObject//記錄節點在resultObject中的位置
        })
    }

    while (queue.length) {
        const currentNode = queue.shift();
        const parent = currentNode.parent;
        const currentKey = currentNode.key;
        const currentValue = currentNode.value;
        //若是無下屬對象，返回其值
        if (currentValue == null || typeof currentValue !== "object") {
            parent[currentKey] = currentValue;
        } else {
            //若下屬值是對象，將子節點壓入棧中
            parent[currentKey] = Object.prototype.toString.call(currentValue) === "[object Array]"?[]:{};
            for (let key of Object.keys(currentValue)) {
                console.log("loop:" + key, currentValue[key])
                queue.push({
                    key: key,
                    value: currentValue[key],
                    parent: parent[currentKey]
                })
            }
        }
    }
    return resultObject;
}
var copyObj = deepCopy({ a: { b: 1, d: { e: 6 } }, c: 3 });
console.log(copyObj);

GPU云服務器云服務器廣度優先遍歷圖的深度遍歷深度優先深度優先搜索

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106469.html

20190805-前端筆記-利用DFS廣度優先遍歷實現深拷貝

摘要：從這步開始，才是進行深度賦值進一步遍歷每一個屬性，進行賦值如果是，就直接以后賦值其他類型，直接賦值定義一些工具函數 let _toString = Object.prototype.toString // 類型庫 let map = { array: Array, object: Object, function: Func...

shiweifu 2019-08-26 10:34 評論0 收藏0
淺談JS的淺拷貝和深拷貝(遞歸和樹遍歷)

摘要：對象的特殊性因為對象的是通過指針仔細內存地址的，所以對象的拷貝不能像變量一般簡單的賦值，對象的賦值只是將指針的地址賦值過去而已，修改屬性值會對所有指向這個內存地址的對象的屬性值都會被改變，見下面的例子變量賦值修改不會對造成影響對象賦值修改會 1.對象的特殊性因為對象的是通過指針仔細內存地址的，所以對象的拷貝不能像變量一般簡單的賦值，對象的賦值只是將指針的地址賦值過去而已，修改屬性值會...

cjie 2019-08-23 16:10 評論0 收藏0
JS算法之深度優先遍歷(DFS)和廣度優先遍歷(BFS)

摘要：算法之深度優先遍歷和廣度優先遍歷背景在開發頁面的時候，我們有時候會遇到這種需求在頁面某個節點中遍歷，找到目標節點，我們正常做法是利用選擇器，或者，但在本文，我們從算法的角度去查找節點，同時理解一下深度優先遍歷和廣度優先遍歷的原理。 JS算法之深度優先遍歷(DFS)和廣度優先遍歷(BFS) 背景在開發頁面的時候，我們有時候會遇到這種需求：在頁面某個dom節點中遍歷，找到目標dom節點，...

roadtogeek 2019-08-23 16:33 評論0 收藏0
實現深度遍歷和廣度遍歷(遞歸與非遞歸版本)

摘要：先畫個樹，然后解釋何為深度，何為廣度第一層子集第二層子集第二層子集第三層，子集第三層第四層圖就不畫太復雜了，最高四層的結構，如果換成的形式的話可以理解成第一層第二層先畫個樹，然后解釋何為深度，何為廣度第一層子集 | ...

Betta 2019-08-26 10:09 評論0 收藏0
深拷貝的終極探索（99%的人都不知道）

摘要：劃重點，這是一道面試必考題，我靠這道題刷掉了多少面試者嘿嘿首先這是一道非常棒的面試題，可以考察面試者的很多方面，比如基本功，代碼能力，邏輯能力，而且進可攻，退可守，針對不同級別的人可以考察不同難度，比如漂亮妹子就出題，要是個帥哥那就得上了，劃重點，這是一道面試必考題，我靠這道題刷掉了多少面試者?(? ? ??)嘿嘿首先這是一道非常棒的面試題，可以考察面試者的很多方面，比如基本功，代...

qingshanli1988 2019-08-23 12:19 評論0 收藏0