JavaScript 深拷貝性能分析

MyFaith 發布于2019-08-26 11:35 / 964人閱讀

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

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

如何在 JavaScript 中拷貝一個對象？對于這個很簡單的問題，但是答案卻不簡單。

引用傳值

~~在 JavaScript 中所有的東西都是引用傳遞~~(原文有誤，稍后寫篇批判文 “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

函數 mutate 改變了它的參數。在值傳遞的場景中，函數的形參只是實參的一個副本——a copy——當函數調用完成后，并不改變實參。但是在 JavaScript 這種引用傳遞的場景中，函數的形參和實參指向同一個對象，當參數內部改變形參的時候，函數外面的實參也被改變了。

因此在某些情況下，你需要保留原始對象，這時你需要把原始對象的一個拷貝傳入到函數中，以防止函數改變原始對象。

淺拷貝：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); // prints true

Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象。該方法使用源對象的[[Get]]和目標對象的[[Set]]，所以它會調用相關 getter 和 setter。因此，它分配屬性，而不僅僅是復制或定義新的屬性。如果合并源包含getter，這可能使其不適合將新屬性合并到原型中。為了將屬性定義（包括其可枚舉性）復制到原型，應使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

所以現在怎么辦？有幾種方法可以創建一個對象的深拷貝。

注意：也許有人提到了對象解構運算，這也是淺拷貝。

JSON.parse

創建對象副本的最古老方法之一是：將該對象轉換為其 JSON 字符串表示形式，然后將其解析回對象。這感覺有點壓抑，但它確實有效：

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!

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

Structured Clone 結構化克隆算法

Structured cloning 是一種現有的算法，用于將值從一個地方轉移到另一地方。例如，每當您調用postMessage將消息發送到另一個窗口或 WebWorker 時，都會使用它。關于結構化克隆的好處在于它處理循環對象并支持大量的內置類型。問題是，在編寫本文時，該算法并不能直接使用，只能作為其他 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，你就知道你可以提供一個狀態對象來保存 URL。事實證明，這個狀態對象使用結構化克隆 - 而且是同步的。我們必須小心使用，不要把程序邏輯使用的狀態對象搞亂了，所以我們需要在完成克隆之后恢復原始狀態。為了防止發生任何意外，請使用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

在發了一條推文之后，Jeremy Banks 向我展示了第三種方法來利用結構化克隆：Notification API。

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

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

短小，簡潔。我喜歡它！

但是，它需要瀏覽器內部的權限機制，所以我懷疑它是很慢的。由于某種原因，Safari 總是返回undefined。

Performance extravaganza

我想測量哪種方法是最高性能的。在我的第一次（天真的）嘗試中，我拿了一個小 JSON 對象，并通過不同的方式克隆對象 1 千次。幸運的是，Mathias Bynens 告訴我，當你添加屬性到一個對象時，V8有一個緩存。所以我是在給緩存做基準測試。為了確保我永遠不會碰到緩存，我編寫了一個函數，使用隨機密鑰名稱生成給定深度和寬度的對象，并重新運行測試。

圖表！

以下是 Chrome，Firefox 和 Edge 中不同技術的性能。越低越好。

結論

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

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

如果你想要一個適當的結構化克隆，MessageChannel是你唯一可靠的跨瀏覽器的選擇。

如果瀏覽器平臺直接提供一個 structuredClone()函數，會不會更好？我當然這樣認為，最新的 HTML 規范正在討論這個 Synchronous clone = global.structuredClone(value, transfer = []) API · Issue #793 · whatwg/html。

云服務器 GPU云服務器 javascript深拷貝深拷貝深拷貝和淺拷貝 javascript淺拷貝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107192.html

javascript對象的淺拷貝、深拷貝和Object.assign方法淺析

摘要：對象的淺拷貝淺拷貝是對象共用一個內存地址，對象的變化相互影響。這是特別值得注意的地方。和能正確處理的對象只有等能夠被表示的數據結構，因此函數這種不能被表示的類型將不能被正確處理。對象的淺拷貝：淺拷貝是對象共用一個內存地址，對象的變化相互影響。比如常見的賦值引用就是淺拷貝: let srcObj = {name: lilei, age: 20}; let copyObj = srcO...

lixiang 2019-08-22 15:55 評論0 收藏0
JavaScript中的淺拷貝與深拷貝

摘要：所以，深拷貝是對對象以及對象的所有子對象進行拷貝實現方式就是遞歸調用淺拷貝對于深拷貝的對象，改變源對象不會對得到的對象有影響。為什么會有淺拷貝與深拷貝什么是淺拷貝與深拷貝如何實現淺拷貝與深拷貝好了，問題出來了，那么下面就讓我們帶著這幾個問題去探究一下吧！如果文章中有出現紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過以下↓ 數據類型在開始了解淺拷貝與深拷貝之前，讓我們先...

546669204 2019-08-26 18:27 評論0 收藏0
JavaScript中的淺拷貝與深拷貝

摘要：所以，深拷貝是對對象以及對象的所有子對象進行拷貝實現方式就是遞歸調用淺拷貝對于深拷貝的對象，改變源對象不會對得到的對象有影響。上一篇 JavaScript中的繼承前言文章開始之前，讓我們先思考一下這幾個問題：為什么會有淺拷貝與深拷貝什么是淺拷貝與深拷貝如何實現淺拷貝與深拷貝好了，問題出來了，那么下面就讓我們帶著這幾個問題去探究一下吧！如果文章中有出現紕漏、錯誤之處...

AZmake 2019-08-23 17:08 評論0 收藏0
JavaScript之淺、深拷貝

摘要：前言里面淺拷貝和深拷貝是非常關鍵的知識點，今天就來通過本文清楚的了解深淺拷貝以及該如何實現這兩種拷貝方式。對象的拷貝又分為淺拷貝和深拷貝。印證了上述所說的對于所有的基本類型，簡單的賦值已經是實現了深拷貝。前言 JavaScript里面淺拷貝和深拷貝是非常關鍵的知識點，今天就來通過本文清楚的了解深淺拷貝以及該如何實現這兩種拷貝方式。深淺拷貝的區別拷貝：其實就是一個對象復制給另外...

leanxi 2019-08-26 10:37 評論0 收藏0
JavaScript專題之深淺拷貝

摘要：專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶數組的淺拷貝如果是數組，我們可以利用數組的一些方法比如返回一個新數組的特性來實現拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶！數組的淺拷貝如果是數組，我們可以利用數組的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 評論0 收藏0
JavaScript 數據結構與算法之美 - 棧內存與堆內存、淺拷貝與深拷貝

摘要：棧內存與堆內存淺拷貝與深拷貝，可以說是前端程序員的內功，要知其然，知其所以然。棧內存與堆內存中的變量分為基本類型和引用類型。 showImg(https://segmentfault.com/img/bVbuvnj?w=900&h=250); 前言想寫好前端，先練好內功。棧內存與堆內存、淺拷貝與深拷貝，可以說是前端程序員的內功，要知其然，知其所以然。筆者寫的 JavaScrip...

dailybird 2019-08-23 18:26 評論0 收藏0