Copia superficiale vs copia profonda in javascript

L'attività di copia in JavaScript è abbastanza semplice per i tipi di dati primitivi. Tuttavia, devi scegliere attentamente tra il Copia superficiale e profonda tecniche durante la gestione di oggetti e riferimenti.

In Copia superficiale solo indirizzi di riferimento sono copiati; Pertanto, modificare un oggetto applicherà anche le stesse modifiche a un altro oggetto. Per evitare una situazione del genere, è possibile utilizzare la procedura di copia profonda.

Questo post spiegherà il concetto di copia superficiale e copia profonda usando esempi appropriati. Quindi iniziamo!

Copia superficiale in JavaScript

Un meccanismo in cui un oggetto è copiato dal punto di vista bit su un oggetto specificato è noto come copia superficiale.

• Il metodo di copia superficiale incolla una copia esatta di un particolare oggetto in un altro oggetto.
• È utilizzato principalmente per la copia di elementi di array monodimensionali, dove copia solo gli elementi presenti al primo livello.
• Copia solo gli indirizzi di riferimento a un altro oggetto.

Metodi per copiare un oggetto superficiale in JavaScript

Per copiare un oggetto JavaScript in un altro oggetto, è possibile utilizzare i seguenti metodi:

• Oggetto.Metodo Assegna ()
• Distribuisci operatore […]
• Operatore di assegnazione "="

Nota: Se utilizzi il "Operatore di diffusione" o "Oggetto.assegnare()" Metodo, quindi dopo una copia superficiale, l'oggetto copiato viene disconnesso dall'oggetto originale, mentre, nel caso dell'utilizzo di "Incarico"Operatore, alterando l'oggetto copiato modificherà anche l'oggetto originale.

Discuteremo brevemente ciascuno dei metodi menzionati per copiare un oggetto superficiale in JavaScript.

Copia superficiale un oggetto in JavaScript usando l'operatore di diffusione

IL "diffusione"L'operatore può essere utilizzato per la copia poco profonda di un oggetto. È rappresentato come tre punti consecutivi "...".

Sintassi dell'utilizzo dell'operatore di spread per copiare un oggetto in JavaScript

let object2 = … object1;

Qui, l'operatore di spread copierà la coppia di valore chiave "Object1" a "Object2".

Esempio: copia superficiale un oggetto in JavaScript usando l'operatore di diffusione

Prima di tutto, creeremo un oggetto chiamato "dipendente"Avere due coppie di valore chiave:

const dipendente =
Nome: 'Alex',
Designazione: "Manager"
;

Quindi, copriremo poco profondi "dipendente"Oggetto al nuovo creato"EMP1"Oggetto usando l'operatore di spread:

let emp1 = ... dipendente;

Inoltre, è possibile verificare se modifica i valori delle proprietà del "EMP1"L'oggetto può anche influenzare il"dipendente"Proprietà del nome dell'oggetto:

EMP1.name = 'max';

console.Log ("Nome EMP1:" + EMP1.nome);

console.Registro ("Nome dipendente:" + dipendente.nome); [/cc]

Abbiamo copiato con successo il "dipendente"Oggetto a"EMP1”Oggetto e modificando il"EMP1.nome"Il valore della proprietà non ha applicato alcuna modifica al"dipendente.nome" proprietà:

Copia superficiale in JavaScript usando l'oggetto.Metodo Assegna ()

Il javascript "Oggetto.assegnare()"Il metodo viene utilizzato per copiare superficiale il"valore chiave"Coppia di un oggetto già creato in un altro oggetto. L'oggetto originale non sarà influenzato durante l'utilizzo dell'oggetto.Metodo Assegna ().

Sintassi dell'uso dell'oggetto.Metodo Assegna () alla copia superficiale in JavaScript

Oggetto.Assegna (target, fonte)

Qui, "bersaglio"Rappresenta l'oggetto JavaScript la cui coppia di valore chiave verrà copiata e"fonte"Indica l'oggetto in cui verrà posizionata la coppia di valore chiave copiato.

Esempio: copia superficiale in JavaScript usando l'oggetto.Metodo Assegna ()

Invocheremo il "Oggetto.assegnare()"Metodo per la copia superficiale il "Dipendente" oggetto a "EMP1":

let emp1 = ; oggetto.Assegna (EMP1, dipendente);

IL "Oggetto.assegnare()"Il metodo restituirà l'oggetto target, che è"EMP1" nel nostro caso:

Successivamente, aggiorneremo il "Emp.nome" costo dell'immobile:

EMP1.name = 'Stepheny'; console.Log ("Nome EMP1:" + EMP1.nome);
console.registro ("dipendente.Nome: " + dipendente.nome);

Come puoi vedere nell'output di seguito, alterando il "Emp.nome"Il valore della proprietà non ha modificato il"dipendente"Oggetto.

Copia superficiale in JavaScript utilizzando l'operatore di assegnazione

L'operatore di assegnazione "="Può anche aiutare nella copia poco profonda di un oggetto in JavaScript. Nel caso di utilizzo dell'operatore di assegnazione, entrambe le variabili si riferiranno allo stesso oggetto. Le modifiche in un oggetto influenzerà anche il valore della proprietà dell'oggetto corrispondente:

Sintassi dell'utilizzo dell'operatore di assegnazione a copia superficiale in JavaScript

Object2 = Object1

Qui, l'operatore di assegnazione copia il "Object1" a "Object2".

Esempio: copia superficiale in JavaScript usando l'operatore di assegnazione

Ora utilizzeremo l'operatore di assegnazione JavaScript per la copia superficiale "Dipendente" oggetto a "EMP1":

let emp1 = ; emp1 = dipendente;

Nel prossimo passaggio, specificheremo "Stepheny"Come valore di"EMP1.nome" proprietà:

EMP1.name = 'Stepheny'; console.Log ("Nome EMP1:" + EMP1.nome);
console.registro ("dipendente.Nome: " + dipendente.nome);

L'output fornito significa che cambiare il "Emp.nome"Il valore della proprietà non ha modificato il Oggetto "dipendente" "nome" proprietà:

Ora discuteremo del concetto di copia profonda un oggetto in JavaScript.

Copia profonda in JavaScript

"Copia profonda"È una procedura ricorsiva della copia dell'oggetto. Questo meccanismo crea un nuovo oggetto e quindi clona la coppia di valore chiave dell'oggetto specificato. Questa affermazione indica che, mentre una copia profonda, un oggetto JavaScript è completamente clonato in un altro oggetto. Successivamente, l'oggetto copiato viene disconnesso dall'oggetto originale.

Metodi per copiare profondamente un oggetto in JavaScript

I metodi utilizzati per la copia profonda un oggetto JavaScript sono JSON.Stringify () e JSON.parse (), Laddove il metodo Stringify () converte un particolare oggetto JavaScript a una stringa, quindi il metodo Parse () esegue l'operazione di analisi e restituisce un oggetto.

Sintassi dell'utilizzo di JSON.Stringify () e JSON.Metodi Parse () per copiare profondamente un oggetto in JavaScript

Let Object2 = JSON.Parse (JSON.stringify (object1));

Qui, il Stringify () method converte JavaScript "Oggetto1"A una stringa, quindi il metodo Parse () esegue l'operazione di analisi e i resi che verranno archiviati in"Oggetto2".

Esempio: copia profonda in javascript un oggetto in javascript usando json.Stringify () e JSON.Metodi Parse ()

In questo esempio, abbiamo usato il Metodi Stringify () e Parse () copiare "Dipendente" al "EMP1" oggetto. IL "JSON.Stringify ()Il metodo "convertirà il"dipendente”Oggetto in un"corda"E poi il"JSON.parse ()"Metodo analizzare la stringa risultante e restituire un oggetto JavaScript:

Let Employee =
Nome: 'Alex',
Indirizzo: City: 'Ankara', Paese: 'Turchia'
;
var emp1 = json.Parse (JSON.Stringify (dipendente));
console.log (emp1);

Dato l'output significa che abbiamo copiato con successo il "Dipendente" oggetto a "EMP1":

Infine, modificheremo alcune proprietà dell'oggetto "EMP1" e quindi verificheremo il risultato:

EMP1.name = 'max';
EMP1.indirizzo.città = 'Istanbul';
console.log ("EMP1.Nome: " + EMP1.nome);
console.log ("EMP1.indirizzo.Città: " + EMP1.indirizzo.città);
console.registro ("dipendente.Nome: " + dipendente.nome);
console.registro ("dipendente.indirizzo.Città: " + dipendente.indirizzo.città);

Dopo aver eseguito l'operazione di copia profonda, il “EMP1"Viene disconnesso dal"dipendente,"Quindi eventuali modifiche apportate in"EMP1"Non influenzerà il"dipendente"Oggetto:

Abbiamo compilato tutte le informazioni essenziali relative a copia superficiale e copie profonde in JavaScript. Puoi esplorarlo ulteriormente in base alle tue esigenze.

Conclusione

Distribuisci operatore “[…]”, “Oggetto.Operatore Assegna () "e" Assegnazione " sono metodi che ti consentono Oggetti di copia superficiali e per copiare profondamente un oggetto JavaScript, JSON.Stringify () e JSON.Metodi Parse () vengono utilizzati, dove il JSON.Il metodo Stringify () converte un particolare oggetto in una stringa, che viene quindi analizzato usando JSON.Metodo Parse (). Questo post ha spiegato il concetto di copia superficiale e profonda usando esempi appropriati.