Zusammenfassung: In diesem Tutorial erfahren Sie, wie Sie Objekte in JavaScript kopieren, einschließlich Shallow copy und Deep copy., Um ein Objekt in JavaScript zu kopieren, haben Sie drei Möglichkeiten:

  1. Verwenden Sie die spread (...) Syntax
  2. Verwenden Sie die Object.assign() Methode
  3. Verwenden Sie die JSON.stringify() und JSON.parse() Methoden

Im Folgenden wird veranschaulicht, wie ein Objekt mit drei oben genannten Methoden kopiert wird:

Sowohl spread (...) als auch Object.assign() Führen Sie eine flache Kopie durch, während die JSON-Methoden eine tiefe Kopie tragen.

Flache Kopie vs., deep copy

In JavaScript verwenden Sie Variablen zum Speichern von Werten, die primitiv oder Referenzen sein können. Wenn Sie eine Kopie eines in einer Variablen gespeicherten Werts erstellen, erstellen Sie eine neue Variable mit demselben Wert. Für einen primitiven Wert verwenden Sie einfach eine einfache Zuweisung:

Code language: JavaScript (javascript)

Und wenn Sie den Wert der kopierten Variablen ändern, bleibt der Wert des Originals gleich.

Code language: JavaScript (javascript)

Ausgabe:

Wenn Sie jedoch den Zuweisungsoperator für einen Referenzwert verwenden, wird der Wert nicht kopiert., Stattdessen verweisen beide Variablen auf dasselbe Objekt im Speicher:

Code language: JavaScript (javascript)

Und wenn Sie über die neue Variable (copiedPerson) auf das Objekt zugreifen und den Wert seiner Eigenschaft (name) ändern, ändern Sie den Wert der Eigenschaft des Objekts.

Code language: JavaScript (javascript)

Ausgabe:

Code language: CSS (css)

Ein tiefes Kopieren bedeutet, dass der Wert der neuen Variablen von der ursprünglichen Variablen getrennt ist, während eine flache Kopie bedeutet, dass einige Werte noch mit der ursprünglichen Variablen verbunden sind.,

Beispiel kopieren

Betrachten Sie das folgende Beispiel:

In diesem Beispiel:

  • Erstellen Sie zunächst ein neues Objekt mit dem Namen person.
  • Klonen Sie zweitens dasperson – Objekt mit derObject.assign() – Methode.
  • Drittens ändern Sie den Vornamen und die Adressinformationen descopiedPerson – Objekts.,

Hier ist die Ausgabe:

Wenn Sie jedoch die Werte des Person-Objekts anzeigen, werden Sie feststellen, dass sich die Adressinformationen geändert haben, aber der Vorname:

Code language: JavaScript (javascript)

Ausgabe:

Der Grund dafür ist, dass die Adresse Referenzwert ist, während der Vorname ein primitiver Wert ist. Sowohl person als auch copiedPerson verweisen auf verschiedene Objekte, aber diese Objekte verweisen auf dieselben address Objekte.,

Deep copy example

Das folgende Snippet ersetzt die Object.assign() – Methode durch die JSON-Methoden, um eine deep copy der person – Objekt:

Ausgabe

Code language: CSS (css)

In diesem Beispiel werden alle Werte in der copiedPerson Objekt werden vom ursprünglichen person Objekt getrennt. In diesem Tutorial haben Sie gelernt, Objekte in JavaScript entweder mit flacher oder tiefer Kopie zu kopieren.

  • War dieses tutorial hilfreich ?
  • YesNo