JavaScript深拷貝

時間 2019-11-05

標籤 javascript 拷貝欄目 JavaScript 简体版

原文原文鏈接

先聲明，此文並不是本人因此，是由github watcher而來。javascript

若是有侵權，請聯繫刪除html

下面是文章的內容：來看看JavaScript中的深拷貝。java

經過引用調用(call by reference)

譯註：經過引用調用可能有點繞，你就當作"用引用做爲參數調用"。git

JavaScript經過引用傳遞全部的東西。若是你不知道這句話的意思，那麼看下這個例子：github

function mutate(obj) {
  obj.a = true;
}

const obj = {a: false};
mutate(obj)
console.log(obj.a); // true
複製代碼

函數mutate更改了做爲參數傳遞的對象。在"經過值調用(call by value)"的環境中，函數會獲得傳遞過來的值，也就是一個拷貝，這個函數使用這個值來一塊兒工做。函數對對象所作的任何更改在該函數以外都不可見。可是在像JavaScript這樣的"經過引用調用"環境中，函數會獲得一個——你已經猜到了——引用，並會改變實際對象自己。所以最後的console.log會打印出true。web

可是在有些時候，你可能想保持你的原始對象而且爲對應的函數建立一個副本。算法

譯：對於這個還不是很瞭解的朋友能夠看下在下的相關資源json

You Don't Know Js -- types&grammer -- cp2 values

原始類型和引用類型的區別

淺拷貝：Object.assign()

拷貝一個對象的一種辦法是使用Object.assign(target, sources…)。他接受任意數量的源對象，枚舉他們本身全部的屬性並將這些屬性分配給target。若是咱們用一個新的空的對象做爲target，咱們基本上是在進行拷貝。瀏覽器

const obj = /* ... */;
const copy = Object.assign({}, obj);
複製代碼

然而，這是一個淺拷貝。若是咱們的對象包含一個對象，那他們將會保持共享引用，這不是咱們想要的結果：緩存

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

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

另外一個潛在的是Object.assign()將getter轉換爲一個單純的屬性。

譯：和getter有什麼關係？來試試：

var myObject = {
	get say() {
		return 'Hi, xiaohesong';
	}
};
console.log('before assign', Object.getOwnPropertyDescriptor(myObject, 'say'))
var obj = Object.assign({}, myObject)
console.log('after assign', Object.getOwnPropertyDescriptor(obj, 'say'));
複製代碼

動手試試，是否是變成了單純的屬性？那再動手試試setter唄？

那麼如今呢？事實證實，有兩種辦法能夠建立對象的深拷貝。

注意：有人詢問關於對象拓展運算符。其實對象拓展也是建立了一個淺拷貝。

譯：關於拓展運算符，能夠看看在下以前介紹的幾個特性。

JSON.parse

有個最古老的方法去建立對象拷貝的是將對象轉換爲字符串表示形式，而後再將他解析回對象的形式。這個感受有些沉重，可是確實能夠有效：

const obj = /* ... */;
const copy = JSON.parse(JSON.stringify(obj));
複製代碼

這裏有個缺點就是你建立了一個臨時的並且可能會很大的字符串，其目的只是爲了轉回到解析器。另外一個缺點是這種方法不能處理循環對象。無論你怎麼認爲，這些都很容易發生。例如，在構建樹狀數據結構時，節點引用其父節點，而父節點又引用其子節點。

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!
複製代碼

此外，像Maps，Sets，RegExps，Dates，ArrayBuffers和其餘內置類型這樣的東西在序列化時會丟失。

譯：對JSON.stringify不瞭解的朋友，能夠看看You Don't Know Js: Types & Grammar cp4: coercion JSON Stringification。

Structured Clone

結構化克隆是一種現有的算法，用於將值從一個領域轉移到另外一個領域。例如，當你調用postMessage將消息發送到另外一個窗口(window)或WebWorker時，就會使用此方法。結構化克隆的好處是它能夠處理循環對象並支持大量的內置類型。問題在於，在編寫本文時，算法不會直接暴露，只能做爲其餘API的一部分。因此咱們必須先看看那些API，不是嗎。。。

MessageChannel

正如我所說，不管什麼時候調用postMessage，都會使用結構化克隆算法(譯：在針對對象的時候，是這種狀況)。咱們能夠建立一個MessageChannel併發送一條消息。在接收端，消息包含原始數據對象的結構克隆。

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);
複製代碼

這種方法的缺點是它是異步的。這也沒什麼大不了的，但有時你須要以一種同步方式來深度拷貝對象。

History API

若是你曾經使用history.pushState()來構建SPA，那麼你就會知道能夠提供一個state對象來保存URL。事實證實，這個state對象在結構的克隆上是同步進行的。咱們必須當心不要打亂任何可能使用state對象的程序邏輯，因此咱們須要在完成克隆後恢復原始state。要防止觸發任何事件，請使用history.replaceState()而不是history.pushState()。

function structuralClone(obj) {
  const oldState = history.state;
  history.replaceState(obj, document.title);
  const copy = history.state;
  history.replaceState(oldState, document.title);
  return copy;
}

const obj = /* ... */;
const clone = structuralClone(obj);
複製代碼

再一次，只是爲了複製一個對象而進入瀏覽器的引擎感受有點重，可是你必須作你必須作的事情。此外，Safari將replaceState的調用數量限制在30秒內100次。

Notification API

Twitter上發了一個推文以後，Jeremy Banks向我展現了第三種方式利用結構化克隆：

function structuralClone(obj) {
  return new Notification('', {data: obj, silent: true}).data;
}

const obj = /* ... */;
const clone = structuralClone(obj);
複製代碼

短小，簡潔。我喜歡他。不過，它基本上是須要在瀏覽器中啓動權限機制，因此我懷疑它很是慢。因爲某種緣由，Safari始終爲數據對象返回undefined。

性能特徵

我想衡量這些方法中哪種是性能最好的。在個人第一次(天真的)嘗試中，我使用了一個小JSON對象，並經過這些不一樣的方法將其拷貝一千次。幸運的是，Mathias Bynens告訴我V8有一個緩存，用於在對象中添加屬性。因此這基本是沒啥參考性了。爲了確保我沒有命中緩存，我編寫了一個函數，它使用隨機命名生成給定深度和寬度的對象，並從新運行測試。