Come copiare oggetti e array in JavaScript

Gennaio 9, 2021

Fare una copia superficiale di un array o di un oggetto significa creare nuovi riferimenti ai valori primitivi all’interno dell’oggetto, copiandoli.

Ciò significa che le modifiche all’array originale non influenzeranno l’array copiato, che è ciò che accadrebbe se solo il riferimento all’array fosse stato copiato (come si verificherebbe con l’operatore di assegnazione=).

Una copia superficiale si riferisce al fatto che viene copiato solo un livello e che funzionerà bene per un array o un oggetto contenente solo valori primitivi.,

Per gli oggetti e gli array contenenti altri oggetti o array, la copia di questi oggetti richiede una copia approfondita. In caso contrario, le modifiche apportate ai riferimenti nidificati modificheranno i dati nidificati nell’oggetto o nell’array originale.

In questo articolo, descrivo 4 metodi per fare una copia superficiale e poi 5 metodi per fare una copia profonda in JavaScript.,

copia Superficiale utilizzando …

1. L’operatore di diffusione (…) è un modo conveniente per creare una copia superficiale di un array o di un oggetto —quando non c’è nidificazione, funziona alla grande.,

Come mostrato sopra, l’operatore spread è utile per creare nuove istanze di array che non si comportano in modo imprevisto a causa di vecchi riferimenti. L’operatore spread è quindi utile per l’aggiunta a un array nello stato React.

copia Superficiale utilizzando .slice ()

2.,Per gli array in particolare, utilizzando il built-in .slice() metodo funziona lo stesso come la diffusione dell’operatore — la creazione di una copia superficiale di un livello:

copia Superficiale utilizzando .assegna ()

3.,Lo stesso tipo di copia superficiale si sarebbe creata usando Object.assign(), che può essere utilizzato con qualsiasi oggetto o un array:

copia Superficiale matrici utilizzo di Array.da ()

4.,Un altro metodo per copiare un array JavaScript utilizza Array.from(), che sarà anche una copia superficiale, come mostrato in questo esempio:

Se un oggetto o un array che contiene altri oggetti o gli array, superficiale delle copie lavoro in modo imprevisto, perché gli oggetti nidificati in realtà non sono clonati.

Per gli oggetti profondamente annidati, sarà necessaria una copia profonda. Spiego perché qui sotto.,

attenzione per il nidificati profondamente Gotcha!

D’altra parte, quando gli oggetti JavaScript inclusi gli array sono profondamente annidati, l’operatore di diffusione copia solo il primo livello con un nuovo riferimento, ma i valori più profondi sono ancora collegati tra loro.,

Il nome di Lodash deriva dalla libreria a cui si fa riferimento come underscore (_), un “low dash” o lodash in breve.

copia Profonda con Ramda

2.,La libreria di programmazione funzionale Ramda include il metodo R.clone(), che crea una copia profonda di un oggetto o array.

si noti che R.clone() da Ramda è equivalente a _.cloneDeep() per lodash, come Ramda non dispone di una copia superficiale metodo di supporto.,

copia Profonda con funzione personalizzata

3. È abbastanza facile scrivere una funzione JavaScript ricorsiva che creerà una copia profonda di oggetti o array nidificati. Ecco un esempio:

Nota che devo anche controllare null poiché typeof null è “oggetto.,”

copia Profonda con JSON.analizza / stringifica

4. Se i tuoi dati corrispondono alle specifiche (vedi sotto), allora JSON.parse seguito da JSON.stringify copierà in profondità il tuo oggetto.,plex tipi di all’interno del vostro oggetto, molto semplice, una fodera di profonda clonare un oggetto è: JSON.parse(JSON.stringify(object))” — Dan Dascalescu nel suo StackOverflow risposta

Per dimostrare alcune ragioni per cui questo metodo non è generalmente raccomandato, qui è un esempio di creazione di una copia profonda utilizzando JSON.parse(JSON.stringify(object)):

Una funzione personalizzata o le librerie citate possono fare una copia profonda, senza doversi preoccupare del tipo di contenuto, anche se i riferimenti circolari in allarme tutti loro.,

Next I discuss a blazing-fast library called rfdc that can handle circular references while being as fast as a custom deep copy function.

Really fast deep copy? Think rfdc

5.,622333″>

“rdfc clones all JSON types: •Object •Array •Number •String •null

With additional support for: •Date (copied) •undefined (copied) •Function (referenced) •AsyncFunction (referenced) •GeneratorFunction (referenced) •arguments (copied to a normal object)

All other types have output values that match the output of JSON.parse(JSON.stringify(o)).,” —rfdc Documentazione

Con rfdc è abbastanza straight-forward, come le altre biblioteche:

rfdc libreria supporta tutti i tipi e supporta anche i riferimenti circolari, un’opzione di bandiera che diminuisce le prestazioni di circa il 25%.

I riferimenti circolari interromperanno gli altri algoritmi di copia profondi discussi.,

Tale libreria sarebbe utile se si ha a che fare con un oggetto grande e complesso come uno caricato da file JSON da 3 MB-15 MB di dimensione.,e poco profonde copie sono il più veloce, seguito da profonda copie utilizzando una funzione personalizzata o rfdc:

“copia Profonda da prestazione: Classifica dal migliore al peggiore

“Riassegnazione=” (matrici di stringhe numero di matrici solo)

Slice (matrici di stringhe numero di matrici solo)

Concatenazione (matrici di stringhe numero di matrici solo)

funzione Personalizzata: for-loop o copia ricorsiva

jQuery $.extend

JSON.parse (matrici di stringhe numero di array, oggetto array solo)

il carattere di Sottolineatura.,js s _.clone (matrici di stringhe numero di matrici solo)

Lo-Dash s _.cloneDeep” — Tim-Montague nella sua StackOverflow risposta

Con JSON.parse/JSON.stringify crea problemi circa i tipi di dati, così rfdc è consigliato, a meno che non si desidera scrivere una funzione personalizzata.,

Conclusione

in realtà è abbastanza facile da evitare di dover profonda copia in JavaScript, se è possibile non solo nido oggetti e array all’interno di ogni altro.,

Perché in quel caso — dove non c’è nidificazione e gli oggetti e gli array contengono solo valori primitivi — fare una copia superficiale con l’operatore spread (…),.slice() e.assign() funzionano tutti alla grande.

Ma, nel mondo reale, dove gli oggetti hanno array al loro interno, o viceversa, sarà necessario utilizzare una copia profonda. Raccomando rfdc per cloni profondi.,

(Si noti che alcuni potrebbero anche suggerire di usareJSON.stringify() seguito daJSON.parse(), ma questo non è un modo affidabile per fare una copia profonda.)

Ora esci e copia in profondità alcuni oggetti nidificati!

bibliografia

Alligatore.,io ha un grande articolo sulla clonazione profonda usando lodash:

Samantha Ming spiega copie superficiali e profonde su dev.to:

Articolo di Peter Tasker su dev.,generato molti commenti, tra cui una spiegazione di quando JSON.parse(JSON.stringify(obj)) non riesce:

James Dorr copre la necessità di copiare quando si aggiunge un array di Reagire Stato (dal Reagire Stato è immutabile) in JavaScript in un inglese semplice:

Ramón Miklus utilizza immutabilità-helper, una libreria usata per mantenere l’immutabilità dei dati, invece di lodash di copia completa su Codementor:

Parlando di immutabilità, Gabriel hotel di lebec ha una grande guida in dev.,to:

Lima