在JavaScript中如何拷貝一個對象？

通過引用調用

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

mutate可以對obj進行改動，然后外面的obj的值也變化了。

淺拷貝：Object.assign()

一種拷貝方式是這種方法： Object.assign(target, sources...).

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

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和其他內置對象序列化的時候可能都有問題。

結構化克隆

它是一種算法，將一個值轉換為另外一個值。而且能處理對象循環依賴和大部分的內置對象。比如調用postMessage發消息給window或者WebWorker的時候就用到。
比如像這樣：obj是被深拷貝過的

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);

歷史API

如果你用過history.pushState()去構建一個單頁應用（SPA），你應該知道你可以根據當前URL保存一個state object。這個state object是結構化拷貝的，并且是同步的。

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的調用次數。

通知API

function structuralClone(obj) {return new Notification('', {data: obj, silent: true}).data; } const obj = /* ... */; const clone = structuralClone(obj);

性能如何

結論是：
1 如果你不處理對象依賴和內置對象，可以直接用 JSON.parse(JSON.stringify())

2 如果你要可靠的跨瀏覽器支持：用MessageChannel

原文：
https://dassur.ma/things/deep-copy/#call-by-reference

作者知乎/公眾號：前端瘋

轉載于:https://www.cnblogs.com/xunxing/p/a255ce21d8d85939ec4ce56def8cc0b0.html

總結

以上是生活随笔為你收集整理的（译文）JavaScript基础——JavaScript中的深拷贝的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。