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"
  

---

概要表

Action	Result
Assignment (=)	Creates a reference. Changes to one variable affect the other.
Shallow Copy	Creates a new object but retains references for nested objects.
Deep Copy	Creates a completely independent object, including nested structures.

アクション

結果

割り当て (=) 参照を作成します。一方の変数を変更すると、もう一方の変数にも影響します。 浅いコピー 新しいオブジェクトを作成しますが、ネストされたオブジェクトの参照は保持します。 ディープコピー ネストされた構造を含む、完全に独立したオブジェクトを作成します。

これらの概念を理解すると、JavaScript でオブジェクトを操作するときに予期しない副作用を回避できます!

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