JavaScript Shallow Copy vs. Deep Copy: Beispiele und Best Practices

Bei der Arbeit mit Objekten und Arrays in JavaScript ist das Erstellen von Kopien von Datenstrukturen eine häufige Aufgabe. Bei der Entscheidung zwischen einer flachen Kopie und einer tiefen Kopie stehen Entwickler jedoch oft vor Herausforderungen. Ein Missverständnis der Unterschiede kann zu unbeabsichtigten Nebenwirkungen in Ihrem Code führen. Schauen wir uns diese Konzepte, ihre Unterschiede und die jeweilige Verwendung an.

---

? E-Book herunterladen – JavaScript: von ES2015 bis ES2023

---

Was ist eine flache Kopie?

Eine flache Kopie erstellt ein neues Objekt mit Kopien der Eigenschaften der obersten Ebene des Originalobjekts. Bei Eigenschaften, die Grundelemente sind (z. B. Zahlen, Zeichenfolgen, boolesche Werte), wird der Wert selbst kopiert. Bei Eigenschaften, die Objekte sind (wie Arrays oder verschachtelte Objekte), wird jedoch nur die Referenz kopiert – nicht die tatsächlichen Daten.

Das bedeutet, dass das neue Objekt zwar über eine eigene Kopie der Eigenschaften der obersten Ebene verfügt, die verschachtelten Objekte oder Arrays jedoch weiterhin vom Original und der Kopie gemeinsam genutzt werden.

Beispiel einer flachen Kopie

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

So erstellen Sie eine flache Kopie

1. Verwendung des Spread-Operators (...):

   const shallowCopy = { ...originalObject };

1. Mit Object.assign():

   const shallowCopy = Object.assign({}, originalObject);

Obwohl diese Methoden schnell und einfach sind, eignen sie sich nicht für tief verschachtelte Objekte.

---

Was ist eine Deep Copy?

Eine tiefe Kopie dupliziert jede Eigenschaft und Untereigenschaft des Originalobjekts. Dadurch wird sichergestellt, dass die Kopie völlig unabhängig vom Original ist und Änderungen an der Kopie keinen Einfluss auf das Originalobjekt haben.

Deep Copying ist beim Umgang mit komplexen Datenstrukturen wie verschachtelten Objekten oder Arrays unerlässlich, insbesondere in Szenarien, in denen die Datenintegrität von entscheidender Bedeutung ist.

Beispiel einer Deep Copy

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

So erstellen Sie eine tiefe Kopie

1. Verwendung von JSON.stringify() und JSON.parse():
   • Konvertiert das Objekt in eine JSON-Zeichenfolge und analysiert es dann wieder in ein neues Objekt.
   • Einschränkungen:
     • Zirkelverweise können nicht verarbeitet werden.
     • Ignoriert Eigenschaften wie Funktionen, undefiniert oder Symbol.

   const shallowCopy = { ...originalObject };

1. Bibliotheken nutzen:
   • Bibliotheken wie Lodash bieten robuste Deep-Cloning-Methoden.

   const shallowCopy = Object.assign({}, originalObject);

1. Benutzerdefinierte rekursive Funktion:
   • Für vollständige Kontrolle können Sie eine rekursive Funktion schreiben, um verschachtelte Objekte zu klonen.

---

Vergleich von Shallow Copy und Deep Copy

Funktion Flache Kopie Deep Copy

Feature	Shallow Copy	Deep Copy
Scope	Copies only top-level properties.	Copies all levels, including nested data.
References	Nested references are shared.	Nested references are independent.
Performance	Faster and lightweight.	Slower due to recursive operations.
Use Cases	Flat or minimally nested objects.	Deeply nested objects or immutable structures.

Geltungsbereich Kopiert nur Eigenschaften der obersten Ebene. Kopiert alle Ebenen, einschließlich verschachtelter Daten. Referenzen Verschachtelte Referenzen werden gemeinsam genutzt. Verschachtelte Referenzen sind unabhängig. Leistung Schneller und leichter. Langsamer aufgrund rekursiver Operationen. Anwendungsfälle Flache oder minimal verschachtelte Objekte. Tief verschachtelte Objekte oder unveränderliche Strukturen.

---

Wann sollte Shallow Copy verwendet werden?

• Flache Objekte: Beim Umgang mit einfachen Objekten ohne verschachtelte Eigenschaften.
• Leistung: Wenn Geschwindigkeit entscheidend ist und Sie keine tief verschachtelten Daten verarbeiten müssen.
• Vorübergehende Änderungen: Wenn Sie beabsichtigen, Eigenschaften der obersten Ebene zu ändern, aber verschachtelte Daten gemeinsam zu nutzen.

Beispielanwendungsfall

Kopieren des Einstellungsobjekts eines Benutzers, um schnelle Anpassungen vorzunehmen:

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

---

Wann sollte man Deep Copy verwenden?

• Komplexe Strukturen: Für Objekte mit mehreren Verschachtelungsebenen.
• Nebenwirkungen vermeiden: Wenn Sie sicherstellen müssen, dass Änderungen in der Kopie keine Auswirkungen auf das Original haben.
• Zustandsverwaltung: In Frameworks wie React oder Redux, wo Unveränderlichkeit entscheidend ist.

Beispielanwendungsfall

Den Status eines Spiels oder einer Anwendung duplizieren:

   const shallowCopy = { ...originalObject };

---

Häufige Fehler und Fallstricke

1. Angenommen, eine flache Kopie ist immer ausreichend:

   • Entwickler verwenden häufig fälschlicherweise flache Kopiermethoden für verschachtelte Objekte, was zu unbeabsichtigten Änderungen an den Originaldaten führt.

2. Übermäßiger Einsatz von JSON-Methoden:

   • JSON.stringify/JSON.parse ist zwar einfach, funktioniert aber nicht für alle Objekte (z. B. solche, die Methoden oder Zirkelverweise enthalten).

3. Vernachlässigung der Leistung:

   • Deep-Copy-Methoden können langsamer sein, insbesondere bei großen Objekten, also verwenden Sie sie mit Bedacht.

---

Fazit

Um fehlerfreien JavaScript-Code zu schreiben, ist es wichtig, den Unterschied zwischen Shallow Copy und Deep Copy zu verstehen. Flache Kopien sind für flache Strukturen effizient, während tiefe Kopien für komplexe, verschachtelte Objekte unverzichtbar sind. Wählen Sie die geeignete Methode basierend auf Ihrer Datenstruktur und Ihren Anwendungsanforderungen und vermeiden Sie potenzielle Fallstricke, indem Sie die Einschränkungen jedes Ansatzes kennen.

---

? E-Book herunterladen – JavaScript: von ES2015 bis ES2023

Das obige ist der detaillierte Inhalt vonJavaScript Shallow Copy vs. Deep Copy: Beispiele und Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!