JavaScript オブジェクトの参照とコピーを理解する - 簡単な説明

JavaScript でオブジェクトを操作する場合、オブジェクト参照 と オブジェクトのコピー の違いを理解することが重要です。詳細な概要は次のとおりです:

オブジェクト参照

1. オブジェクトは参照型です:
   • オブジェクトを変数に割り当てると、オブジェクト自体のコピーではなく、オブジェクトが保存されているメモリの場所への参照が割り当てられることになります。
   • 1 つの参照を通じてオブジェクトを変更すると、同じオブジェクトへのすべての参照に影響します。

   let obj1 = { name: "Alice" };
   let obj2 = obj1; // obj2 now references the same object as obj1
   obj2.name = "Bob";
   console.log(obj1.name); // Output: "Bob"

1. 等価性チェック:
   • 2 つの変数は、内容が同一である場合ではなく、メモリ内の同じオブジェクトを参照する場合に等しいと見なされます。

   let a = { key: "value" };
   let b = { key: "value" };
   console.log(a === b); // Output: false (different references)
   let c = a;
   console.log(a === c); // Output: true (same reference)

オブジェクトのコピー

オブジェクトのコピーには、浅いコピーと深いコピーの 2 つの主なタイプがあります。

1.浅いコピー

• 浅いコピーでは新しいオブジェクトが作成されますが、最初のレベルのプロパティのみがコピーされます。ネストされたオブジェクトまたは配列は、複製されずに引き続き参照されます。

浅いコピーのテクニック:

• Object.assign():
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = Object.assign({}, original);
   copy.details.age = 30;
   console.log(original.details.age); // Output: 30 (shared reference)
  

  ログイン後にコピー

• 拡散演算子 (...):
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = { ...original };
   copy.details.age = 30;
   console.log(original.details.age); // Output: 30 (shared reference)
  

  ログイン後にコピー

• どちらのメソッドも浅いコピーを作成します。つまり、ネストされたオブジェクトは引き続きリンクされます。

2.ディープコピー

• ディープ コピーは、ネストされた構造を含むオブジェクト全体を複製します。新しいオブジェクトは元のオブジェクトから完全に独立しています。

ディープコピーのテクニック:

• JSON.parse() および JSON.stringify():
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = JSON.parse(JSON.stringify(original));
   copy.details.age = 30;
   console.log(original.details.age); // Output: 25
  

  ログイン後にコピー
  • 制限事項: このメソッドは、関数、未定義、Infinity、または Date や RegExp などの特殊なオブジェクトを処理しません。

• StructuredClone() (モダン JavaScript):
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = structuredClone(original);
   copy.details.age = 30;
   console.log(original.details.age); // Output: 25
  

  ログイン後にコピー
  • このメソッドは、ほとんどのエッジケース (循環参照など) を処理しますが、古い環境ではサポートされていません。

• カスタム ライブラリ:

  • lodash のようなライブラリを使用します。

     let obj1 = { name: "Alice" };
     let obj2 = obj1; // obj2 now references the same object as obj1
     obj2.name = "Bob";
     console.log(obj1.name); // Output: "Bob"
  

  ログイン後にコピー

  ログイン後にコピー

概要表

以上がJavaScript オブジェクトの参照とコピーを理解する - 簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。