深淺拷貝，溫故知新

1、深拷貝

1.1、概念

物件的深拷貝是指其屬性與其拷貝的源物件的屬性不共用相同的參照（指向相同的底層值）的副本。

因此，當你更改源或副本時，可以確保不會導致其他物件也發生更改；也就是說，你不會無意中對源或副本造成意料之外的更改。

在深拷貝中，源和副本是完全獨立的。深拷貝與其源物件不共用參照，所以對深拷貝所做的任何更改都不會影響源物件。

1.2、實現方式：

1.2.1、使用 JSON.stringify() 將該物件轉換為 JSON 字串，然後使用 JSON.parse() 將該字串轉換回（全新的）JavaScript 物件。

前提：JavaScript 物件可以被序列化

序列化異常報錯

• 存在迴圈參照時，會丟擲異常 TypeError ("cyclic object value")（迴圈物件值）
• 存在 BigInt 型別的值時，如：{ num: BigInt(1111111111) } 會丟擲 TypeError ("BigInt value can't be serialized in JSON")（BigInt 值不能 JSON 序列化）.

序列化需要注意的隱式轉換

• 非陣列物件的屬性不能保證以特定的順序出現在序列化後的字串中
• undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非陣列物件的屬性值中時）或者被轉換成 null（出現在陣列中時）。函數、undefined 被單獨轉換時，會返回 undefined，如 JSON.stringify(function(){}) or JSON.stringify(undefined).
• 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 引數中強制指定包含了它們。
• Date 日期，會呼叫 toJSON() 將其轉換為 string 字串（同 Date.toISOString()）
• NaN 和 Infinity 格式的數值及 null 都會被當做 null
• Map/Set/WeakMap/WeakSet，僅會序列化可列舉的屬性
• HTML 元素物件, 會得到 {}

範例

  // 隱式轉換

  JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
  // '[1,"false",false]'

  JSON.stringify({x: undefined, y: Object, z: Symbol("")});
  // '{}'

  JSON.stringify([undefined, Object, Symbol("")]);
  // '[null,null,null]'

  JSON.stringify({[Symbol("foo")]: "foo"});
  // '{}'

  JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
  // '{}'

  JSON.stringify(
      {[Symbol.for("foo")]: "foo"},
      function (k, v) {
          if (typeof k === "symbol"){
              return "a symbol";
          }
      }
  );

  // undefined

  // 不可列舉的屬性預設會被忽略：
  JSON.stringify(
      Object.create(
          null,
          {
              x: { value: 'x', enumerable: false },
              y: { value: 'y', enumerable: true }
          }
      )
  );

  // "{"y":"y"}"

  JSON.stringify(document.body) // '{}'

  JSON.stringify(new Set([1, 2, 3])) // '{}'

  JSON.stringify(new Map([['num', 2]])) // '{}'

1.2.2、使用 window.structuredClone()，使用結構化克隆演演算法將給定的值進行深拷貝。

前提：可序列化的物件，且在瀏覽器環境和任何其他實現了 window 這樣全域性物件的 JavaScript 執行時的環境（structuredClone() 不是 JavaScript 語言本身的特性）

優點

• 支援把原始值中的可轉移物件轉移到新物件，而不是把屬性參照拷貝過去。
  • 可轉移物件與原始物件分離並附加到新物件; 它們不可以在原始物件中存取被存取到。
• 支援迴圈參照

補充：結構化克隆演演算法

• 結構化克隆演演算法是用於複製複雜 js 物件的演演算法。
• 它通過遞迴輸入物件來構建克隆，同時保持先前存取過的參照的對映，以避免無限遍歷迴圈。
• Worker 的 postMessage() 或 IndexedDB 儲存物件時內部使用該演演算法。所以，也可間接的通過這2個方法實現深拷貝。

補充：可轉移物件

• 可轉移的物件（Transferable object）是擁有屬於自己的資源的物件，這些資源可以從一個上下文轉移到另一個，確保資源一次僅在一個上下文可用。傳輸後，原始物件不再可用；它不再指向轉移後的資源，並且任何讀取或者寫入該物件的嘗試都將丟擲異常。
• 可轉移物件通常用於共用資源，該資源一次僅能安全地暴露在一個 js 執行緒中。
• 如：ArrayBuffer 是一個擁有記憶體塊的可轉移物件。當此類緩衝區（buffer）線上程之間傳輸時，相關聯的記憶體資源將從原始的緩衝區分離出來，並且附加到新執行緒建立的緩衝區物件中。原始執行緒中的緩衝區物件不再可用，因為它不再擁有屬於自己的記憶體資源了。

異常報錯

• Function 物件是不能被結構化克隆演演算法複製的，丟擲 DATA_CLONE_ERR 異常，如：structuredClone(function fn() {})
• Symbol 不能被結構化克隆演演算法複製的，丟擲 DATA_CLONE_ERR 異常，如：structuredClone({s: Symbol(1)})
• HTML 元素物件，丟擲 DATA_CLONE_ERR 異常，如：structuredClone(document.body)

隱式轉換

• RegExp 物件的 lastIndex 欄位不會被保留
• 屬性描述符，setters 以及 getters（以及其他類似後設資料的功能）同樣不會被複制。例如，如果一個物件用屬性描述符標記為 read-only，它將會被複製為 read-write，因為這是預設的情況下
• 原形鏈上的屬性也不會被追蹤以及複製

支援的js型別

• Array、ArrayBuffer、Boolean、DataView、Date、Map、Set、String、TypedArray
• Error 型別（僅限部分 Error 型別）。
• Object 物件：僅限簡單物件（如使用物件字面量建立的）。
• 除 symbol 以外的基本型別。
• RegExp：lastIndex 欄位不會被保留。

支援的 Error型別

• Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError（或其他會被設定為 Error 的）。

範例

// 迴圈參照
const original = { name: "MDN" };
original.itself = original;

// clone
const clone = structuredClone(original);

// 驗證
console.log(clone !== original) // true
console.log(clone.name === "MDN") // true
console.log(clone.itself === clone) // true


const get = { get foo() { return 'bar' } }
console.log(get.foo) // 'bar'


class MyClass { 
  foo = 'bar' 
  myMethod() { /* ... */ }
}
const myClass = new MyClass()

const cloned = structuredClone(myClass)
// { foo: 'bar' }

cloned instanceof myClass // false

1.2.3、 使用js庫

比如 lodash 中的 cloneDeep() 方法

該方法會遞迴拷貝 value。

clone 方法參考自 結構化克隆演演算法 以及支援 arrays、array buffers、 booleans、 date objects、maps、 numbers， Object 物件, regexes, sets, strings, symbols, 以及 typed arrays。 arguments 物件的可列舉屬性會拷貝為普通物件。 一些不可拷貝的物件，例如 error objects、functions, DOM nodes, 以及 WeakMaps 會返回空物件。

參考：MDN

• 深拷貝
• JSON.stringify()
• 結構化克隆演演算法
• 可轉移物件

2、淺拷貝

2.1、概念

物件的淺拷貝是其屬性與拷貝源物件的屬性共用相同參照（指向相同的底層值）的副本。

因此，當你更改源或副本時，也可能導致其他物件也發生更改——也就是說，你可能會無意中對源或副本造成意料之外的更改。

在淺拷貝中，對源或副本的更改可能也會導致其他物件的更改（因為兩個物件共用相同的參照）。

2.2、實現方式

在 js 中，所有標準的內建物件進行操作：...展開語法、Array.prototype.concat()、Array.prototype.slice()、Array.from()、Object.assign() 和 Object.create()，建立的都是淺拷貝而不是深拷貝。

參考：MDN 淺拷貝

最後，感謝您閱讀這篇部落格！希望本文能夠為您提供有價值的資訊和啟示。

如果您對本文的內容有任何疑問或建議，請隨時在評論區留言，我會盡快回復您。