Un array è una sorta di variabile che può contenere più valori.
Senza ulteriori giri di parole, vediamo subito come funzionano gli array in javascript, come si leggono i dati in esso contenuti, come si cancella un elemento, o come lo si aggiunge... e tante altre funzioni ancora.
Come usare gli Array in Javascript
Per poter creare un array in javascript basta utilizzare questa sintassi:
var nome-array = [elemento1, elemento2, elemento3, ...];
Con questa semplice sintassi dunque, è possibile ad esempio creare un array di colori, ovvero una variabile contenente più valori di colori.
Ecco un esempio pratico di come creare e come sfogliare un array javascript:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
Come si può capire facilmente dall'esempio, la sintassi per ricavare la lunghezza di un array javascript è la seguente:
nome-array.length;
E per mostrare tutto il contenuto di un array in un colpo solo come si farà mai?
Semplicissimo, basta richiamare la variabile dell'array senza passargli alcun indice:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
alert(colori);
</script>
Se si vuole aggiungere un elemento ad un array (alla fine della lista), la sintassi da usare è:
nome-array.push("nuovo-elemento");
Ecco un esempio pratico, sempre riferito all'array dei colori:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.push("giallo");
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
Se poi si vuole selezionare solo un elemento di un array conoscendone l'indice, ecco la sintassi da utilizzare:
nome-array[indice];
Ed ecco il solito esempio:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
alert(colori[1]);
</script>
Un altro metodo per creare un array (anche se sconsigliato), è invece quello di utilizzare la funzione new:
var nome-array = new Array("oggetto1","oggetto2","oggetto3",...);
Se poi si vuole avere un array javascript con indici non numerici, bisogna utilizzare questo metodo (non è esattamente corretto quanto appena scritto, ma di fatto il comportamento atteso è proprio questo):
var nome-array = {etichetta1:"valore1",etichetta2:"valore2",etichetta3:"valore3",...};
Ed ecco un esempio pratico di come creare un array con etichetta alfanumerica, e di come pescare un singolo elemento conoscendone il nome dell'indice (l'etichetta:
<script type="text/javascript">
var contatto = {nome:"Roberto",cognome:"Rossi",anni:20};
alert(contatto["nome"]);
</script>
Per ordinare un array alfabeticamente si usa la sintassi nome-array.sort().
Ecco il solito esempio:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.sort();
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
Per ordinare un array in ordine decrescente, basta usare la funzione reverse() al posto della sort.
Se invece si vuole modificare un elemento di un array, basta usare una sintassi alternativa per l'aggiunta degli item degli array, ovvero con:
nome-array[numero-indice] = "nuovo-valore";
Con questa sintassi infatti, è possibile sia sostituire un valore già esistente (passandogli l'indice del valore da sostituire), sia aggiungere un nuovo elemento alla fine dell'array (indicando un numero di indice corrispondente al primo indice disponibile... ma occhio a non creare buchi nell'array!).
Ecco un esempio pratico di sostituzione di valore in un array javascript:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori[0] = "viola";
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
Di solito si usa questa sintassi per aggiungere nuovi elementi ad un array inizializzato come vuoto.
Come inizializzare un array vuoto:
var nome-array=[];
Tra l'altro è possibile utilizzare questa sintassi anche per svuotare un array già esistente.
Se voglio sapere se una variabile è un array oppure un altro tipo, la sintassi da utilizzare è la seguente:
Array.isArray(nome-variabile);
Per rimuovere l'ultimo elemento di un array basta utilizzare invece la sintassi:
nome-array.pop();
Ed ecco l'esempio pratico:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.pop();
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
Se invece si vuole cancellare il primo elemento dell'array, ecco cosa occorre utilizzare:
nome-array.shift();
Mentre per aggiungere un nuovo elemento all'inizio dell'array, si usa la funzione unshift.
Ecco un esempio pratico:
<script type="text/javascript">
var colori = ["rosso", "verde", "bianco"];
colori.unshift("grigio");
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
Veniamo ora alla potentissima funzione splice, che può essere utilizzata sia per aggiungere elementi in una posizione specifica, sia per rimuovere uno specifico elemento (in qualsiasi posizione esso sia).
La sintassi generale da utilizzare per rimuovere specifici elementi di un array javascript è la seguente:
nome-array.splice(posizione-iniziale, numero-di-posizioni);
Forse è più chiaro con un esempio pratico, in cui si vuole eliminare due elementi a partire dalla seconda posizione:
<script type="text/javascript">
var colori = ["grigio","rosso", "verde", "azzurro", "bianco"];
colori.splice(2, 2);
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
Il risultato a video saranno i colori "grigio, rosso, bianco", in quanto avremo rimosso dall'array i colori "verde, azzurro", che si trovavano proprio nelle posizioni indicate con la splice.
In quest'altro esempio invece, vi mostro come aggiungere due colori dopo la posizione 2 dell'array:
<script type="text/javascript">
var colori = ["grigio","rosso","bianco"];
colori.splice(2,0,"verde","azzurro");
for(i=0; i<colori.length; i++) alert(colori[i]);
</script>
La funzione splice inoltre, può essere utilizzata per dividere un array in due, creando quindi una nuova lista di valori salvata a parte.
Ovviamente con i limiti del caso, dato che è possibile passare solo due coordinate per volta.
Il nuovo array conterrà dunque i valori selezionati con la splice, con una sintassi tipo:
var nuovo-array=vecchio-array.slice(posizione-iniziale, numero-di-posizioni);
Se poi si vuole pescare i valori con la splice da una determinata posizione fino all'ultimo valore dell'array, basta non indicare il secondo parametro, ovvero basta lasciare il numero di posizioni vuoto.
La sintassi da utilizzare per unire due array javascript è invece la seguente:
var nuovo-array= array1.concat(array2);
Ecco un esempio pratico della potentissima funzione contact:
<script type="text/javascript">
var colori = ["grigio","rosso","bianco"];
var colori2 = ["giallo", "marrone"];
var colori3 = colori.concat(colori2);
for(i=0; i<colori3.length; i++) alert(colori3[i]);
</script>
E per gli array js è tutto (o quasi).
Spero che questo mega tutorial vi sia stato utile.
Ovviamente ci sarebbe ancora qualcosina da dire sull'argomento, ma questo è un altro post (cit.)
Lascia un commento!