JS的淺拷貝和深拷貝

2022-01-10 01:09:39 字數 1424 閱讀 8890

最近在開發中遇到乙個小問題，就是由於js的淺拷貝導致變數被汙染，突然發現對於

js的變數值傳遞和引用傳值並沒有特別注意，如今總結如下，以備來者考慮。

js的變數分普通型別和引用型別，具體如下：

基本資料型別：string，

boolean

，number

，undefined

，null

；引用資料型別：object(array，

date

，regexp

，function)

；對於普通型別的變數賦值都是值傳遞，而引用型別變數的賦值。例如下面的**：

var b = 3;


var c =b;


b = 2;


console.log(b); //2


console.log(c); 


//3
普通的資料型別變數的賦值，只是值傳遞，變數之間互不影響。而引用型別不同：

var myobj =;


var gift =myobj;


myobj.price = "300.00";


console.log(gift.price); 


console.log(myobj.price);
所以這種引用型別變數的複製是被稱為淺拷貝：新變數的指標指向被複製的變數，當被複製的變數發生變化，新變數也會隨著改變。而我們工作實際中是需要完全拷貝乙個變數，乙個完整備份，這就是深拷貝。

簡單來說，深淺拷貝的原理圖如下：

所以問題來了，怎麼才能實現深拷貝的。

兩種途徑，一種自己使用遞迴的方式去做深拷貝，一種使用第三方庫或者es原生實現。

es6的方式最簡單，結合遞迴**如下：

//


遞迴方式實現深拷貝


function


deepcopy(obj) ;


for (let key in


obj) 


else


; //


es6語法糖，處理當前層次賦值為深拷貝


} }


return


return_obj;


}
第三方庫可以使用loadash

var _ = require('lodash');


var obj1 = }, c: [1, 2, 3] };


var obj2 =_.clonedeep(obj1);


console.log(obj1.b.f === obj2.b.f); //


false

JS深拷貝和淺拷貝

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

JS淺拷貝和深拷貝

1.淺拷貝 copy var obj1 物件存放於堆記憶體中,物件中的鍵值對,值可以為物件,可以為陣列.var obj2 obj1 物件,陣列之間只有引用賦值 obj2.name 撒哈哈 當改動物件obj2的時候,obj1的key對應的value也會更改這是淺拷貝 深拷貝 var obj1 var ...

js深拷貝和淺拷貝

走在前端的大道上 var m var n m n.a 15 這時m.a的值是多少 m.a會輸出15，因為這是淺拷貝，n和m指向的是同乙個堆，物件複製只是複製的物件的引用。深拷貝和上面淺拷貝不同，就是徹底copy乙個物件，而不是copy物件的引用，例如，還是之前的例子，我們這麼寫 var m var ...