Objekte in JavaScript kopieren

1. Untiefe Kopie eines Objekts in JavaScript
2. Tiefes Kopieren eines Objekts in JavaScript

Verschiedene Programmiersprachen verfügen über verschiedene Datenstrukturen, mit denen Sie die Daten organisieren und im Speicher ablegen können. Jede der Datenstrukturen funktioniert einzigartig. In C++ und Java haben wir beispielsweise Hashmap, um die Daten in einer Schlüsselwertform zu speichern. In ähnlicher Weise haben wir in JavaScript eine als Objekt bezeichnete Datenstruktur, die es Ihnen ermöglicht, die Daten in einem Schlüssel-Wert-Format zu speichern.

Die Objekte sind praktisch, wenn es um den Zugriff auf die Daten geht. Wir können einfach auf alle Daten innerhalb eines Objekts zugreifen, indem wir seinen Schlüssel verwenden. In diesem Artikel werden wir die verschiedenen Möglichkeiten sehen, wie wir Objekte in JavaScript kopieren können.

Beachten Sie, dass die JavaScript-Objekte veränderbar sind und als Referenz gespeichert werden. Wenn Sie bereits ein Objekt erstellt haben und es einem anderen Objekt zuordnen möchten, enthält dieses Objekt nun die Adresse dieses Objekts. Da wir die Referenz des Objekts in einem anderen Objekt speichern und dieses neue Objekt verwenden, können wir die im ursprünglichen Objekt vorhandenen Werte leicht ändern.

var a = {'name': 'Adam', 'company': 'Google'}

var b = a;
b.name = 'Sam'

console.log(a.name, b.name);

Ausgabe:

Sam Sam

Wie Sie aus dem obigen Beispiel sehen können, wird durch die Zuweisung eines Objekts zu einem anderen das Objekt selbst nicht kopiert. Es wird nur die Adresse des alten Objekts im neuen Objekt gespeichert.

Es gibt zwei Möglichkeiten, ein Objekt in JavaScript zu kopieren. Eine Methode wird als flaches Kopieren bezeichnet, und eine andere Methode wird als tiefes Kopieren bezeichnet. Um diese Möglichkeiten zu implementieren, können wir einige JavaScript-Methoden wie folgt verwenden.

Untiefe Kopie eines Objekts in JavaScript

Beim flachen Kopieren werden nur die auf der ersten Ebene des Objekts vorhandenen Schlüssel-Wert-Paare in das neue Objekt kopiert. Und alle verschachtelten Elemente oder Eigenschaften, wie ein Array oder ein anderes Objekt darin, werden nicht kopiert, sondern ihre Referenz wird in diesem Objekt gespeichert.

Beim flachen Kopieren werden auch einige Eigenschaften des Originalobjekts beeinflusst. Um dies zu verstehen, sehen Sie sich bitte das folgende Beispiel an.

var obj1 = {
  'firstName': 'James',
  'lastName': 'Bond',
  'films': ['No Time To Die', 'Spectre', 'Skyfall', 'Quantum of Solace'],
  'actors':
      {'characters': {'realName': 'Daniel Craig', 'fakeName': 'James Bond'}}
}

In diesem Beispiel haben wir ein Objekt namens obj1. Um dieses Objekt mit JavaScript flach zu kopieren, können wir Object.assign() und den Spread-Operator ... verwenden. Lassen Sie uns mit den folgenden Methoden in JavaScript eine flache Kopie auf obj1 durchführen.

1. Methode Object.assign()

Die Methode Object.assign() benötigt zwei Parameter. Der erste Parameter ist das Ziel-Objekt, das nach dem Kopieren zurückgegeben wird. Der zweite Parameter ist das Objekt, das wir kopieren möchten: obj1. In unserem Fall übergeben wir als Ziel ein leeres Objekt {}. Dies liegt daran, dass alle Elemente innerhalb von obj1 in dieses leere Objekt kopiert werden. Nachdem das Kopieren abgeschlossen ist, gibt Object.assign() das neue Objekt zurück, das wir in der Variable obj2 speichern.

var obj2 = Object.assign({}, obj1);

Später werden wir die Eigenschaften dieses Objekts ändern und praktisch sehen, warum dies als flache Kopie bezeichnet wird.

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

console.log(obj1);
console.log(obj2);

Ausgabe:

Hier ändern wir drei Werte mit obj2, firstName, dem ersten Film aus dem Array films[] und der Eigenschaft realName aus dem Objekt actors.characters. Dann drucken wir beide Objekte.

Das obige Bild zeigt, dass nur die Eigenschaft firstName in beiden Objekten nicht verändert wird. Die anderen beiden Eigenschaften films[] und realName werden in beiden Objekten geändert. Dies wird als flache Kopie bezeichnet, da die Eigenschaft firstName eindeutig ist, während die anderen Eigenschaften für beide Objekte gemeinsam sind, da wir hier die Adresse speichern. Hier werden nur auf der ersten Ebene vorhandene Eigenschaften kopiert.

2. Spread-Operator (...)

Der Rest-Operator kopiert die Eigenschaften von obj1 in obj2. Dies ist vergleichbar mit Object.assign(), wo wir die Eigenschaften der Objekte flach kopieren. Um ein Objekt mit dem Spread-Operator zu kopieren, müssen Sie den Objektnamen hinter das Spread-Symbol schreiben.

var obj2 = {...obj1};

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

Sie erhalten auch die gleiche Ausgabe, die wir nach der Verwendung der Methode Object.assign() erhalten haben.

Tiefes Kopieren eines Objekts in JavaScript

Bei einer Tiefenkopie werden alle Schlüssel-Wert-Paare in das neue Objekt kopiert. Um Deep Copy durchzuführen, können wir die Methoden JSON.parse() und JSON.stringify() verwenden. Beachten Sie, dass die tiefe Kopie die im Prototypobjekt vorhandenen Eigenschaften nicht kopiert.

Mit JSON.stringify() wandeln wir zuerst das gesamte Objekt, in diesem Fall obj1, in einen String um und später mit Hilfe der Methode JSON.parse() parsen diese Zeichenkette zurück in das JSON-Format.

let obj2 = JSON.parse(JSON.stringify(obj1));

Hier können Sie beliebige Eigenschaften innerhalb von obj2 ändern, was sich nicht auf die Eigenschaften innerhalb von obj1 auswirkt.

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

Ausgabe:

Wir ändern die gleichen Werte, die wir zuvor geändert haben, und jetzt können Sie feststellen, dass die Änderung der Eigenschaften von obj2 die Eigenschaften von obj1 nicht beeinflusst.