Tiefe Kopie eines Objekts in JavaScript mit structureClone

Wenn Sie hier sind, wetten Sie, dass Sie JSON.parse()den + JSON.stringify()-Trick hunderte Male verwendet haben, um eine tiefe Kopie eines Objekts in JavaScript zu erstellen. Das brauchen Sie nicht mehr, der Einheimische structuredClone()ist hier, um Ihnen zu helfen.

Flache Kopie vs. tiefe Kopie

Erinnern wir uns zunächst daran, was der Unterschied zwischen einer Shallow Copy und einer Deep Copy ist:

• Flache Kopie: bedeutet, dass nur die erste Ebene des Objekts kopiert wird . Auf tiefere Ebenen wird verwiesen. Dies erreichen Sie in JavaScript mit dem Spread-Operator ( …) oder mit Object.assign().
• Tiefe Kopie: bedeutet, dass alle Ebenen des Objekts kopiert werden . Dies ist eine echte Kopie des Objekts. Sie können dies mit JSON.parse()+ tun JSON.stringify(), und jetzt auch mit nativem structuredClone().

Deep Copy mit StructuredClone

Die globale Methode erstellt mithilfe des strukturierten KlonalgorithmusstructuredClone() eine tiefe Kopie eines bestimmten Werts .

Wie Sie in diesem Codeausschnitt sehen können:

• Nach dem Aktualisieren einer Eigenschaft auf der ersten Ebene der geklonten Objekte wird die ursprüngliche Eigenschaft nicht aktualisiert .
• Nach dem Aktualisieren einer Eigenschaft auf einer tieferen Ebene wird die ursprüngliche Eigenschaft nicht aktualisiert . Dies liegt daran, dass in diesem Fall auch tiefere Ebenen kopiert werden.

Viel Spaß beim Codieren!