如何實現JavaScript中深拷貝和淺拷貝?

拷貝:其實就是一個對象複製給另外一整個對象,讓對象相互不影響。

對象的拷貝又分為淺拷貝和深拷貝:對象的淺拷貝(只拷貝一層)

對象的深拷貝(拷貝多層)

淺拷貝和深拷貝只針對object和Array這樣的複雜的對象

所謂的淺拷貝,只是拷貝了基本類型的數據,對於引用的類型數據,複製後也是會發生引用,這種拷貝就叫做淺拷貝

而深拷貝,要求要複製一個複雜的對象,這就可以利用遞歸的思想來實現,省性能又不會發生引用,它不僅將原對象的各個屬性逐個複製出去,而且將原對象各個屬性所包含的對象也依次採用深複製的方法遞歸複製到新對象上。這就不會存在上面 obj 和 shallowObj 的 arr 屬性指向同一個對象的問題。

var a = { name : “hello” };

實現淺拷貝

1、ES6:object.assign()

var a = { name : “hello” };

var b = Object.assign( { },a );

b.name = “hi”;

console.log(a);

2、展開運算符……

var a = { name : “hello” };

var b = { …a}; => 擴展運算符用三個點號表示,功能是把數組或類數組對象展開成一系列用逗號隔開的值

b.name = “hi”;

console.log(a);

3、自己封裝函數實現for in

var a = { name : “hello” };

var b = copy(a);

b.name = ‘hi’;

console.log(a);

function copy(obj){

var result = { };

for(var attr in obj ){

result [attr] = obj[attr];

}

return result;

}

實現深拷貝

JS實現深拷貝則可以應用JSON.parse()JSON.Stringify()的方法

對象自變量和JSON的區別

1對象自變量是對象的操作 可以又方法和屬性JSON數據的格式。規定數據的操作

2JSON只能寫基本類型的數但是還有JSON

3JSON要求屬性(key)和值都必須添加雙引號

深拷貝實現

1、var a = {name = {age:20}};

var b = JSON.parse(JSON.Stringify(a));

b.name.age =30;

console.log(a);

必須針對對象JSON這樣的深拷貝是有侷限性的

2、已封裝函數與實現for in +遞歸

var a = {name : {age : 20}};

var b =deepcopy(a);

b.name.age = 30 ;

console.log(a);

function deepcopy (obj){

var result = { };

for(var attr in obj){}

if(type of obj[attr] === ‘object’){

result [attr] = deepcopy(obj[attr]);

}

else{

result[attr] = obj[attr];

}

}

Return result;

}

之所以會出現了深拷貝和淺拷貝,究其根本是因為JS種的變量包含了不同類型的數據值:基本類型和引用類型;同時其中變量的存儲方式也不用Object屬於堆內存的儲存方式;並且JS的值的傳遞方式如值傳遞和址傳遞的會出現不同,所以才會出現這一系列的問題,因此才會使用深拷貝和淺拷貝來解決這些問題。

其實對於javascript的深拷貝和淺拷貝的方法還有很多,這裡只是介紹了常見的幾種方式。


分享到:


相關文章: