javascript之深淺拷貝

LMou 發(fā)布于2019-08-26 11:34 / 3280人閱讀

摘要：為何寫最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。深拷貝如果給放到新的內(nèi)存中，將的各個(gè)屬性都復(fù)制到新內(nèi)存里，就是深拷貝。安全的值是指能夠呈現(xiàn)為有效格式的值。參考文檔冴羽的專題之深淺拷貝深拷貝與淺拷貝的實(shí)現(xiàn)

為何寫：

最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。廢話不多說，我們來一起復(fù)習(xí)一下吧，也希望留下您寶貴意見。

何為深淺拷貝？

深拷貝和淺拷貝是只針對(duì)Object和Array這樣的復(fù)雜類型的

1.淺拷貝：

我們先來看2個(gè)栗子：

let a = {
 name: "azi"
}
let b = a;
b.name = "zhangsan";
console.log(a.name);  // zhangsan
console.log(b.name); // zhangsan

let a = ["hello","world"]
let b = a;
b[1]= "azi";
console.log(a);  // ["hello", "azi"]
console.log(b); // ["hello", "azi"]

從栗子中可以看出：

a和b指向同一塊內(nèi)存，所以修改其中任意的值，另一個(gè)值都會(huì)隨之變化，這就是淺拷貝。

2.深拷貝：

如果給b放到新的內(nèi)存中，將a的各個(gè)屬性都復(fù)制到新內(nèi)存里，就是深拷貝。

換句話說，也就是b的屬性改變時(shí)，a的屬性不會(huì)跟著變化。

常用的實(shí)現(xiàn)方法有哪些？

1.淺拷貝：

數(shù)組：

Array.slice()、  Array.concat()、 ...

對(duì)象：

Object.assign()、 ...

栗子：

// concat concat方法不會(huì)改變this或任何作為參數(shù)提供的數(shù)組，而是返回一個(gè)淺拷貝，它包含與原始數(shù)組相結(jié)合的相同元素的副本

let arr = ["old", 1, true, null, undefined];
let new_arr1 = arr.concat();
new_arr1[0] = "new";
console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr1) // ["new", 1, true, null, undefined]

// slice slice()方法返回一個(gè)從開始到結(jié)束（不包括結(jié)束）選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對(duì)象

let new_arr2 = arr.slice();
new_arr2[0] = "new";
console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr2) // ["new", 1, true, null, undefined]

// ... 擴(kuò)展運(yùn)算符 復(fù)制數(shù)組時(shí)候, 拓展語句只會(huì)進(jìn)行淺復(fù)制, 因此如下所示, 它并不適合復(fù)制多維數(shù)組 (與Object.assign() 相同

let new_arr3 = [...arr];
new_arr3[0] = "new";
console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr3) // ["new", 1, true, null, undefined]

// Object.assign() Object.assign方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象

let obj1 = {a:0, b:{c:0}};
let obj2 = Object.assign({},obj1);
obj2.b.c =2 ;
obj2.a =2 ;
console.log(obj1); // {a:0,b:{c:2}}
console.log(obj2); // {a:2,b:{c:2}}

// ...
let obj3 = {...obj1};
obj3.b.c =3 ;
obj3.a =3 ;
console.log(obj1); // {a:0,b:{c:3}}
console.log(obj3); // {a:3,b:{c:3}}

2.深拷貝：

JSON.parse( JSON.stringify(arr) )

在使用JSON.stringify() 需要注意一下幾點(diǎn)：

1.JSON.stringify(..) 在將 JSON 對(duì)象序列化為字符串時(shí)和 toString() 的效果基本相同，只不過序列化的結(jié) 果總是字符串:

JSON.stringify( 42 ); // "42"
JSON.stringify( "42" ); // ""42""(含有雙引號(hào)的字符串)
JSON.stringify( null ); // "null"
JSON.stringify( true ); // "true"

2.所有安全的 JSON 值(JSON-safe)都可以使用 JSON.stringify(..) 字符串化。安全的 JSON 值是指能夠呈現(xiàn)為有效 JSON 格式的值。
3.undefined、function、symbol (ES6+)和包含循環(huán)引用(對(duì)象之間相互引用，形成一個(gè)無限循環(huán))的對(duì)象都不符合 JSON結(jié)構(gòu)標(biāo)準(zhǔn)，支持 JSON 的語言無法處理它們
4.JSON.stringify(..) 在對(duì)象中遇到 undefined、function 和 symbol 時(shí)會(huì)自動(dòng)將其忽略，在
數(shù)組中則會(huì)返回 null(以保證單元位置不變)。
例如:

 JSON.stringify( undefined ); // undefined
 JSON.stringify( function(){} );  // undefined
 JSON.stringify([1,undefined,function(){},4]); // "[1,null,null,4]"
 JSON.stringify({ a:2, b:function(){} }) // "{"a":2}"

對(duì)包含循環(huán)引用的對(duì)象執(zhí)行 JSON.stringify(..) 會(huì)出錯(cuò)。

當(dāng)然也可以用JQ的extend 函數(shù)的實(shí)現(xiàn)，這里就不具體說了。

參考文檔：
冴羽的JavaScript專題之深淺拷貝
Alloyteam深拷貝與淺拷貝的實(shí)現(xiàn)