JS里深拷貝和淺拷貝的釋義

zollero 發布于2019-08-23 12:22 / 834人閱讀

摘要：本文解釋中深拷貝和淺拷貝的區別。深拷貝深拷貝指遞歸的復制對象的屬性給新對象。有些時候一層的深拷貝被認為是淺拷貝，比如的值是一個對象，淺拷貝出來的新對象直接引用了原對象的對象，所以也會相互影響的。

本文解釋javascript中深拷貝和淺拷貝的區別。

淺拷貝/Shallow Copy

淺拷貝指拷貝了引用值。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var shallowCopy = original;
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

shallowCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

https://smoothprogramming.com...

注意:

淺拷貝中，原始值和副本共享同樣的屬性。

淺拷貝只拷貝了對象引用。

淺拷貝中如果修改了拷貝對象會影響到原始對象，反之亦然。

js中，數組和對象的賦值默認為淺拷貝。

深拷貝/Deep Copy

深拷貝指遞歸的復制對象的屬性給新對象。jquery中我們使用$.extend去進行深拷貝。

$.extend(deepCopy, target, object1, [objectN] )

第一個參數傳入true，指明此為深拷貝，target為目標對象，object1，原對象。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var deepCopy = $.extend(true, {}, original);
console.log(JSON.stringify(deepCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

deepCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}
console.log(JSON.stringify(deepCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

https://smoothprogramming.com...

注意:

深拷貝中，副本和原對象不共享屬性

深拷貝遞歸的復制屬性

深拷貝的副本不會影響到原對象，反之亦然

js中所有的原始數據類型默認執行深拷貝，比如Boolean, null, Undefined, Number,String等

譯者注：

實際工作中，通常所謂clone一個對象一般都是指深拷貝，即拷貝一個對象的副本。

有些時候一層的深拷貝被認為是淺拷貝，比如shallowCopy({a:1,b:{hello:"world}}),b的值是一個對象，淺拷貝出來的新對象直接引用了原對象的value對象，所以也會相互影響的。

實際工作中，深拷貝（遞歸的對對象里每一層值和對象進行拷貝）應用很廣泛，我認為淺拷貝只變成了一種概念，因為每一個需要clone的地方都是深拷貝。

復制一個副本對象也可以通過工廠函數，比如vuejs里的data。

GPU云服務器云服務器深拷貝和淺拷貝 js拷貝內存數據庫 linux的拷貝數組拷貝的java

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

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

js深拷貝和淺拷貝

摘要：深拷貝和淺拷貝深拷貝和淺拷貝的示意圖大致如下淺拷貝只復制指向某個對象的指針，而不復制對象本身，新舊對象還是共享同一塊內存。參考文章什么是深拷貝和淺拷貝及其實現方式走在前端的大道上本篇將自己讀過的相關文章中，對自己有啟發的章節片段總結在這（會對原文進行刪改）,會不斷豐富提煉總結更新。淺拷貝 var m = { a: 10, b: 20 } var n = m; n.a = 15; ...

MAX_zuo 2019-08-21 18:46 評論0 收藏0
淺探js深拷貝和淺拷貝

摘要：接下來就讓我們更細致的探究中的深淺拷貝。總結以上對深拷貝和淺拷貝做了簡單的介紹，在深拷貝的實現上也只介紹了最簡單的實現形式，并未考慮復雜情況以及相應優化，想要對深拷貝有更深入的了解，需要大家花時間去深入研究，或者可以關注我后續文章的動態。對象和數組的拷貝對我來說一直都是一個比較模糊的概念，一直有點一知半解，但是在實際工作中又偶爾會涉及到，有時候還會一不小心掉坑里，不知道大家有沒有同樣...

habren 2019-08-23 13:01 評論0 收藏0
深拷貝和淺拷貝的區別

摘要：深拷貝和淺拷貝的區別背景最近在用框架寫頁面，賦值給中的對象時會出現一個問題，賦值和被賦值對象之中任何一個有變化，另一個也會隨之變化。深拷貝和淺拷貝的區別背景：最近在用vue框架寫頁面，賦值給Vue.$data中的對象時會出現一個問題，賦值和被賦值對象之中任何一個有變化，另一個也會隨之變化。例如： var b = { foo: 123 }; var vm = new Vue(...

suemi 2019-08-21 17:07 評論0 收藏0
重新梳理下js中的深拷貝和淺拷貝

摘要：參考鏈接淺拷貝最簡單的淺拷貝就賦值。所謂的淺拷貝就是，后面的對象和前面的對象在第一層數據結構中指向同一個堆地址。但是如果前面的數據不止有一層，如此時，使用和方式實現的都是淺拷貝。深拷貝管你怎么變，互不影響。參考鏈接：http://www.cnblogs.com/st-les...https://blog.csdn.net/hj7jay/... 淺拷貝： 1.最簡單的淺拷貝就賦值。由于...

kun_jian 2019-08-23 15:18 評論0 收藏0
深入JavaScript中深拷貝和淺拷貝

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

TalkingData 2019-08-22 17:58 評論0 收藏0