【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用、克隆對象、復制數(shù)組

ccj659 發(fā)布于2019-08-23 16:14 / 1711人閱讀

摘要：前端芝士樹淺拷貝深拷貝以及的作用首先還是得回到的基本數(shù)據(jù)類型。值類型深拷貝數(shù)值布爾值字符串。它接受任意數(shù)量的源對象，主要作用就是枚舉它們的所有屬性并分配給。

【前端芝士樹】淺拷貝、深拷貝以及Object.assign()的作用

首先還是得回到Javascript的基本數(shù)據(jù)類型。

值類型[深拷貝]：數(shù)值Num、布爾值Boolean、字符串String、null、undefined。

基本類型值是指在棧內(nèi)存保存的簡單數(shù)據(jù)段，在復制基本類型值的時候，會開辟出一個新的內(nèi)存空間，將值復制到新的內(nèi)存空間，舉個栗子：

var a = 1;
var b = a;
a = 2；
console.log(a);//輸出2；
console.log(b);//輸出1；

引用類型[淺拷貝]：對象、數(shù)組、函數(shù)等。

用類型值是保存在堆內(nèi)存中的對象，變量保存的只是指向該內(nèi)存的地址，在復制引用類型值的時候，其實只復制了指向該內(nèi)存的地址，舉個栗子：

var a={b:1}
var a2 = a;
a2.b = 2;
console.log(a)  // 輸出 {b: 2}

所以深拷貝問題的出現(xiàn)就是為了解決引用類型的數(shù)據(jù)的淺拷貝特性

實現(xiàn)對象深拷貝的幾種方法

JSON.parse() && JSON.stringfy()
將該對象轉(zhuǎn)換為其 JSON 字符串表示形式，然后將其解析回對象。這感覺有點太過簡單了，但它確實有效：

const obj = /* ... */;
const copy = JSON.parse(JSON.stringify(obj));

優(yōu)點是，如果沒有循環(huán)對象，并且不需要保留內(nèi)置類型，使用該方法皆可以獲得最快的跨瀏覽器的克隆性能。
這里的缺點是創(chuàng)建了一個臨時的，可能很大的字符串，只是為了把它重新放回解析器。
另一個缺點是這種方法不能處理循環(huán)對象，而且循環(huán)對象經(jīng)常發(fā)生。
例如，當我們構(gòu)建樹狀數(shù)據(jù)結(jié)構(gòu)，其中一個節(jié)點引用其父級，而父級又引用其子級。

const x = {};
const y = {x};
x.y = y; // Cycle: x.y.x.y.x.y.x.y.x...
const copy = JSON.parse(JSON.stringify(x)); // throws!

另外，諸如 Map, Set, RegExp, Date, ArrayBuffer 和其他內(nèi)置類型在進行序列化時會丟失。

MessageChannel && postMessage 結(jié)構(gòu)化克隆算法
這種方法的缺點是它是異步的。雖然這并無大礙，但是有時候你需要使用同步的方式來深度拷貝一個對象。

function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

const obj = /* ... */;
const clone = await structuralClone(obj);

Array.slice()和Array.concat()方法屬于深拷貝嗎？

這個我都被弄糊涂了，網(wǎng)上找了些資料才捋清了一下。

對于一維數(shù)組而言：

arrayObj.slice(start, [end])

var arr1 = ["1","2","3"];
var arr2 = arr1.slice(0);
arr2[1] = "9";
console.log("數(shù)組的原始值：" + arr1 ); //1,2,3
console.log("數(shù)組的新值：" + arr2 ); //1,9,3

arrayObj.concat(arr1,arr2 ... )

var arr1 = ["1","2","3"];
var arr2 = arr1.concat();
arr2[1] = "9";
console.log("數(shù)組的原始值：" + arr1 ); //1,2,3
console.log("數(shù)組的新值：" + arr2 );//1,9,3

那數(shù)組里面如果包含對象呢？：

var arr1 = [{"name":"weifeng"},{"name":"boy"}];//原數(shù)組
var arr2 = [].concat(arr1);//拷貝數(shù)組
arr1[1].name="girl";
console.log(arr1);// [{"name":"weifeng"},{"name":"girl"}]
console.log(arr2);//[{"name":"weifeng"},{"name":"girl"}]

var a1=[["1","2","3"],"2","3"],a2;
a2=a1.slice(0);
a1[0][0]=0; //改變a1第一個元素中的第一個元素
console.log(a2[0][0]);  //影響到了a2

從上面兩個例子可以看出，由于數(shù)組內(nèi)部屬性值為引用對象，因此使用slice和concat對對象數(shù)組的拷貝，整個拷貝還是淺拷貝，拷貝之后數(shù)組各個值的指針還是指向相同的存儲地址。

Array.slice() 和 Array.concat() 這兩個方法，僅適用于對不包含引用對象的一維數(shù)組的深拷貝!

Object.assign() 方法以及對象擴展操作符 ... Object.assign() 方法

Object.assign()考察點是ES6中實現(xiàn)對象復制，關(guān)于Object.assign()這個函數(shù)這里有一篇文章講得非常詳細明白。

ES6提供了Object.assign()，用于合并/復制對象的屬性。

Object.assign(target, source_1, ..., source_n)

下面是一個例子

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

那么Object.assign()方法是淺拷貝還是深拷貝呢？請看下面這個例子：

function mutateDeepObject(obj) {
  obj.a.thing = true;
}

const obj = {a: {thing: false}};
const copy = Object.assign({}, obj);
mutateDeepObject(copy)
console.log(obj.a.thing); // prints true

Object.assign(target, sources...)是一個簡單的拷貝對象的方式，屬于淺拷貝。它接受任意數(shù)量的源對象，主要作用就是枚舉它們的所有屬性并分配給target。

對象擴展操作符 ...

使用對象擴展操作符 ...，對象自己的可枚舉屬性可以被拷貝到新對象。

const obj = { a: 1, b: 2, c:{d:"d"} }
const shallowClone = { ...obj }
shallowClone.a = "a";
shallowClone.c.d = "4";
console.log(obj); // a: 1, b: 2, c: {d: "4"}}
console.log(shallowClone); // a: "a", b: 2, c: {d: "4"}}

其他的看上去像是對象深拷貝，實質(zhì)是淺拷貝的方法

const obj = { a: 1, b: 2, c:{d:"d"} }
const shallowClone = Object.keys(obj).reduce((acc, key) => (acc[key] = obj[key], acc), {});
shallowClone.a = "a";
shallowClone.c.d = "4";
console.log(obj); // a: 1, b: 2, c: {d: "4"}}
console.log(shallowClone); // a: "a", b: 2, c: {d: "4"}}