Shallow Copy vs. Deep Copy in JavaScript

Bei der Arbeit mit JavaScript ist es für die effektive Manipulation von Objekten und Arrays wichtig, den Unterschied zwischen flacher Kopie und tiefer Kopie zu verstehen. Sehen wir uns an, was diese Begriffe bedeuten und wie Sie die einzelnen Arten von Kopien in Ihrem Code implementieren.

Flache Kopie
Eine flache Kopie erstellt ein neues Objekt oder Array, das dieselben Werte wie das Original enthält. Wenn das Original jedoch verschachtelte Objekte oder Arrays enthält, kopiert die flache Kopie nur die Verweise auf diese verschachtelten Strukturen, nicht die Strukturen selbst. Das bedeutet, dass Änderungen an den verschachtelten Objekten oder Arrays in der kopierten Struktur auch Auswirkungen auf das Original haben.

Beispiele für flache Kopiermethoden:

1. Spread-Operator ({...})

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

Hier ist „shallowCopy“ ein neues Objekt, aber „shallowCopy.b“ verweist immer noch auf dasselbe Objekt wie „original.b“.

2.Object.assign()

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

1. Array-Slice-Methode

const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

Deep Copy
Eine tiefe Kopie erstellt ein neues Objekt oder Array, das ein vollständiger, unabhängiger Klon des Originals ist, einschließlich aller verschachtelten Objekte und Arrays. Änderungen an der Deep Copy wirken sich nicht auf das Original aus und umgekehrt.

Beispiele für Deep Copy-Methoden:

1. JSON.stringify() und JSON.parse()

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

Diese Methode serialisiert das Objekt in eine JSON-Zeichenfolge und analysiert es dann wieder in ein neues Objekt. Es verarbeitet jedoch keine Funktionen, undefinierten oder Zirkelverweise.

2.Rekursive Funktion

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

  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

1. StructuredClone() (in modernen JavaScript-Umgebungen)

const deepCopy = structuredClone(original);

Wann jeweils zu verwenden ist

• Flache Kopie: Geeignet für einfache Objekte oder Arrays ohne verschachtelte Strukturen. Es ist schneller und verbraucht weniger Speicher. Verwenden Sie es, wenn Sie eine schnelle Kopie benötigen, bei der Änderungen an verschachtelten Objekten sowohl im Original als auch in der Kopie widergespiegelt werden sollen.

• Deep Copy: Notwendig für komplexe Objekte oder Arrays mit verschachtelten Strukturen. Dadurch wird sichergestellt, dass Änderungen an der Kopie keine Auswirkungen auf das Original haben. Verwenden Sie es, wenn Sie völlig unabhängige Klone benötigen.

Das Verständnis dieser Unterschiede hilft, Fehler zu vermeiden, die durch unbeabsichtigte gemeinsame Referenzen entstehen, und stellt die Datenintegrität in Ihren Anwendungen sicher

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!