Verstehen Sie JavaScript-Objektreferenzen und das Kopieren – kurze Erklärung

Bei der Arbeit mit Objekten in JavaScript ist es entscheidend, den Unterschied zwischen Objektverweisen und Objektkopieren zu verstehen. Hier ist eine detaillierte Übersicht:

---

Objektreferenzen

1. Objekte sind Referenztypen:
   • Wenn Sie einer Variablen ein Objekt zuweisen, weisen Sie eine Referenz auf den Speicherort zu, an dem das Objekt gespeichert ist, und keine Kopie des Objekts selbst.
   • Das Ändern des Objekts durch eine Referenz wirkt sich auf alle Referenzen auf dasselbe Objekt aus.

   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. Gleichheitsprüfungen:
   • Zwei Variablen sind gleich, wenn sie auf dasselbe Objekt im Speicher verweisen, nicht wenn ihr Inhalt identisch ist.

   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)

---

Objektkopieren

Es gibt zwei Haupttypen des Objektkopierens: flache Kopie und tiefe Kopie.

1. Flache Kopie

• Eine flache Kopie erstellt ein neues Objekt, kopiert jedoch nur die erste Ebene der Eigenschaften. Verschachtelte Objekte oder Arrays werden weiterhin referenziert und nicht dupliziert.

Techniken für flaches Kopieren:

• 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)
  

• Spread-Operator (...):
  

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

• Beide Methoden erstellen eine flache Kopie, was bedeutet, dass verschachtelte Objekte weiterhin verknüpft sind.

2. Deep Copy

• Eine tiefe Kopie dupliziert das gesamte Objekt, einschließlich verschachtelter Strukturen. Das neue Objekt ist völlig unabhängig vom Original.

Techniken für Deep Copy:

• JSON.parse() und 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
  

  • Einschränkung: Diese Methode verarbeitet keine Funktionen, undefiniert, Infinity oder spezielle Objekte wie Date oder RegExp.

• StructuredClone() (Modernes JavaScript):
  

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

  • Diese Methode verarbeitet die meisten Randfälle (z. B. Zirkelverweise), wird jedoch in älteren Umgebungen nicht unterstützt.

• Benutzerdefinierte Bibliotheken:

  • Verwenden Sie Bibliotheken wie 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"
  

---

Übersichtstabelle

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.

Aktion

Ergebnis

Zuweisung (=) Erstellt eine Referenz. Änderungen an einer Variablen wirken sich auf die andere aus. Flache Kopie Erstellt ein neues Objekt, behält aber Referenzen für verschachtelte Objekte bei. Deep Copy Erstellt ein völlig unabhängiges Objekt, einschließlich verschachtelter Strukturen.

Das Verständnis dieser Konzepte hilft Ihnen, unbeabsichtigte Nebenwirkungen bei der Arbeit mit Objekten in JavaScript zu vermeiden!

Das obige ist der detaillierte Inhalt vonVerstehen Sie JavaScript-Objektreferenzen und das Kopieren – kurze Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!