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:
- Verwenden Sie die spread (
...
) Syntax - Verwenden Sie die
Object.assign()
Methode - Verwenden Sie die
JSON.stringify()
undJSON.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 das
person
– Objekt mit derObject.assign()
– Methode. - Drittens ändern Sie den Vornamen und die Adressinformationen des
copiedPerson
– 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