JS深拷貝和淺拷貝

2021-08-19 05:55:56 字數 2849 閱讀 8056

js中物件分為基本型別和復合(引用)型別,基本型別存放在棧記憶體,復合(引用)型別存放在堆記憶體中

堆記憶體中用於存放由new建立的物件,棧記憶體存放一些基本型別的變數和物件的引用變數

對於簡單變數,記憶體小,直接複製不會發生引用:

var a =

123;

var b = a;

a =123456;

console.

log(a);//123456

console.

log(b);//123

var a =

'abc';

var b = a;

a ='abcde';

console.

log(a);//abcde

console.

log(b);//abc

而對於物件的這種記憶體占用的比較大的來說,直接讓複製的東西等於要複製,就會發生引用,因為這種複製將複製的東西指向了要複製的東西,簡單的說,就是兩個都指向了同乙個空間,如果改變其中乙個,另乙個也會發生變化。

引用只發生在物件身上

var arr1 = [1,2,3];

var arr2 = arr2;

arr1.push(4);

console.log(arr1);//1234

console.log(arr2);//1234

arr2.push(5);

console.log(arr1);//12345

condole.log(arr2);//12345

es6新方法用於複製陣列,避免發生引用的方法

方法一:array.from(要複製的陣列)

var arr1 = [1,2,3];

var arr2 = array.from(arr1);

arr.push(4);

console.log(arr1);//1234

console.log(arr2);//123

arr2.push(5);

console.log(arr1);

console.log(arr2);//1235

方法2: …

var arr1 = [1,2,3];

var arr2 = [..arr1];

arr1.push(4);

console.log(arr1);//1234

console.log(arr2);//123

arr2.push(5);

console.log(arr1);//1234

console.log(arr2);//1235

第二種方法也可以用在函式的行參上面

function

show

(...ar1)

show(1,2,3,4);

或者通過迴圈來複製:

var arr1 = [1,2,3,4];

var arr2 = ;

for(var i = 0;i5);

arr2.push(6);

console.log(arr1);//12345

console.log(arr2);//12346

//或者是json

var json = ;

var json2 = {};

for(var name in json1)

console.log(json.stringfy(json1));//;

console.log(json.stringfy(json2));//

json1.a = 1;

json2.b = 2;

console.log(json.stringfy(json1));//

console.log(json.stringfy(json2));//

深複製和淺複製最根本的區別在是否真正獲取了乙個物件的實體而不是引用

1.深複製在計算機中開闢了一塊記憶體位址用於存放複製的物件

2.淺複製僅僅指向被複製的記憶體位址,如果原位址物件被改變了,那麼淺複製出來的物件也會物件相應的改變。

所謂的淺複製,只是拷貝了基本型別資料,而引用型別資料,複製後也是會發生引用,我們把這種拷貝叫做淺複製(淺拷貝)

var json1 = 

function

copy

(obj1) ;

for (var i in obj1)

return obj2;

}var json2 = copy(json1);

json1.arr1.push(4);

alert(json1.arr1); //1234

alert(json2.arr1) //1234

而深複製的話,我們要求複製乙個複雜的物件,那麼我們就可以利用遞迴的思想來做,考慮提公升效能又不會發生引用

var json1 = ,]}

var json2 = {};

//最初的時候給他乙個初始值或者他自己本身就是乙個json

var obj2 = obj2||{};

for(var name on obj1);

copy(obj1[name],obj2[name]);

}else

}return obj2;

}json2 = copy(json1,json2);

json1.arr1.push(6);

console.log(json1.arr1);//123456

console.log(jaon2.arr1);//12345

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 ...

js淺拷貝和深拷貝

只複製物件的引用位址,兩個物件指向同乙個記憶體位址,所以修改其中任意乙個的值,另乙個也會隨之改變,這就是淺拷貝。1.賦值 var m var n m n.a 15 console.log m.a 15m.a會輸出15,因為這是淺拷貝,n和m指向的是同乙個堆,物件複製只是複製的物件的引用。2.遍歷物件...