再見`JSON.stringify()`和`{...obj}`，你好`structedClone()`！-js教程-PHP中文網

再見`JSON.stringify()`和`{...obj}`，你好`structedClone()`！

WBOY

發布： 2024-09-04 18:32:02

原創

499 人瀏覽過

Bye-Bye `JSON.stringify()` and `{...obj}`, Hello `structuredClone()`!

什麼是 StructuredClone()？
- StructuredClone() 是 2022 年引入的全域函數，可實現 JavaScript 物件的深度克隆。與 JSON.stringify() 和 JSON.parse() 等傳統方法難以應對複雜的結構和循環引用不同，structuralClone() 可以輕鬆應對這些挑戰。
為什麼它會改變遊戲規則？
- 它是一個強大的工具，用於創建真正的深度克隆，保留嵌套物件和循環引用的完整性，而不需要額外的邏輯或解決方法。另外，它可以在現代環境中使用，包括 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");

登入後複製