さよなら、`JSON.stringify()` と `{...obj}`、こんにちは `structuraldClone()`!-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-09-04 18:32:02

オリジナル

578 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。