Wie kann man Arrays von Objekten in JavaScript tief klonen?

Arrays von Objekten in JavaScript klonen: Eine eingehende Untersuchung

Die Herausforderung

Eine tiefe Kopie eines erstellen Das Erstellen eines Arrays von Objekten, die Verweise auf andere Objekte innerhalb des Arrays enthalten, kann in JavaScript eine komplexe Aufgabe sein. Durch einfaches Klonen des Arrays werden nur die Referenzen kopiert, was zu Änderungen in einem Array führt, die sich auf das andere auswirken.

structuredClone: ​​Eine moderne Lösung

Die neueste und bevorzugte Methode für Deep Das Klonen eines Arrays in JavaScript erfolgt mithilfe von structureClone:

array2 = structuredClone(array1);

Diese Funktion ist in modernen Browsern (Chrome 98, Firefox) verfügbar 94), erfordert aber eine Polyfüllung für eine breitere Kompatibilität.

JSON-basiertes Deep Cloning

Für eine breite Browserunterstützung können JSON-basierte Techniken eingesetzt werden.

Verwenden von JSON.parse und JSON.stringify

Wenn Ihre Objekte vorhanden sind JSON-serialisierbar, Sie können JSON.parse und JSON.stringify für tiefes Klonen verwenden. Diese Methode hat jedoch Vor- und Nachteile:

Vorteile

• Klont sowohl das Array als auch seinen Inhalt.
• Einfache Einzeile Lösung.

Nachteile

• Funktioniert nur bei JSON-serialisierbaren Objekten.
• Die Leistung ist langsamer als bei Verwendung des Spread-Operators.

let clonedArray = JSON.parse(JSON.stringify(nodesArray));

Verwenden des Spread-Operators mit .map

Für flaches Klonen in modernen Browsern kann der Spread-Operator in Kombination mit .map leistungsfähiger sein:

clonedArray = nodesArray.map(a => {return {...a}});

Vorteile

• Schneller als JSON-basiertes Klonen.
• Funktioniert auf allen Arten von Objekte.

Nachteile

• Führt nur einen flachen Klon durch (klont die erste Ebene des Objekts).

Benchmark: Die Spread-Methode ist für ein Array von 20 deutlich schneller als das JSON-basierte Klonen Objekte mit einer Verschachtelungstiefe von 2.

Das obige ist der detaillierte Inhalt vonWie kann man Arrays von Objekten in JavaScript tief klonen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!