structuredClone: neuer Ansatz zur Objektklonung in JavaScript

Die structuredClone()-Funktion ist eine neuere Ergänzung in JavaScript, die eine Methode zur Erstellung von tiefen Kopien von Objekten bereitstellt. Sie kann mit einer Vielzahl von Datentypen umgehen und bietet bemerkenswerte Vorteile gegenüber früheren native Methoden wie JSON.parse() / JSON.stringify() und dem Spread-Operator. Ihre Fähigkeit, komplexe geschachtelte Objekte ohne gemeinsame Referenzen zu klonen, stellt wirklich unabhängige Kopien sicher und verbessert die Effizienz und Zuverlässigkeit des Codes.

Wie structuredClone sich von JSON.parse / JSON.stringify unterscheidet

Während JSON.parse() und JSON.stringify() historisch gesehen gerne verwendet wurden, um eine tiefe Kopie eines Objekts zu erstellen, haben sie bestimmte Einschränkungen. Beispielsweise funktionieren sie nicht gut mit Objekten, die Funktionen, Date-Objekte, undefined, Infinity oder NaN enthalten. Darüber hinaus können sie nicht mit komplexen JavaScript-Objekten wie Map, Set oder ArrayBuffer umgehen.

Hier ist Beispiels des Problems mit dem Klonen eines Date-Objekts mit JSON.parse / JSON.stringify:

// Erstellen eines Date-Objekts
let original = { a: 1, b: { c: new Date() } }

// Klonen mit JSON.parse / JSON.stringify
let copyJson = JSON.parse(JSON.stringify(original))

console.log(copyJson.b.c instanceof Date)
// output: false

Wie Sie sehen können, konvertiert JSON.parse / JSON.stringify das Date-Objekt in einen String und klont es nicht richtig.

structuredClone() hingegen kann mit einer Vielzahl von JavaScripts eingebauten Typen umgehen, einschließlich:

Alle primitiven Typen
Objekt und Array
Map, Set
Blob und Datei
und mehr...

Tatsächlich kann bis auf Error-Objekte und Funktionen alles geklont werden.

Wie structuredClone sich vom Spread-Operator unterscheidet

Der Spread-Operator (...) ist eine weitere beliebte Methode zum Klonen von JavaScript-Objekten. Dieser Operator führt jedoch nur eine flache Kopie durch, kopiert also nur die oberste Schicht des Objekts und teilt Referenzen für alle geschachtelten Objekte. Dies kann zu unerwartetem Verhalten führen, wenn geschachtelte Eigenschaften geändert werden.

Hier ist ein Beispiel eines geklonten Date-Objekts mit dem Spread-Operator:

// Klonen mit dem Spread-Operator
let copySpread = { ...original }
console.log(copySpread.b.c instanceof Date) // gibt aus: true

copySpread.b.c.setFullYear(2030)
console.log(original.b.c.getFullYear())
// gibt aus: 2030, weil es die Referenz teilt

Wie gezeigt, klont der Spread-Operator das Date-Objekt, teilt aber dieselbe Referenz mit dem Original-Date-Objekt, was darauf hindeutet, dass Änderungen am kopierten Objekt das Originalobjekt beeinflussen.

Aber mit structuredClone() ist die Geschichte anders:

// Klonen mit structuredClone
let copyClone = structuredClone(original)
console.log(copyClone.b.c instanceof Date) // gibt aus: true

copyClone.b.c.setFullYear(2030)
console.log(original.b.c.getFullYear())
// gibt aus: 2023, es teilt nicht die Referenz

Die structuredClone()-Funktion klont das Date-Objekt korrekt und teilt nicht die Referenz, was sicherstellt, dass Änderungen am kopierten Objekt das Originalobjekt nicht beeinflussen.

Schlussfolgerung

Zusammenfassend stellt die structuredClone()-Funktion eine bedeutende Verbesserung gegenüber früheren Methoden zur Objektklonung in JavaScript dar. Sie bietet robuste Tiefenklonungsfähigkeiten, die mit einer Vielzahl von Datentypen umgehen können, was ihr einen Vorteil gegenüber traditionellen Methoden wie JSON.parse() / JSON.stringify() und dem Spread-Operator verschafft. Alternativ lohnt der Blick auf die Lösung von Lodash _.cloneDeep.