Heim > Web-Frontend > js-Tutorial > Verstehen Sie JavaScript-Objektreferenzen und das Kopieren – kurze Erklärung

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

Linda Hamilton
Freigeben: 2024-12-22 02:07:21
Original
256 Leute haben es durchsucht

Understand JavaScript Object References and Copying - Brief Explanation

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"
Nach dem Login kopieren
Nach dem Login kopieren
  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)
Nach dem Login kopieren

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)
    
    Nach dem Login kopieren
  • 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)
    
    Nach dem Login kopieren
  • 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
    
    Nach dem Login kopieren
    • 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
    
    Nach dem Login kopieren
    • 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"
    
    Nach dem Login kopieren
    Nach dem Login kopieren

Ü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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage