深淺拷貝，溫故知新-有解無憂

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 淺拷貝

最后，感謝您閱讀這篇博客！希望本文能夠為您提供有價值的資訊和啟示，

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552258.html

標籤：其他

上一篇：Webpack5構建性能優化：構建耗時從150s到60s再到10s

下一篇：返回列表

深淺拷貝，溫故知新