Deep Copy di un oggetto in JavaScript utilizzando structureClone

Se sei qui, scommetto che hai usato JSON.parse()+ JSON.stringify()trucco centinaia di volte per creare una copia completa di un oggetto in JavaScript. Non ne hai più bisogno, il nativo structuredClone()è qui per aiutarti.

Copia superficiale vs Copia profonda

Prima di tutto, ricordiamo qual è la differenza tra una Shallow Copy e una Deep Copy:

• Copia superficiale: significa che viene copiato solo il primo livello dell'oggetto . Si fa riferimento a livelli più profondi. Puoi ottenere ciò in JavaScript utilizzando l'operatore Spread ( …) o utilizzando Object.assign().
• Copia profonda: significa che vengono copiati tutti i livelli dell'oggetto . Questa è una copia fedele dell'oggetto. Puoi farlo usando JSON.parse()+ JSON.stringify()e ora puoi farlo anche con native structuredClone().

Deep Copy utilizzando il clone strutturato

Il metodo globale structuredClone()crea una copia completa di un determinato valore utilizzando l' algoritmo di clone strutturato .

Come puoi vedere in questo frammento di codice:

• Dopo aver aggiornato una proprietà nel primo livello degli oggetti clonati, la proprietà originale non viene aggiornata .
• Dopo aver aggiornato una proprietà a un livello più profondo, la proprietà originale non viene aggiornata . Questo accade perché, in questo caso, vengono copiati anche i livelli più profondi.

Buona codifica!