深淺複製，溫故知新

ESnail發表於2023-05-11

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型別

支援的 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

2、淺複製

2.1、概念

物件的淺複製是其屬性與複製源物件的屬性共享相同引用（指向相同的底層值）的副本。

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

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

2.2、實現方式

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

參考：MDN 淺複製

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

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

相關文章