• 什麼是 StructuredClone()？

  • StructuredClone() 是 2022 年引入的全域函數，可實現 JavaScript 物件的深度克隆。與 JSON.stringify() 和 JSON.parse() 等傳統方法難以應對複雜的結構和循環引用不同，structuredClone() 可以輕鬆應對這些挑戰。

• 為什麼它會改變遊戲規則？

  • 它是一個強大的工具，用於創建真正的深度克隆，保留嵌套物件和循環引用的完整性，而不需要額外的邏輯或解決方法。另外，它可以在現代環境中使用，包括 Web Workers。

1.簡單物件克隆：基礎

• 使用 {...obj}（淺複製）

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• 發生了什麼事？

  • 擴充運算子 {...obj} 僅建立淺拷貝。詳細資訊物件沒有被深度克隆，因此對shallowCopy.details的更改也會影響原始詳細資訊。
  • 使用 JSON.stringify() JSON.parse() （深複製）

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• 發生了什麼事？

  • 此方法建立深層複製，但有其限制：它無法處理函數、未定義或循環引用。
  • 使用 StructuredClone()（深複製）

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• 發生了什麼事？
  • StructuredClone() 建立深度克隆，保留結構，不受 JSON.stringify() 的任何限制，並處理複雜的資料類型，如循環引用和未定義。

2.處理循環引用：一個挑戰

• 帶有 {...obj} 的循環引用

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 發生了什麼事？

  • {...obj} 無法處理循環引用，導致錯誤。
  • 使用 JSON.stringify() 進行循環引用

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• 發生了什麼事？

  • JSON.stringify() 也會因迴圈引用而失敗，引發錯誤。
  • 使用 StructuredClone() 進行循環引用

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• 發生了什麼事？
  • StructuredClone() 無縫處理循環引用，創建正確的深度克隆而不會出現錯誤。

3.使用函數和未定義進行克隆：另一個測試

• 使用 {...obj}

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• 發生了什麼事？

  • {...obj} 複製函數並如預期未定義，但只是淺層。
  • 使用 JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• 發生了什麼事？

  • JSON.stringify() 無法序列化函數或未定義，導致它們在複製物件中遺失。
  • 使用 StructuredClone()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• 發生了什麼事？
  • StructuredClone() 也不會複製函數，但會保留未定義的值，這使得它對於複雜物件比 JSON.stringify() 更可靠。

4.速度與效率：效能說明

• 大數據的效率

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify   JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify   JSON.parse");

• 發生了什麼事？
  • 對於大型、複雜的數據， StructuredClone() 通常比 JSON.stringify() JSON.parse() 更快，並且避免了序列化和反序列化的陷阱。

5.結論：為什麼 StructuredClone() 是未來

• 可靠性：更可預測地處理循環引用、函數和未定義值。
• 效率：對大型資料集更快執行深度克隆，且不需要解決方法。
• 簡單：統治所有這些的方法 - 不再需要在 {...obj}、JSON.stringify() 或自訂深度克隆函數之間進行選擇。