JavaScript 深拷貝性能分析

MyFaith 發(fā)布于2019-08-26 11:35 / 1000人閱讀

摘要：它接受任意數(shù)量的源對(duì)象，枚舉它們的所有屬性并分配給。所以現(xiàn)在怎么辦有幾種方法可以創(chuàng)建一個(gè)對(duì)象的深拷貝。為了防止發(fā)生任何意外，請(qǐng)使用而不是。我想測(cè)量哪種方法是最高性能的。圖表以下是，和中不同技術(shù)的性能。

原文：Deep-copying in JavaScript - DasSur.ma

如何在 JavaScript 中拷貝一個(gè)對(duì)象？對(duì)于這個(gè)很簡(jiǎn)單的問(wèn)題，但是答案卻不簡(jiǎn)單。

引用傳值

~~在 JavaScript 中所有的東西都是引用傳遞~~(原文有誤，稍后寫(xiě)篇批判文 “By Value” or “By Reference” in JavaScript · Issue #22)。

如果你不知道什么意思，看看下面的例子：

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

const obj = {a: false};
mutate(obj)
console.log(obj.a); // 輸出 true

函數(shù) mutate 改變了它的參數(shù)。在值傳遞的場(chǎng)景中，函數(shù)的形參只是實(shí)參的一個(gè)副本——a copy——當(dāng)函數(shù)調(diào)用完成后，并不改變實(shí)參。但是在 JavaScript 這種引用傳遞的場(chǎng)景中，函數(shù)的形參和實(shí)參指向同一個(gè)對(duì)象，當(dāng)參數(shù)內(nèi)部改變形參的時(shí)候，函數(shù)外面的實(shí)參也被改變了。

因此在某些情況下，你需要保留原始對(duì)象，這時(shí)你需要把原始對(duì)象的一個(gè)拷貝傳入到函數(shù)中，以防止函數(shù)改變?cè)紝?duì)象。

淺拷貝：Object.assign()

一個(gè)簡(jiǎn)單的獲取對(duì)象拷貝的方式是使用 Object.assign(target, sources...)。它接受任意數(shù)量的源對(duì)象，枚舉它們的所有屬性并分配給target。如果我們使用一個(gè)新的空對(duì)象target，那么我們就可以實(shí)現(xiàn)對(duì)象的復(fù)制。

const obj = /* ... */;
const copy = Object.assign({}, obj);

然而這只是一個(gè)淺副本。如果我們的對(duì)象包含其它對(duì)象作為自己的屬性，它們將保持共享引用，這不是我們想要的：

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 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象。該方法使用源對(duì)象的[[Get]]和目標(biāo)對(duì)象的[[Set]]，所以它會(huì)調(diào)用相關(guān) getter 和 setter。因此，它分配屬性，而不僅僅是復(fù)制或定義新的屬性。如果合并源包含getter，這可能使其不適合將新屬性合并到原型中。為了將屬性定義（包括其可枚舉性）復(fù)制到原型，應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

所以現(xiàn)在怎么辦？有幾種方法可以創(chuàng)建一個(gè)對(duì)象的深拷貝。

注意：也許有人提到了對(duì)象解構(gòu)運(yùn)算，這也是淺拷貝。

JSON.parse

創(chuàng)建對(duì)象副本的最古老方法之一是：將該對(duì)象轉(zhuǎn)換為其 JSON 字符串表示形式，然后將其解析回對(duì)象。這感覺(jué)有點(diǎn)壓抑，但它確實(shí)有效：

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

這里的缺點(diǎn)是你創(chuàng)建一個(gè)臨時(shí)的，可能很大的字符串，只是為了把它重新放回解析器。另一個(gè)缺點(diǎn)是這種方法不能處理循環(huán)對(duì)象。而且循環(huán)對(duì)象經(jīng)常發(fā)生。例如，當(dāng)您構(gòu)建樹(shù)狀數(shù)據(jù)結(jié)構(gòu)，其中一個(gè)節(jié)點(diǎn)引用其父級(jí)，而父級(jí)又引用其子級(jí)。

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)置類(lèi)型在進(jìn)行序列化時(shí)會(huì)丟失。

Structured Clone 結(jié)構(gòu)化克隆算法

Structured cloning 是一種現(xiàn)有的算法，用于將值從一個(gè)地方轉(zhuǎn)移到另一地方。例如，每當(dāng)您調(diào)用postMessage將消息發(fā)送到另一個(gè)窗口或 WebWorker 時(shí)，都會(huì)使用它。關(guān)于結(jié)構(gòu)化克隆的好處在于它處理循環(huán)對(duì)象并支持大量的內(nèi)置類(lèi)型。問(wèn)題是，在編寫(xiě)本文時(shí)，該算法并不能直接使用，只能作為其他 API 的一部分。我想我們應(yīng)該了解一下包含哪些，不是嗎。。。

MessageChannel

正如我所說(shuō)的，只要你調(diào)用postMessage結(jié)構(gòu)化克隆算法就可以使用。我們可以創(chuàng)建一個(gè) MessageChannel 并發(fā)送消息。在接收端，消息包含我們?cè)紨?shù)據(jù)對(duì)象的結(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);

這種方法的缺點(diǎn)是它是異步的。雖然這并無(wú)大礙，但是有時(shí)候你需要使用同步的方式來(lái)深度拷貝一個(gè)對(duì)象。

History API

如果你曾經(jīng)使用history.pushState()寫(xiě)過(guò) SPA，你就知道你可以提供一個(gè)狀態(tài)對(duì)象來(lái)保存 URL。事實(shí)證明，這個(gè)狀態(tài)對(duì)象使用結(jié)構(gòu)化克隆 - 而且是同步的。我們必須小心使用，不要把程序邏輯使用的狀態(tài)對(duì)象搞亂了，所以我們需要在完成克隆之后恢復(fù)原始狀態(tài)。為了防止發(fā)生任何意外，請(qǐng)使用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);

然而，僅僅為了復(fù)制一個(gè)對(duì)象，而使用瀏覽器的引擎，感覺(jué)有點(diǎn)過(guò)分。另外，Safari 瀏覽器對(duì)replaceState調(diào)用的限制數(shù)量為 30 秒內(nèi) 100 次。

Notification API

在發(fā)了一條推文之后，Jeremy Banks 向我展示了第三種方法來(lái)利用結(jié)構(gòu)化克?。篘otification API。

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

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

短小，簡(jiǎn)潔。我喜歡它！

但是，它需要瀏覽器內(nèi)部的權(quán)限機(jī)制，所以我懷疑它是很慢的。由于某種原因，Safari 總是返回undefined。

Performance extravaganza

我想測(cè)量哪種方法是最高性能的。在我的第一次（天真的）嘗試中，我拿了一個(gè)小 JSON 對(duì)象，并通過(guò)不同的方式克隆對(duì)象 1 千次。幸運(yùn)的是，Mathias Bynens 告訴我，當(dāng)你添加屬性到一個(gè)對(duì)象時(shí)，V8有一個(gè)緩存。所以我是在給緩存做基準(zhǔn)測(cè)試。為了確保我永遠(yuǎn)不會(huì)碰到緩存，我編寫(xiě)了一個(gè)函數(shù)，使用隨機(jī)密鑰名稱(chēng)生成給定深度和寬度的對(duì)象，并重新運(yùn)行測(cè)試。

圖表！

以下是 Chrome，F(xiàn)irefox 和 Edge 中不同技術(shù)的性能。越低越好。

結(jié)論

那么我們從中得到了什么呢？

如果您沒(méi)有循環(huán)對(duì)象，并且不需要保留內(nèi)置類(lèi)型，則可以使用跨瀏覽器的JSON.parse(JSON.stringify())獲得最快的克隆性能，這讓我感到非常驚訝。

如果你想要一個(gè)適當(dāng)?shù)慕Y(jié)構(gòu)化克隆，MessageChannel是你唯一可靠的跨瀏覽器的選擇。

如果瀏覽器平臺(tái)直接提供一個(gè) structuredClone()函數(shù)，會(huì)不會(huì)更好？我當(dāng)然這樣認(rèn)為，最新的 HTML 規(guī)范正在討論這個(gè) Synchronous clone = global.structuredClone(value, transfer = []) API · Issue #793 · whatwg/html。