Javascrip—拷貝對象（13）

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

引用傳值 若是你不知道什麼意思，看看下面的例子：

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 第三種方法來利用結構化克隆：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是你惟一可靠的跨瀏覽器的選擇。

這裏推薦一下個人前端學習交流羣：784783012，裏面都是學習前端的，若是你想製做酷炫的網頁，想學習編程。本身整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入學習。