Per manipolare gli array javascript esistono numerosi metodi e in questo articolo sono trattati quelle più utili e comuni.

Altre informazioni sugli array javascript.

L’array mostrato negli esempi è un semplice elenco di valori numerici.

var numeri = [34,5, 9, 12, 21];

Per conoscere il numero di elementi di cui è composto l’array si può usare la proprietà lenght come mostrato di seguito.

document.write(numeri.length); // 5

Si ricorda che il nome dell’array restituisce gli elementi contenuti separati da virgole.

document.write(numeri+"<br>"); // Stampa: 34,5, 9, 12, 21

Manipolare gli array javascript

I metodi per manipolare gli array javascript sono numerosi, vediamo i più comuni.

Rimuovere elementi

Per rimuovere elementi da un array utilizzare i metodi .pop(), che restituisce e rimuove l’ultimo elemento, e .shift(), che restituisce e rimuove il primo elemento dell’array.

var numeri = [34,5, 9, 12, 21];
numeri.shift(); // Rimuove 34
numeri.pop(); // Rimuove 21
document.write(numeri+"<br>"); // 5,9,12

Entrambi i metodi restituiscono l’elemento prima di rimuoverlo dall’array.

document.write(numeri.shift()+"<br>"); //34
document.write(numeri.pop()+"<br>"); // 21

Aggiungere elementi all’array

Per aggiungere un elemento all’inizio dell’array si usa il metodo .unshift() mentre per aggiungere un nuovo elemento alla fine usare il metodo .push().

numeri.unshift(15); //Aggiunge un valore all'inizio
numeri.push(19); // Aggiunge un valore alla fine
document.write(numeri+"<br>"); // 15,5,9,12,19

Quando si aggiunge un elemento all’inizio dell’array con .unshift() gli altri elementi vengono scalati di un posto.

Ordinare gli elementi

Per ordinare gli elementi di un array in base al valore usare il metodo sort().

numeri.sort();
document.write(numeri+"<br>"); // 12,21,34,5,9

Il metodo .sort() ordina gli elementi in modo alfabetico crescente (a – z). Il metodo .sort() accetta però una funzione di comparazione come parametro opzionale, come quella mostrata nell’esempio.

document.write(numeri.sort(function(a, b){return a-b})+"<br>");

Il risultato restituito dalla funzione consente l’ordinamento numerico degli elementi dell’array. Per altre informazioni consultare la pagina Array.prototype.sort() di MDN.

Per ordinare gli elementi in modo decrescente si può usare il metodo .reverse() dopo il metodo .sort().

document.write(numeri.sort(function(a, b){return a-b}) +"<br>");//5,9,12,21,34
document.write(numeri.reverse()+"<br>"); // 34,21,12,9,5

Il metodo .reverse() inverte l’ordine degli elementi di un array.

Manipolare gli array javascript

Manipolare gli array javascript

I metodi slice() e splice()

Il metodo .slice() restituisce una parte di un array. Il primo argomento indica la posizione di partenza mentre il secondo argomento indica il numero di elementi da restituire.

document.write(numeri.slice(0,3)+"<br>"); // Restituisce 34,5,9

L’esempio precedente restituisce, a partire dal primo elemento (0), tre elementi (3).

Il metodo .splice() aggiunge o rimuove elementi in un array. Quando gli elementi vengono rimossi, .splice() li restituisce.

numeri.splice(1,1,54);
document.write(numeri+"<br>"); // 34,54,9,12,21

Il metodo .splice() richiede tre argomenti che indicano, nell’ordine:

  • la posizione iniziale da cui iniziare ad aggiungere o eliminare elementi, nell’esempio la seconda posizione (1,)
  • il numero di elementi da rimuovere, nell’esempio il valore 1 (1,1); usare 0 se non si vuole rimuovere elementi
  • l’elemento o un array con gli elementi da inserire

Nell’esempio successivo si aggiungono 3 elementi (10, 20, 30) a partire dall’ultimo.

numeri.splice(6, 0, [10,20,30]);
document.write(numeri+"<br>"); // 34,54,9,12,21,10,20,30

Se i nuovi elementi vengono inseriti tra gli elementi esistenti, questi ultimi saranno spostati nelle posizioni successive.

numeri.splice(3, 0, [10,20,30]);
document.write(numeri+"<br>"); // 34,54,9,10,20,30,12,21

L’esempio precedente inserisce a partire dall’elemento in posizione 3 i nuovi valori 10, 20 e 30.

Gli array e le stringhe

Il metodo .join() unisce (concatena), tutti gli elementi dell’array in una stringa. Si può indicare il separatore da usare tra le diverse voci dell’array (nell’esempio è il simbolo -).

document.write(numeri.join('-') + "<br>"); // 1-2-3-4-5

Se una stringa contiene un carattere che separa una serie di voci si può usare il metodo .split() per trasformare la stringa in un array.

var str = ("1-2-3-4-5");
document.write(str.split('-'));

L’array restituito dal metodo .split() può essere assegnato a una variabile e manipolato come si desidera.

Invece il metodo .toString() restituisce l’array come una stringa in cui i valori dell’array sono separati da una virgola.

document.write(numeri.toString()+"<br>");

Il metodo forEach()

Il metodo .forEach() è una scorciatoia per eseguire una funzione per ciascun elemento dell’array.

numeri.forEach(function(n){
  document.write(n + "<br>")
});

La funzione anonima passata al metodo .forEach() sarà chiamata per ciascun elemento dell’array a cui ci si potrà riferire con la variabile n.

Altre informazioni sulle funzioni per gli array sono disponibili nella pagina Array.prototype di MDN.