JS中的深拷貝與淺拷貝

wuyumin 發布于2019-08-22 16:11 / 2949人閱讀

摘要：深拷貝和淺拷貝最根本的區別在于是否是真正獲取了一個對象的復制實體，而不是引用，深拷貝在計算機中開辟了一塊內存地址用于存放復制的對象，而淺拷貝僅僅是指向被復制的內存地址，如果原地址中對象被改變了，那么淺拷貝出來的對象也會相應改變。

深拷貝和淺拷貝最根本的區別在于是否是真正獲取了一個對象的復制實體，而不是引用，

深拷貝在計算機中開辟了一塊內存地址用于存放復制的對象，

而淺拷貝僅僅是指向被復制的內存地址，如果原地址中對象被改變了，那么淺拷貝出來的對象也會相應改變。

深拷貝的實現:
1.通過遞歸解決

    var a={a:23,b:[1,2,3,[5]],c:{name:"南京"}};
    function deepCopy(initObj,finalObj) {
        var obj=finalObj||{};
        for(var i in initObj){
            var prop = initObj[i];        // 避免相互引用對象導致死循環，如initalObj.a = initalObj的情況
            if(prop === obj) {
                continue;
            }

            if(typeof initObj[i]==="object"){
                obj[i]=(initObj[i].constructor===Array)?[]:{};
//                arguments.callee(initObj[i],obj[i]);
                deepCopy(initObj[i],obj[i]);
            }else{
                obj[i]=initObj[i];
            }
        }
        return obj;
    }
    var b=deepCopy(a);
    b["name"]="武漢";
    b.c.name="長江";
    console.log(a);
    console.log(b);

2.使用Object.create

    var a={a:23,b:[1,2,3,[5]],c:{name:"南京"}};
    function deepCopy(initObj,finalObj) {
        var obj=finalObj||{};
        for(var i in initObj){
            var prop=initObj[i];
            if(prop===obj){
                continue;
            }
            if(typeof prop==="object"){
//                obj[i]=prop.constructor==="Array"?[]:Object.create(prop);
//                obj[i]=prop.isPrototypeOf(Array)?[]:Object.create(prop);
                obj[i]=prop instanceof Array?[]:Object.create(prop);
            }else{
                obj[i]=prop;
            }
        }
        return obj;
    }
    var b=deepCopy(a);
    b["name"]="武漢";
    b.c.name="長江";
    console.log(a);
    console.log(b);

3.借助JSON

var a={a:23,b:[1,2,3,[5]],c:{name:"南京"},d:function () {
        console.log("hh");
    }};
var b=JSON.parse(JSON.stringify(a));
b["name"]="武漢";
b.c.name="長江";
console.log(a);
console.log(b);
console.log(a.d);
console.log(b.d);

這種方法的缺點是無法復制函數,再就是原型鏈沒了,對象就是object,所屬的類沒了.
4、Object.assign()處理一層的深度拷貝

var a={name:"武漢",num:[1,2,3]};
var b=Object.assign({},a);
b.name="南京";
console.log(a);
console.log(b);

數組的拷貝,ES6有Array.from和...兩種方法不會發生引用,js中的slice和concat

var a=[1,2];
var b=Array.from(a);
b.push(3);
var c=[...a];
c.push(4);
var d=a.slice(0);
d.push(-1);
var e=a.concat([5]);

console.log(a); //[1,2]
console.log(b); //[1,2,3]
console.log(c); //[1,2,4]
console.log(d); //[1,2,-1]
console.log(e); //[1,2,5]

云服務器 GPU云服務器 js拷貝內存數據庫后拷貝預拷貝深拷貝和淺拷貝淺拷貝

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

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

JS中的深拷貝與淺拷貝

摘要：中的深拷貝與淺拷貝說到深淺拷貝的時候就不得不說一下中的變量類型了基本類型按值存放在棧內存中的簡單數據段可以直接訪問引用類型存放在堆內存中的對象變量保存的是一個指向存放數據位置的指針訪問引用類型的值時首先從棧中獲取到存放該數據位置的指針然后再 JS中的深拷貝與淺拷貝說到深淺拷貝的時候就不得不說一下JS中的變量類型了: 基本類型: undefined、null、boolean、numb...

ARGUS 2019-08-26 12:13 評論0 收藏0
JS 中的深拷貝與淺拷貝

摘要：什么是深拷貝淺拷貝見名知義，無論是深拷貝還是淺拷貝，都是的問題。使用如下以上就是關于中的深拷貝與淺拷貝的知識和如何進行深拷貝的知識了，如果有錯或者有其他方式的話，歡迎在下面留言評論啦前言最近在寫項目的時候涉及到一些父子組件傳遞個對象或者數組通信啥的，或者是直接復制添加對象啥的，直接使用賦值的時候總會出錯。一查原來是淺拷貝的問題，就從網上找了點資料，匯總到這里來了。 1 什么是深拷貝...

ztyzz 2019-08-23 13:41 評論0 收藏0
低門檻徹底理解JavaScript中的深拷貝和淺拷貝

摘要：案例中的賦值就是典型的淺拷貝，并且深拷貝與淺拷貝的概念只存在于引用類型。修改修改經測試，也只能實現一維對象的深拷貝。經過驗證，我們發現提供的自有方法并不能徹底解決的深拷貝問題。在說深拷貝與淺拷貝前，我們先看兩個簡單的案例： //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 num...

wind3110991 2019-08-22 16:02 評論0 收藏0
淺談深拷貝和淺拷貝

摘要：而引用類型值是指那些保存堆內存中的對象，意思是變量中保存的實際上只是一個指針，這個指針指向內存中的另一個位置，該位置保存對象。而堆內存主要負責對象這種變量類型的存儲。我們需要明確一點，深拷貝與淺拷貝的概念只存在于引用類型。深拷貝和淺拷貝說起深拷貝和淺拷貝，首先我們來看兩個栗子 // 栗子1 var a = 1,b=a; console.log(a); console.log(b) ...

littleGrow 2019-08-23 15:34 評論0 收藏0
javascript的深拷貝VS淺拷貝

摘要：深拷貝淺拷貝本文主要對深拷貝淺拷貝的解釋及實現做一下簡單記錄。之所以會有深拷貝與淺拷貝之分，是因為不同數據類型的數據在內存中的存儲區域不一樣。但注意，只能做一層屬性的淺拷貝。深拷貝VS淺拷貝本文主要對深拷貝&淺拷貝的解釋及實現做一下簡單記錄。原文鏈接，歡迎star。之所以會有深拷貝與淺拷貝之分，是因為不同數據類型的數據在內存中的存儲區域不一樣。堆和棧是計算機中劃分出來用來存儲的...

Nekron 2019-08-23 15:08 評論0 收藏0