Javascript系列之淺復制與深復制

MonoLog 發布于2019-08-21 17:17 / 2351人閱讀

摘要：定義淺復制如果復制引用，復制后的引用都是指向同一個對象的實例，彼此之間的操作會互相影響。淺復制數組淺復制利用數組方法和返回新數組特性，進行復制。深復制對象深復制利用對象的和方法。

定義 淺復制

如果復制引用，復制后的引用都是指向同一個對象的實例，彼此之間的操作會互相影響。

深復制

深復制不是簡單的復制引用，而是在堆中重新分配內存，并且把源對象實例的所有屬性都進行新建復制，以保證深復制的對象的引用圖不包含任何原有對象或對象圖上的任何對象，復制后的對象與原來的對象是完全隔離的。

淺復制 數組淺復制

利用數組方法slice和concat返回新數組特性，進行復制。

var arr = [1,2,3];
var new_arr = arr.concat();
arr[0] = "new";
console.log(new_arr);      //[1, 2, 3]

再來看一組情況：

var arr = [{name: "haha"}, [1,2,3]];
var new_arr = arr.concat();
arr[0].name = "lily";
console.log(new_arr.name);      //"lily"

可以看出，如果數組元素是基本數據類型，就會復制一份，互不影響，而如果是對象或者數組，就會只復制對象和數組的引用。

擴展運算符

var obj = { name: "jack" };
var a = [1, 2];
var b = [3, obj];
a.push(...b);
a   // [1, 2, 3, {name: "jack"}]
a[3].name = "rose";
b   // [3, {name: "rose"}]

Object.assign

var obj = { name: "jack" };
var copyObj = Object.assign({}, obj);
obj.name = "rose";
copyObj   // {name: "rose"}

自定義淺復制

function shallowCopy(obj) {
    if (typeof obj !== "object") return;
    var new_obj = obj instanceof Array ? [] : {};

    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            new_obj[key] = obj[key];
        }
    }
    return new_obj;
}
var source = {
    name: "source",
    child: {
        name:"child"
    },
    arr: [1,2,34],
    setName: function() { 
        this.name = "haha"; 
    }
};
var target = shallowCopy(source);
console.log(target);              //Object {name: "source", child:{ name:"child"}, arr: [1,2,34], setName: function }
source.child.name = "lily";
console.log(target.child.name);              //"lily"
source.name = "sam";
console.log(target.name);                   //"source"
source.arr[0] = 5;
console.log(target.arr);                   //"5,2,34"
source.setName = function() { console.log(this.name); };
console.log(target.setName );            //function(){ this.name = "haha";  }

由此可以看出，此方法確實可以復制object和array對象，但無法進行深復制；但是可以復制function。

深復制 對象深復制

利用JSON對象的parse和stringify方法。

var source = {
    name: "source",
    child: {
        name:"child"
    },
    arr: [1,2,34],
    setName: function() { 
        this.name = "haha"; 
    }
};
var target = JSON.parse(JSON.stringify(source));
console.log(target);              //Object {name: "source", child:{ name:"child"}, arr:[1,2,34] }
source.child.name = "lily";
console.log(target.name);              //"child"
source.arr[0] = 5;
console.log(target.arr);              //"1,2,34"

由此可以看出，雖然此方法確實可以復制object和array對象，并且進行了深復制，卻無法復制function。

自定義深復制

function deepCopy(obj) {
    if (typeof obj !== "object") return;
    var new_obj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            new_obj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
        }
    }
    return new_obj;
}
var source = {
    name: "source",
    child: {
        name:"child"
    },
    arr: [1,2,34],
    setName: function() { 
        this.name = "haha"; 
    }
};
var target = deepCopy(source);
console.log(target);              //Object {name: "source", child:{ name:"child"}, arr: [1,2,34], setName: function }
source.child.name = "lily";
console.log(target.child.name);              //"child"
source.name = "sam";
console.log(target.name);                   //"source"
source.arr[0] = 5;
console.log(target.arr);                   //"1,2,34"
source.setName = function() { console.log(this.name); };
console.log(target.setName );            //function(){ this.name = "haha";  }

云服務器 GPU云服務器 javascript復制淺復制深度復制深復制

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

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

JS系列之目錄

摘要：設計模式資源整理操作符小知識點實現發郵件功能數據結構與算法資源整理跨域函數的合成與柯里化系列之防抖節流系列之正則系列之系列之系列之編碼系列之系列之操作符對象中的坐標檢測對象或數組系列之機制系列之構造對象系列之總結系列之淺復制與深復制系列之對 Javascript設計模式資源整理JS操作符JS小知識點JS實現發郵件功能數據結構與算法資源整理跨域函數的合成與柯里化JS系列之防抖節流JS系列...

AaronYuan 2019-08-23 14:39 評論0 收藏0
小tips：JS之淺拷貝與深拷貝

摘要：淺拷貝深拷貝淺拷貝的問題如果父對象的屬性等于數組或另一個對象，那么實際上，子對象獲得的只是一個內存地址，而不是真正拷貝，因此存在父對象被篡改的可能。淺拷貝： function extendCopy(p) { 　var c = {}; 　for (var i in p) { 　　　c[i] = p[i]; 　} 　return c; } 深拷貝： function deepCopy(p...

Soarkey 2019-08-21 17:37 評論0 收藏0
JavaScript之淺、深拷貝

摘要：前言里面淺拷貝和深拷貝是非常關鍵的知識點，今天就來通過本文清楚的了解深淺拷貝以及該如何實現這兩種拷貝方式。對象的拷貝又分為淺拷貝和深拷貝。印證了上述所說的對于所有的基本類型，簡單的賦值已經是實現了深拷貝。前言 JavaScript里面淺拷貝和深拷貝是非常關鍵的知識點，今天就來通過本文清楚的了解深淺拷貝以及該如何實現這兩種拷貝方式。深淺拷貝的區別拷貝：其實就是一個對象復制給另外...

leanxi 2019-08-26 10:37 評論0 收藏0
JavaScript 數據結構與算法之美 - 棧內存與堆內存、淺拷貝與深拷貝

摘要：棧內存與堆內存淺拷貝與深拷貝，可以說是前端程序員的內功，要知其然，知其所以然。棧內存與堆內存中的變量分為基本類型和引用類型。 showImg(https://segmentfault.com/img/bVbuvnj?w=900&h=250); 前言想寫好前端，先練好內功。棧內存與堆內存、淺拷貝與深拷貝，可以說是前端程序員的內功，要知其然，知其所以然。筆者寫的 JavaScrip...

dailybird 2019-08-23 18:26 評論0 收藏0
JavaScript中的淺拷貝與深拷貝

摘要：所以，深拷貝是對對象以及對象的所有子對象進行拷貝實現方式就是遞歸調用淺拷貝對于深拷貝的對象，改變源對象不會對得到的對象有影響。為什么會有淺拷貝與深拷貝什么是淺拷貝與深拷貝如何實現淺拷貝與深拷貝好了，問題出來了，那么下面就讓我們帶著這幾個問題去探究一下吧！如果文章中有出現紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過以下↓ 數據類型在開始了解淺拷貝與深拷貝之前，讓我們先...

546669204 2019-08-26 18:27 評論0 收藏0