In JavaScript werden Objekte per Referenz übergeben, was bedeutet, dass Sie beim Zuweisen eines Objekts zu einer Variablen eigentlich nur einen Zeiger auf das Objekt im Speicher zuweisen. Dies kann in einigen Fällen nützlich sein, in anderen Fällen kann es jedoch zu unerwartetem Verhalten führen, insbesondere wenn Sie versuchen, eine tiefe Kopie eines Objekts zu erstellen. Eine tiefe Kopie ist eine Kopie des Objekts, die ein neues Objekt mit denselben Werten wie das Original erstellt, wobei jedoch alle verschachtelten Objekte und Arrays ebenfalls kopiert werden. In diesem Artikel erfahren Sie, wie Sie in JavaScript eine tiefe Objektkopie erstellen.

Der erste naive Ansatz zum Kopieren eines Objekts in Javascript besteht darin, es einer neuen Variablen wie folgt zuzuweisen:

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
};

const objCopy = obj;

objCopy.role = 'Writer';

console.log(objCopy) // { name: 'Jane Doe', role: 'Writer' }
console.log(obj) // { name: 'Jane Doe', role: 'Writer' }

SPREAD-OPERATOR

Wir können die von Javascript bereitgestellte Spread-Operator-Syntax mit der folgenden Syntax verwenden:

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
};

const objCopy = { ...obj };

Wenn wir den Spread-Operator zum Kopieren eines Objekts oder Arrays verwenden, erhalten wir am Ende zwei verschiedene Objekte oder Arrays. Wenn wir also die gleiche Manipulation wie zuvor durchführen:

objCopy.role = 'Writer';

console.log(objCopy) // { name: 'Jane Doe', role: 'Developer' }
console.log(obj) // { name: 'Jane Doe', role: 'Writer' }

Die Syntax des Spread-Operators erstellt eine tiefe Kopie eines Objekts nur eine Ebene tief. Was soll das heißen ? Nehmen wir an, dass unser erstes Objekt „obj“ eine weitere Eigenschaft „contact“ hat, die ebenfalls ein Objekt ist, das die E-Mail-Adresse des Benutzers enthält:

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
  contact: {
    email: '[email protected]',
  },
};

const objCopy = obj;

objCopy.contact.email = '[email protected]';

console.log(obj); // { name: 'Jane Doe', role: 'Developer', contact: { email: '[email protected]' }, }
console.log(obj); // { name: 'Jane Doe', role: 'Developer', contact: { email: '[email protected]' }, }

Gibt es eine Möglichkeit, in Javascript eine tiefe Kopie auf allen Ebenen (verschachteltes Objekt) zu erstellen ? Nun, es gibt einen Weg, aber manchmal wird er auch als Trick bezeichnet.

JSON.parse und JSON.stringify

Eine weitere Möglichkeit, eine tiefe Kopie eines Objekts in JavaScript zu erstellen, ist die Verwendung von JSON.parse und JSON.stringify. JSON.stringify konvertiert ein JavaScript-Objekt in einen JSON-String, während JSON.parse einen JSON-String in ein JavaScript-Objekt konvertiert. Durch die gemeinsame Verwendung dieser beiden Funktionen können Sie eine tiefe Kopie eines Objekts erstellen.

Hier ist ein Beispiel dafür, wie man mit JSON.parse und JSON.stringify eine tiefe Kopie eines Objekts erstellt:

const objCopy = JSON.parse(JSON.stringify(obj));

Abschluss

Zusammenfassend lässt sich sagen, dass das Erstellen einer tiefen Kopie eines Objekts in JavaScript aufgrund der Art und Weise, wie Objekte als Referenz übergeben werden, schwierig sein kann. Wenn Sie jedoch entweder den Spread-Operator oder JSON.parse und JSON.stringify verwenden, können Sie eine tiefe Kopie eines Objekts erstellen, wobei alle verschachtelten Objekte und Arrays ebenfalls tief kopiert werden. Wählen Sie die Methode, die für Ihren Anwendungsfall am besten geeignet ist, und stellen Sie sicher, dass Sie Ihren Code gründlich testen, um sicherzustellen, dass Ihre Deep Copy wie erwartet funktioniert.