Riepilogo: in questo tutorial, imparerai come copiare oggetti in JavaScript, tra cui shallow copy e deep copy., Per copiare un oggetto in JavaScript, si hanno tre opzioni:

  1. Utilizzare lo spread (...) sintassi
  2. Utilizzare il Object.assign() metodo
  3. Utilizzare il JSON.stringify() e JSON.parse() metodi

L’esempio seguente illustra come copia di un oggetto utilizzando tre metodi di cui sopra:

spread (...) e Object.assign() eseguire una copia superficiale, mentre il JSON metodi di portare una copia profonda.

Copia superficiale vs., deep copy

In JavaScript, si utilizzano variabili per memorizzare valori che possono essere primitivi o riferimenti. Quando si effettua una copia di un valore memorizzato in una variabile, si crea una nuova variabile con lo stesso valore. Per un valore primitivo, si utilizza semplicemente un semplice compito: 

Code language: JavaScript (javascript)

E quando si modifica il valore della variabile copiata, il valore dell’originale rimane lo stesso.

Code language: JavaScript (javascript)

Output:

Tuttavia, se si utilizza l’operatore di assegnazione per un valore di riferimento, non verrà copiato il valore., Invece, entrambe le variabili faranno riferimento allo stesso oggetto nella memoria:

Code language: JavaScript (javascript)

E quando si accede all’oggetto tramite la nuova variabile (copiedPerson) e si modifica il valore della sua proprietà (name), si modifica il valore della proprietà dell’oggetto.

Code language: JavaScript (javascript)

Output:

Code language: CSS (css)

Una copia profonda significa che il valore della nuova variabile è disconnesso dalla variabile originale mentre una copia superficiale significa che alcuni valori sono ancora connessi alla variabile originale.,

Esempio di copia superficiale

Si consideri il seguente esempio:

In questo esempio:

  • Innanzitutto, creare un nuovo oggetto denominatoperson.
  • In secondo luogo, clonare l’oggettoperson utilizzando il metodoObject.assign().
  • In terzo luogo, modificare il nome e le informazioni di indirizzo delcopiedPerson oggetto.,

Ecco l’output:

Tuttavia, quando mostri i valori dell’oggetto person, scoprirai che le informazioni sull’indirizzo sono cambiate ma il nome: 

Code language: JavaScript (javascript)

Output:

Il motivo è che l’indirizzo è valore di riferimento mentre il nome è un valore primitivo. Entrambi person e copiedPerson fanno riferimento a oggetti diversi ma questi oggetti fanno riferimento agli stessi address oggetti.,

copia Profonda di esempio

Il seguente snippet di codice sostituisce il Object.assign() metodo di JSON metodi per eseguire una copia profonda person oggetto:

Uscita

Code language: CSS (css)

In questo esempio, tutti i valori nel copiedPerson oggetto sono disconnesso dall’originale person oggetto. In questo tutorial, hai imparato come copiare gli oggetti in JavaScript usando una copia superficiale o profonda.

  • Questo tutorial è stato utile ?
  • Sì