Come clone profondo oggetti in javascript

JavaScript è interamente basato su oggetti, tutto in JavaScript è un oggetto. Gli array sono oggetti, le stringhe sono oggetti e gli oggetti sono oggetti. Quando lavori con oggetti o array, a volte arriva la necessità di copiare o clonare un array o un oggetto.

Esistono due tipi di cloni di oggetti \ array, uno dei quali è cloni poco profondi E l'altro è cloni profondi.

Creare cloni profondi In Vanilla JavaScript, dobbiamo usare un combinazione Di Json parse () funzione e Json Stringify () funzione. In questo post, discuteremo di quali sono cloni superficiali e cloni profondi, come fare cloni in JavaScript e come fare cloni profondi.

Cloni poco profondi contro cloni profondi

Ogni volta che un array \ oggetto contenente un altro array \ oggetto all'interno di esso viene copiato da una variabile a un'altra variabile, gli elementi di quell'array \ oggetto non vengono copiati; Piuttosto un puntatore di riferimento viene copiato nella nuova variabile che indica la vecchia variabile. Tali copie sono conosciute come copie superficiali o cloni poco profondi

Mentre, quando gli elementi di un array \ oggetto vengono copiati direttamente (non il loro puntatore di riferimento) su una nuova variabile insieme all'array nidificato \ oggetto, quella copia è nota come cloni profondi o copie profonde.

Spiegazione con il codice JavaScript

Questi sono concetti JavaScript avanzati, ecco perché useremo esempi di codifica per dimostrare la differenza tra clonazione superficiale e clonazione profonda. Per iniziare, creare un array contenente vari elementi utilizzando la seguente riga di codice:

var originalarray = [true, false, 2, "Google", undefined];

Ora, ci sono due modi per clonare questo array:

• Usando il metodo della fetta
• Utilizzando l'operatore di diffusione

Per creare un clone utilizzando il metodo Slice utilizzare la riga seguente:

var clone1 = originalarray.fetta (0);

E per creare un clone utilizzando l'operatore di diffusione usa la riga seguente:

var clone2 = [... originalarray];

Per verificare se i nostri elementi sono stati copiati o meno possiamo usare la funzione di registro della console per stampare l'array originale e entrambi i nostri cloni:

console.log (originalarray);
console.log (clone1);
console.log (clone2);

Ottiamo il seguente output sulla nostra console:

Per dimostrare che questi sono cloni reali e non riferimenti all'array originale passato all'interno di queste variabili, apporteremo alcune modifiche ai cloni e verificheremo se queste modifiche influiscono sull'array originale o no.

clone1 [0] = 1;
clone2 [1] = "ciao";

Stampa di nuovo tutti gli array sulla console per esaminare le modifiche con le seguenti righe:

console.log (originalarray);
console.log (clone1);
console.log (clone2);

Osserverai la seguente uscita:

Come puoi vedere, le modifiche negli array di cloni non hanno influenzato l'array originale, il che significa che altri array non hanno copiato il riferimento dell'array originale.

Verifica dei cloni poco profondi

Abbiamo visto come clonare semplici array, ma cosa succede se abbiamo un array o un oggetto che contiene un altro array al suo interno, considera il seguente array:

var originalArray = [["Google"]];

Come puoi vedere, abbiamo un array all'interno di un altro array, proviamo a creare un clone di questo array usando il metodo della fetta che abbiamo già usato nell'esempio sopra:

var clone = originalarray.fetta (0);

Abbiamo creato un clone di questo array nella variabile "clone", Stampa entrambi questi array usando la funzione di registro della console:

console.log (originalarray [0]);
console.log (clone [0]);

Dovresti vedere il seguente risultato sulla console dello schermo:

Proviamo a apportare alcune modifiche nell'array clonato con la seguente riga di codice:

clone [0].push ("mappe");

Questo dovrebbe apportare modifiche solo al "clone" array e non nell'array originale, ma è qui che le cose diventano interessanti. Stampa entrambi gli array usando la funzione di registro della console:

console.log (originalarray [0]);
console.log (clone [0]);

Dovresti vedere il seguente risultato sulla tua console:

Puoi facilmente osservare dall'immagine sopra che i cambiamenti nell'array clonato hanno causato cambiamenti nell'array originale. Ciò significa che se il nostro array di oggetti contiene oggetti \ array, la clonazione passa il riferimento agli oggetti nidificati creando così clone poco profondo.

Profonda clonazione in vaniglia javascript

Carena ... sono state molte cose solo per spiegare un concetto di cloni poco profondi Ma poi di nuovo, questi sono concetti di livello avanzato. Per creare cloni profondi usando JavaScript sono disponibili più metodi ma la maggior parte di essi richiede Nodejs. Per creare cloni profondi in vaniglia javascript, è necessario utilizzare una combinazione della funzione JSON Parse () e della funzione JSON Stringify (). Crea un array con un array nidificato al suo interno con la seguente riga di codice:

var originalArray = [["Google"]];

Usa una combinazione di JSON Parse e JSON Stringify () con la riga seguente:

var deepclone = json.Parse (JSON.Stringify (originalArray));

Ora, che abbiamo creato il nostro clone, dobbiamo verificarlo stampandolo sulla console utilizzando la funzione del registro della console:

console.log (clone [0]);

Otterrai il seguente risultato sulla console:

Ora, proviamo a cambiare gli elementi dell'array clonato usando la seguente riga:

DeepClone [0].push ("mappe");

L'ultima cosa che rimane è osservare entrambi gli array sulla console per determinare se cambiare l'array clonato ha cambiato o meno l'array originale:

console.log (originalarray [0]);
console.log (deepclone [0]);

Otterrai il seguente risultato sulla tua console:

Nell'immagine sopra, è possibile osservare che i cambiamenti nel clonato L'array non ha causato alcun cambiamento nell'array originale. Ciò significa che anche gli array nidificati \ oggetti sono stati copiati anziché il loro riferimento passato alla nuova variabile, ed è per questo che tali cloni sono chiamati cloni profondi.

Conclusione

I cloni profondi in vaniglia javascript sono realizzati utilizzando una combinazione di funzione json parse () e la funzione json stringify () durante l'analisi di un oggetto \ array in una nuova variabile. Tutto in JavaScript è un oggetto e quando stiamo cercando di copiare oggetti nidificati, il loro riferimento al puntatore viene copiato nella nuova variabile piuttosto che copiare gli elementi degli array nidificati \. Quando il riferimento di un oggetto viene passato a una nuova modifica dell'oggetto nel nuovo oggetto causa anche cambiamenti nel vecchio oggetto che non è molto efficiente. Questo è il motivo per cui JavaScript ha aggiunto un modo per creare cloni profondi.