Shallow Copy vs. Deep Copy in JavaScript

Überblick

In JavaScript kann das Kopieren von Objekten oder Arrays in flache Kopie und tiefe Kopie kategorisiert werden. Beim Umgang mit komplexen Datenstrukturen, insbesondere solchen, die verschachtelte Objekte oder Arrays enthalten, ist es wichtig, den Unterschied zu verstehen.

Dieser Leitfaden erläutert diese Konzepte, ihre Eigenschaften, Methoden zu ihrer Umsetzung und wann sie jeweils zu verwenden sind.

1. Flache Kopie

Definition
Eine flache Kopie erstellt ein Duplikat der Eigenschaften der obersten Ebene eines Objekts oder Arrays. Bei verschachtelten Objekten oder Arrays werden jedoch nur die Referenzen kopiert, nicht die tatsächlichen Daten.

Eigenschaften

• Kopiert nur die erste Ebene von Eigenschaften oder Elementen.
• Verschachtelte Objekte oder Arrays haben gemeinsame Referenzen mit dem ursprünglichen Objekt/Array.
• Leicht und effizient für einfache Strukturen, aber nicht für die unabhängige Duplizierung verschachtelter Daten geeignet.

1.1 Verwenden von Object.assign()

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);

shallowCopy.b.c = 42; 
console.log(original.b.c); // OUTPUT: 42 (The original object also affected due to shared reference)

1.2 Verwendung des Spread-Operators (...)

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 90;
console.log(original.b.c); // OUTPUT: 90

1.3 Sehen wir uns ein Beispiel für eine flache Kopie von Array-Methoden (Slice, Concat) an

const original = [1, 2, [3, 4]];
const shallowCopy = original.slice();

shallowCopy[2][0] = 10; 
console.log(original[2][0]); // OUTPUT: 10

2. Deep Copy

Definition
Eine tiefe Kopie erstellt ein völlig unabhängiges Duplikat eines Objekts oder Arrays. Alle Ebenen, auch verschachtelte Strukturen, werden rekursiv kopiert. Änderungen an der kopierten Struktur wirken sich nicht auf das Original aus und umgekehrt.

Eigenschaften

• Kopiert rekursiv alle Ebenen der Struktur.
• Verschachtelte Objekte oder Arrays sind unabhängig vom Original.
• Rechentechnisch schwerer als flache Kopien.

2.1 Verwendung von JSON.stringify() und JSON.parse()

• Konvertiert das Objekt in einen JSON-String und dann zurück in ein neues Objekt.
• Einschränkungen: Verarbeitet keine Funktionen, Datum, RegExp oder Zirkelverweise.

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2 (original remains unaffected)

2.2 StructuredClone() verwenden
Eine moderne Methode zum Deep Copying, die Zirkelverweise und spezielle Objekte wie Datum unterstützt.

const original = { a: 1, b: { c: 2 }, date: new Date() };
const deepCopy = structuredClone(original);

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2
console.log(original.date === deepCopy.date); // FALSE

2.3 Verwenden einer benutzerdefinierten rekursiven Funktion
Eine flexible Lösung für die manuelle Bearbeitung komplexer Fälle.

function deepCopy(obj) {
  if (obj === null || typeof obj !== "object") return obj; 

  if (Array.isArray(obj)) return obj.map(deepCopy); 

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(original);

deepCopyObj.b.c = 42;
console.log(original.b.c); // OUTPUT: 2

3. Wann sollte man sie jeweils verwenden?

Flache Kopie

• Für flache Objekte oder Arrays ohne verschachtelte Strukturen.
• Wenn die Leistung entscheidend ist und gemeinsame Referenzen für verschachtelte Objekte akzeptabel sind.

Deep Copy

• Für komplexe, tief verschachtelte Objekte/Arrays.
• Wenn Sie echte Unabhängigkeit zwischen der Kopie und dem Original benötigen.

4. Zusammenfassung

Flache Kopie

• Einfach und effizient.
• Geeignet für flache Strukturen oder wenn gemeinsame Referenzen akzeptabel sind.

Deep Copy

• Robust und gewährleistet volle Unabhängigkeit.
• Ideal für tief verschachtelte oder komplexe Strukturen.

Dies ist eine ausführliche Erklärung des Shallow Copy und Deep Copy von Objekten in JavaScript. Wählen Sie die geeignete Methode basierend auf Ihrem Anwendungsfall und Ihren Leistungsanforderungen.

Das obige ist der detaillierte Inhalt vonShallow Copy vs. Deep Copy in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!