Matrice Di Copia Javascript

| | | | | | | | | | | | | | | | | | | | | |

In JavaScript, copiare un array non è semplice come usare l’operatore di assegnazione (=) per creare un duplicato. Se hai mai provato questo, sarai sorpreso di scoprire che crea solo un collegamento all’elenco originale. Qual è il problema?

In questa guida parleremo di come copiare un array JavaScript. Esamineremo il codice per tre strategie di array di copia JavaScript in modo che tu possa iniziare a copiare gli array.

Il problema con la copia di array JavaScript

A un certo livello, il "=&rdquo ; L’operatore crea una copia di un array in una nuova variabile. Tuttavia, è più un puntatore che una copia. Questo perché "=" L’operatore crea un riferimento a un array originale. Non crea un duplicato dell’array esistente.

Cerchiamo di creare una copia di un array utilizzando l’operatore di assegnazione senza altro codice:

Il nostro codice restituisce:

Sembra che il nostro array sia stato copiato. "frutta" contiene tutti i valori del nostro "bacche" array.

Ora, proviamo ad aggiungere un elemento alla cartella "frutti" array:

Abbiamo aggiunto "Melone" alla serie di frutti. Quindi stampiamo i valori di "frutti" e "bacche" alla console:

Entrambi i "frutti" e "bacche" contengono gli stessi valori. Questo perché tecnicamente non abbiamo clonato il nostro array. Abbiamo appena creato un riferimento ad esso.

Ogni volta che manipoliamo le "bacche" array, le modifiche verranno apportate nel campo "frutti" array.

Come copiare un array JavaScript

L’operatore di assegnazione non copia un array. Dobbiamo usare un altro approccio. Fortunatamente per noi, ci sono molti modi per creare una copia di un array. I tre approcci principali sono:

  • Utilizzare l’operatore di spread
  • Utilizzare un for loop
  • Utilizzo di Array.from

Discutiamoli uno per uno.

Utilizzo dell’operatore di diffusione

L’operatore di diffusione è una funzionalità introdotta in JavaScript ES6 . Ti consente di accedere al contenuto di un oggetto iterabile. Questo operatore viene spesso utilizzato per creare una copia superficiale di un array.

L’operatore di diffusione è costituito da tre punti, come un’ellissi (&hellip ;). Proviamo a creare una copia del nostro array "berries" da prima:

Abbiamo usato l’operatore spread per creare una copia del nostro array. Controlliamo i valori dei nostri array per assicurarci che siano corretti:

Il nostro codice restituisce:

Il valore "Melone" è stato aggiunto solo ai "frutti" Vettore. Questo perché abbiamo utilizzato l’operatore di diffusione per creare un duplicato delle "bacche" Vettore. Ora, i "frutti" array è il proprio array. I suoi valori sono separati dai "bacche" array.

Uso di un ciclo for

Il metodo collaudato, l’utilizzo di un ciclo for è un buon modo per creare una copia di un array.

Questo metodo potrebbe non essere favorito come l’operatore di diffusione perché richiede più righe di codice. Detto questo, un ciclo for copia bene un oggetto.

Abbiamo dichiarato due elenchi: bacche e frutti. Fruits è inizialmente una lista vuota. Quindi, abbiamo utilizzato un ciclo for per scorrere tutti gli elementi nella cartella "bacche" elenco. Per ogni elemento nell’elenco, il valore viene copiato nella cartella "frutta" array.

Eseguiamo il nostro test per vedere se i nostri array sono separati:

Il nostro codice restituisce:

Successo! "bacche" e "frutta" sono due array separati.

Uso di Array.from()

Il metodo Array.from() trasforma qualsiasi oggetto iterabile in un array. attraverso ogni elemento in un iterabile e lo aggiunge a un nuovo array. Ciò significa che può essere utilizzato per copiare un array.

Creiamo di nuovo una copia del nostro array "bacche":

Questa soluzione, come la sintassi dell’operatore di diffusione, richiede solo due righe di codice. è un modo efficiente e conciso di copiare un array. Ora, andiamo ;s esegui un test per verificare i nostri nuovi array:

Il nostro codice restituisce:

I nostri array sono stati copiati con successo.

Conclusione

Copiare un array in JavaScript è facile quando sai come fare.

L’operatore di assegnazione non è sufficiente per copiare un array se vuoi creare una versione separata di un array. Questo perché l’operatore di assegnazione crea un puntatore a un array esistente; non crea un nuovo array.

Puoi creare una copia di un array usando l’operatore spread, un ciclo for o il metodo Array.from() . Ora sei pronto per copiare gli array in JavaScript come un esperto.