js 中的深拷貝和淺拷貝

2022-04-20 15:01:20 字數 1989 閱讀 7257

對於字串型別，淺複製是對值的複製，對於物件來說，淺複製是對物件位址的複製，並沒 有開闢新的棧，也就是複製的結果是兩個物件指向同乙個位址，修改其中乙個物件的屬性，則另乙個物件的屬性也會改變，

舉個栗子

var arr = [1,2,3];


var arrcopy =arr;


arrcopy[0] = 100; // 修改新陣列的第0個值；


arr[0]===arrcopy[0]; //true 


原來的陣列四不四也變了
而很多數情況下我們需要的是 新得到的物件與原來的物件互不相干，於是乎：

深複製則是開闢新的棧，兩個物件對應兩個不同的位址，修改乙個物件的屬性，不會改變另乙個物件的屬性。我們來看看以下方法。

//


slice


var a = [1,2,3];


var b =a.slice(); 


b === a; //


false


//concat


var a = [1,2,3];


var b =a.concat(); 


b === a; //


false


var a = [[1,2,3],4,5];


var b =a.slice();


a[0][0]===b[0][0]; //


true 


true 了我去，第二層的複製明顯不是 deep copy 啊。
我們可以通過$.extend()方法來完成  深淺複製。這個方法可以傳入乙個引數:deep(true or false)，表示是否執行深複製(如果是深複製則會執行遞迴複製)。

var x =}


};var y = $.extend({}, x), //淺 


copy


z = $.extend(true, {}, x); //


深 copy


y.c.f === x.c.f //


true


z.c.f === x.c.f //


false $.extend 的用法很有意思，不單單只是 深淺copy， 有興趣的崽兒可以到這個同學這裡看看，總結的挺好
針對純 json 資料物件的深複製，使用 json 全域性物件的parse和stringify方法來實現深複製也算是乙個簡單討巧的方法。

josn 物件中的 stringify 可以把乙個 js 物件序列化為乙個 json 字串，parse 可以把 json 字串反序列化為乙個 js 物件，這兩個方法實現的是深拷貝。然而使用這種方法會有一些隱藏的坑，

它能正確處理的物件只有 number, string, boolean, array, 扁平物件（function 就歇菜了，原型鏈也沒了），即那些能夠被 json 直接表示的資料結構。

var arr = [0,1,2];


var arrcopy = json.parse(json.stringify(arr));


arrcopy[0] = 333;


arr[0]===arrcopy[0];  // false


did u see that, 互不干擾，和諧盛世。
array 的 slice 和 concat 方法 和 jquery 中的 extend 複製方法，他們都會複製第一層的值，對於 第一層 的值都是 深拷貝，


而到 第二層 的時候 array 的 slice 和 concat 方法就是 複製引用 ，jquery 中的 extend 複製方法 則 取決於 你的 第乙個引數， 也就是是否進行遞迴複製。


而  json.parse(json.stringify(arr)) 在排除 被複製物件的 function 和原型鏈 之外，就是完全的複製啦 。


今天，就醬紫。88了。
 
Js中的深拷貝和淺拷貝
var a 10 var b a 更換值，a,b互不影響 引用型別拷貝 var a 10 var b a b 20 這裡是給b乙個新的位址 console.log a 列印結果為10 var a 10 var b a b.push 20 這裡在b原有的位址上加了20 console.log a 列印...


js中的淺拷貝和深拷貝
1.概念 淺拷貝 是將乙個物件的屬性值複製到另乙個物件，如果有的屬性的值為引用型別的話，那麼會將這個引用的位址複製給物件，因此，兩個物件會有同乙個引用型別的引用，淺拷貝可以使用object.assign和展開運算子 將乙個陣列轉為用逗號分隔的引數序列 來實現。深拷貝 是將乙個物件的屬性值複製到另乙個...


JS深拷貝和淺拷貝
js中物件分為基本型別和復合 引用 型別，基本型別存放在棧記憶體，復合 引用 型別存放在堆記憶體中 堆記憶體中用於存放由new建立的物件，棧記憶體存放一些基本型別的變數和物件的引用變數 對於簡單變數，記憶體小，直接複製不會發生引用 var a 123 var b a a 123456 console...