さよなら、`JSON.stringify()` と `{...obj}`、こんにちは `structuraldClone()`!

• structuralClone() とは何ですか?

  • StructuredClone() は 2022 年に導入されたグローバル関数で、JavaScript オブジェクトのディープ クローン作成を可能にします。複雑な構造や循環参照に対処する JSON.stringify() や JSON.parse() などの従来のメソッドとは異なり、structuraldClone() はこれらの課題を簡単に処理します。

• なぜこれがゲームチェンジャーなのか?

  • これは、追加のロジックや回避策を必要とせずに、ネストされたオブジェクトと循環参照の整合性を維持し、真のディープ クローンを作成するための堅牢なツールです。さらに、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

• 何が起こっているのですか?

  • このメソッドはディープ コピーを作成しますが、関数、未定義、または循環参照を処理できないという制限があります。
  • structuraldClone() の使用 (ディープコピー)

  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() も循環参照で失敗し、エラーがスローされます。
  • structuraldClone() による循環参照

  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

• 何が起こっているのですか?
  • また、structuraldClone() は関数のクローンを作成しませんが、未定義の値を保持するため、複雑なオブジェクトに対して 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() が未来である理由

• 信頼性: 循環参照、関数、未定義の値をより予測可能に処理します。
• 効率: 大規模なデータセットに対してディープ クローン作成をより速く実行し、回避策を必要としません。
• シンプルさ: すべてを制御する 1 つの方法。{...obj}、JSON.stringify()、またはカスタムのディープ クローン関数のいずれかを選択する必要はありません。

以上がさよなら、`JSON.stringify()` と `{...obj}`、こんにちは `structuraldClone()`!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。