Aggiungi elementi in un array in JavaScript

1. Usa la proprietà .length dell’array per aggiungere elementi in un array in JavaScript
2. Usa il metodo push() per aggiungere elementi in un array in JavaScript
3. Usa il metodo unshift() per aggiungere elementi in un array
4. Usa il metodo splice() per aggiungere elementi in un array
5. Usa il metodo concat() per aggiungere elementi in un array
6. Usa la sintassi spread per aggiungere elementi in un array

In questo articolo impareremo come aggiungere elementi in un array in JavaScript.

Esistono diversi metodi per aggiungere un elemento a un array in JavaScript. Possiamo aggiungere un singolo elemento, più elementi e persino un intero array a un dato array. Possiamo utilizzare un metodo a seconda che si desideri mutare o meno, requisiti di velocità ed efficienza, leggibilità del codice.

Usa la proprietà .length dell’array per aggiungere elementi in un array in JavaScript

È l’approccio classico in cui otteniamo l’ultimo indice vuoto dell’array utilizzando la lunghezza totale dell’array e inseriamo un elemento in quell’indice. Questo metodo è il più facile da usare e fornisce un’eccellente efficienza. Ci consente di aggiungere solo un elemento alla volta. È un metodo mutativo perché cambia l’array originale.

let arr = [0, 1, 2];
arr[arr.length] = 3;
console.log(arr);

Produzione:

[0, 1, 2, 3]

Nel codice sopra, otteniamo l’ultimo indice dell’array usando arr.length come 3 e poi aggiungiamo elementi a quegli indici.

Usa il metodo push() per aggiungere elementi in un array in JavaScript

Il metodo push() viene utilizzato per aggiungere elementi alla fine dell’array. Possiamo aggiungere un singolo elemento, più elementi o anche un array. È la più semplice e una delle opzioni più veloci, in alcuni casi batte anche il metodo precedente utilizzando Array.length in array di grandi dimensioni. Le azioni eseguite da push() possono essere annullate con il metodo .pop(). Quando più elementi vengono passati insieme, il loro ordine viene mantenuto dall’operatore push(). Questo metodo cambia anche l’array e quindi è mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.push(4);        // single item
arr.push(5, 6, 7);  // multiple items
arr.push(...arr2);  // spread operator
console.log(arr);

Produzione:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Nel codice sopra, abbiamo dimostrato tutti i 3 casi: aggiunta di un singolo elemento, più elementi e persino un intero array utilizzando la sintassi di diffusione. Tutti gli elementi vengono aggiunti alla fine dell’array.

Usa il metodo unshift() per aggiungere elementi in un array

Il metodo unshift() ci aiuta ad aggiungere un elemento all’inizio dell’array. Restituisce la nuova lunghezza dell’array. Può essere chiamato o applicato a oggetti simili a un array nelle proprietà. Quando più elementi vengono passati insieme, il loro ordine viene mantenuto dall’operatore unshift(). Questo metodo cambia anche l’array e quindi è mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.unshift(4);        // single item
arr.unshift(5, 6, 7);  // multiple items
arr.unshift(...arr2)   // spread operator
console.log(arr);

Produzione:

[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]

Nel codice sopra, abbiamo dimostrato tutti e 3 i casi: aggiunta di un singolo elemento, più elementi e persino un intero array utilizzando la sintassi diffusa. Notare come questa operazione sia diversa da push(), tutti gli elementi vengono aggiunti all’inizio dell’array.

Usa il metodo splice() per aggiungere elementi in un array

Il metodo splice() può modificare il contenuto dell’array aggiungendo/rimuovendo elementi. Richiede i seguenti 3 argomenti:

1. indice: un valore intero che specifica la posizione per aggiungere/rimuovere elementi. Possiamo anche specificare un indice dal retro dell’array utilizzando indici negativi.
2. howmany: è un parametro opzionale. Specifica quanti elementi devono essere rimossi dall’array. Se è impostato su 0, nessun elemento viene rimosso.
3. item1, item2, ... ,itemx: gli elementi da aggiungere all’array.

Questo metodo cambia anche l’array e quindi è mutativo.

const arr = [1, 2, 3, 4, 5];
arr.splice(4, 3, 7, 8, 9);
console.log(arr);

Produzione:

[1, 2, 3, 4, 7, 8, 9]

Nel codice sopra, abbiamo selezionato l’indice 4 e aggiunto 3 elementi 7,8,9 a quell’indice.

Usa il metodo concat() per aggiungere elementi in un array

Il metodo concat() prende gli array come input e li concatena insieme, cioè prende un array e aggiunge il resto alla sua fine. Ma questo operatore non modifica l’array originale e restituisce un array completamente nuovo contenente il risultato combinato. Può richiedere due o più array e concatenarli insieme. Poiché questo metodo non modifica l’array dato, non è mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = arr.concat(arr2);
console.log(arr3);

Produzione:

[1, 2, 3, 8, 9, 10]

Nel codice precedente, prendiamo due array, arr e arr2, e chiamiamo la funzione concat() per concatenarli per formare il nuovo array - arr3.

Usa la sintassi spread per aggiungere elementi in un array

Possiamo usare la sintassi spread per aggiungere array completi a un dato array. È un metodo non mutativo poiché distribuiamo semplicemente gli elementi dell’array in un nuovo array. È molto simile all’operazione concat(). Ci aiuta a creare una copia o unire due array separati. È importante utilizzare con attenzione la sintassi di diffusione. Se usiamo la sintassi const arr = [arr1, arr2]; otteniamo un array annidato contenente due sottoarray mentre se usiamo const arr=[...arr1 , ...arr2]; concateniamo insieme gli elementi di entrambi gli array.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = [...arr, ...arr2];

Produzione:

[1, 2, 3, 8, 9, 10]

Nel codice precedente, abbiamo usato l’operatore spread per aggiungere due array, arr e arr2, in un nuovo array - arr3.

Tutti i metodi di cui sopra sono supportati da tutti i principali browser tranne la sintassi diffusa. Internet Explorer non supporta la sintassi diffusa.