淺談JavaScript 中深拷貝實現的方法

Vicky 發布于2019-08-20 13:50 / 2888人閱讀

摘要：相信人很多學習的過程中都踩了深拷貝和淺拷貝的坑，深拷貝和淺拷貝的區別我就不再贅述了，今天我來寫一下我自己實現深拷貝的各種方法。中的深拷貝也是用類似方法實現。

相信人很多學習js的過程中都踩了深拷貝和淺拷貝的坑，深拷貝和淺拷貝的區別我就不再贅述了，今天我來寫一下我自己實現深拷貝的各種方法。
比較簡單的拷貝方式可以借用瀏覽器的Json對象去實現，先把對象轉化為json字符串，在解析回對象實現深拷貝。具體代碼就是JSON.parse(JSON.stringify(target));但是這種比較hack的方法總歸不是正途，現在我就來貼兩種我自己寫的深拷貝代碼。

function deepClone(currobj){
    if(typeof currobj !== "object"){
        return currobj;
    }
    if(currobj instanceof Array){
        var newobj = [];
    }else{
        var newobj = {}
    }
    for(var key in currobj){
        if(typeof currobj[key] !== "object"){
            newobj[key] = currobj[key];
        }else{
            newobj[key] = deepClone(currobj[key])    
        }
    }
    return newobj
}

第一種自然就是遞歸，遍歷對象的每一個屬性然后賦值到新對象了，若是有深層次嵌套的對象，遞歸執行函數。jq中的深拷貝也是用類似方法實現。

    function deepClone(currobj){
        if(typeof currobj !== "object"){
            return currobj;
        }
        if(currobj instanceof Array){
            var newobj = [];
        }else{
            var newobj = {}
        }
        var currQue = [currobj], newQue = [newobj];
        while(currQue.length){
            var obj1 = currQue.shift(),obj2 = newQue.shift();
            for(var key in obj1){
                if(typeof obj1[key] !== "object"){
                    obj2[key] = obj1[key];
                }else{
                    if(obj1[key] instanceof Array ){
                        obj2[key] = [];
                    }else{
                        obj2[key] = {}
                    };
                    currQue.push(obj1[key]);
                    newQue.push(obj2[key]);
                }
            }
        }
        return newobj;
    };

上一種遞歸的方式容易引起內存溢出，特別是對一個比較復雜，層級很深的對象進行深拷貝。所以第二種方法是用循環去拷貝次級的對象，用兩個隊列去保存需要拷貝的對象和拷貝目標，利用淺拷貝的原理實現了深拷貝。

但是有時候對象會存在子屬性指向自身的問題，形成對象環，我這暫時還沒有考慮到。

突然看到自己這篇文章，其實對象環的問題只需要別將舊數組出棧就行了具體代碼：

function deepClone(currobj){
    if(typeof currobj !== "object"){
        return currobj;
    }
    if(currobj instanceof Array){
        var newobj = [];
    }else{
        var newobj = {}
    }
    var currQue = [currobj], newQue = [newobj], i = 0;
    while(i <= currQue.length - 1){
        var obj1 = currQue[i++],obj2 = newQue.shift();
        for(var key in obj1){
            if(typeof obj1[key] !== "object"){
                obj2[key] = obj1[key];
            }else{
                if(currQue.includes(obj1[key])){
                    obj2[key] = obj1[key];
                    continue;
                }
                if(obj1[key] instanceof Array ){
                    obj2[key] = [];
                }else{
                    obj2[key] = {}
                };
                currQue.push(obj1[key]);
                newQue.push(obj2[key]);
            }
        }
    }
    return newobj;
};

GPU云服務器云服務器 javascript實現方法淺談javascript javascript的方法 javascript淺拷貝

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

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

深入JavaScript中深拷貝和淺拷貝

摘要：深拷貝和淺拷貝問題的本質還是不同數據類型的存儲方式差異，尤其是引用數據類型的特殊。深拷貝和淺拷貝問題的本質還是不同數據類型的存儲方式差異，尤其是引用數據類型的特殊。showImg(https://segmentfault.com/img/bVbb8XH?w=1058&h=409); 現分別對賦值、淺拷貝、深拷貝做深入研究： 1.賦值原理：直接將對象指針直接賦值給另一個變量代碼： ...

TalkingData 2019-08-22 17:58 評論0 收藏0
JS中深拷貝與淺拷貝

摘要：地址傳遞引用類型則是地址傳遞，將存放在棧內存中的地址賦值給接收的變量。即對象的淺拷貝會對主對象進行拷貝，但不會復制主對象里面的對象。相關知識點 1.javascript變量包含兩種不同數據類型的值：基本類型和引用類型。基本類型值指的是簡單的數據段，包括es6里面新增的一共是有6種，具體如下：number、string、boolean、null、undefined、symbol。引...

ranwu 2019-08-23 15:41 評論0 收藏0
js中深拷貝與淺拷貝（堆內存、棧內存的關系）

摘要：而堆內存主要負責像對象這種變量類型的存儲，如下圖引用類型中復制淺拷貝的只是棧內存中的指針，指向同一個堆內存的對象如何實現深拷貝最簡單的方法就是與方法淺拷貝只會在引用類型中出現基本數據類型有哪些，number，string，boolean，null，undefined，symbol以及未來ES10新增的BigInt(任意精度整數)七類。引用數據類型(Object類)有常規名值對的無...

AlienZHOU 2019-08-26 13:45 評論0 收藏0
js基礎深入淺出

摘要：當多個事件觸發的時候，會把異步事件依次的放入里等同步事件執行完之后，再去隊列里一個個執行拾遺常用方法總結面試的信心來源于過硬的基礎參考高級程序設計你所不知道的深入淺出知識點思維導圖經典實例總結那些剪不斷理還亂的關系持續不斷更新。。。基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區別基本類型和字面值相等，...

phodal 2019-08-20 16:21 評論0 收藏0
Javascript 中的對象拷貝

摘要：原文在這篇文章中我們將會討論中對象拷貝的多種方式。因此，根據你的用法需要特別注意的對象拷貝。在擁有權限的情況下，通知立即關閉。在中深拷貝不幸的是，結構化拷貝算法目前僅適用于基于瀏覽器的應用。原文：COPYING OBJECTS IN JAVASCRIPT在這篇文章中我們將會討論 Javascript 中對象拷貝的多種方式。包括深拷貝和淺拷貝。開始之前，先談一些基礎知識： Javasc...

lieeps 2019-08-26 12:25 評論0 收藏0