Utilizzo ed ordinamento di un Array

Un array è un oggetto utilizzato per memorizzare in una tabella (virtuale) i dati che, staticamente o dinamicamente, gli vengono passati. Si pensi quindi ad un array come ad una griglia in cui vengono incamerati dei dati (detti anche vettori) ed è possibile estrarli mediante degli identificativi univoci.

Un array ha una struttura logica simile ad una tabella di un database o ad un generico XML, magari non così complessa e duttile in fase di archiviazione e recupero dei dati; ad ogni modo torna spesso utile servirsi degli array dopo aver recuperato dati da strutture stabili come quelle descritte in precedenza.

È necessario inizializzare un'istanza di un nuovo array come nuovo oggetto, mediante la dichiarazione:

var esempio = new Array();

La catalogazione dei dati avviene, come già detto, mediante un identificativo numerico univoco per singolo dato; la numerazione parte da zero (0) ed arriva, potenzialmente, fino all'infinito.

Vediamo un esempio concreto di creazione di un array:

<script type="text/JavaScript">
var giorni_della_settimana = new Array();
giorni_della_settimana[0] = "Lunedì";
giorni_della_settimana[1] = "Martedì";
giorni_della_settimana[2] = "Mercoledì";
giorni_della_settimana[3] = "Giovedì";
giorni_della_settimana[4] = "Venerdì";
giorni_della_settimana[5] = "Sabato";
giorni_della_settimana[6] = "Domenica";
</script>

Esiste tuttavia un altro metodo, meno immediato visivamente ma più pratico e meno dispendioso in termini di codice; consiste nel "passare" tra parentesi tonde i dati che lo compongono:

var giorni_della_settimana = new Array("Lunedì","Martedì","Mercoledì","etc.");

I due metodi sono altrettanto efficaci ed utilizzabili alla stessa maniera. Se scrivendo i dati in forma "scalare", come nel primo esempio, il codice vi sembra più comodo leggere e da modificare, potete utilizzare il secondo metodo in questo modo:

var giorni_della_settimana = new Array(
		"Lunedì",
		"Martedì",
		"Mercoledì",
		"etc.");

Gli array dispongono di una nutrita schiera di proprietà e metodi. In questo articolo esamineremo le più importanti e più utilizzate.

La proprietà length

La proprietà length (in inglese significa letteralmente lunghezza) si utilizza per calcolare la lunghezza dei dati contenuti in una singola voce di un array. Ciò può tornare utile per impostare condizioni di vario genere e far eseguire al programma azioni differenti in funzione di questo tipo di calcolo. Vediamo un esempio:

<script type="text/JavaScript">
var giorni_della_settimana = new Array(
		"Lunedì",
		"Martedì",
		"Mercoledì",
		"Giovedì",
		"Venerdì",
		"Sabato",
		"Domenica");
document.write(giorni_della_settimana.length);
</script>

Il programma restituira l'intero 7, conteggiando correttamente gli elementi dell'array.

Poiché length è una proprietà che gli array hanno in comune con le stringhe, in questo caso possiamo calcolare la lunghezza di una singola voce dell'array:

<script type="text/JavaScript">
var giorni_della_settimana = new Array("Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica");
document.write(giorni_della_settimana[5].length);
</script>

in questo caso otteniamo la lunghezza della stringa numero 5 ("Sabato", 6 lettere).

Metodi degli array

Esiste la possibilità di ordinare i dati degli array in base a vari criteri, ad esempio in ordine alfabetico o di grandezza (dato che i vettori degli array possono anche avere valore numerico). Per rendere tangibile il concetto facciamo qualche esempio:

sort

Il metodo sort() provvede ad ordinare i dati dell'array in ordine alfabetico (o numerico) crescente.

<script type="text/JavaScript">
var giorni_della_settimana = new Array(
	"Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"
);
document.write(giorni_della_settimana.sort());
// otterremo Domenica,Giovedì,Lunedì,Martedì,Mercoledì,Sabato,Venerdì
</script>

Vediamo un altro esempio di utilizzo di questo metodo:

<script type="text/JavaScript">
var mioVettore = [1,3,2,4];
var ordinamento = mioVettore.sort();
var lunghezzaVettore = ordinamento.length;
for (var i=0; i < lunghezzaVettore; i++)
{
	document.write(ordinamento[i]);
}
// otteniamo 1234
</script>

reverse

Il metodo reverse(), invece, ordina gli elementi dell'array all'inverso, come il nome lascia intuire:

<script type="text/JavaScript">
var alfa = new Array("a", "b", "c");
document.write(alfa.reverse());
// restituisce c,b,a
</script>

concat

Il metodo concat() trasforma i dati dell'array in una stringa, concatenandoli con una virgola:

<script type="text/JavaScript">
var alfa = new Array("a", "b", "c");
document.write(alfa.concat());
// restituisce a,b,c
</script>

join

Molto interessante il metodo join() che, come concat(), trasforma i dati dell'array in una stringa, ma permette di separare i dati con uno spazio o con un carattere diverso, purchè specificato tra le parentesi tonde del metodo stesso:

toString

Chiudiamo questa carrellata sui metodi degli array parlando del metodo toString(); il suo scopo è quello di rappresentare gli elementi dell'array sotto forma di stringa separanone con una virgola gli elementi:

<script type="text/JavaScript">
var alfa = new Array("a", "b", "c");
document.write(alfa.toString());
// restituisce  a,b,c
</script>

Quando si dispone di uno strumento come gli array per incorporare dei dati è opportuno predisporre l'applicazione finale in modo tale da poter usufruire, in maniera più o meno versatile e completa, dei dati contenuti nell'array stesso.

Eseguire cicli sugli array e sfruttare i dati

Il metodo migliore per reperire tutti i dati di un array è quello di eseguire un ciclo for basato sul numero di elementi contenuti nell'array, oppure rendere dinamica la procedura impostando una variabile che calcola la lunghezza dell'array, a prescindere da quanti elementi contenga.

Facciamo un semplice esempio, creiamo una lista di persone e memorizziamolo in un array, stampiamo poi a video l'intero contenuto del nostro array:

<script type="text/JavaScript">
var nome = new Array(
			"Mario",
			"Paolo",
			"Antonio");
var cognome = new Array(
			"Verdi",
			"Rossi",
			"Bianchi");
for (var i=0; i<3; i++)
{
	document.write(nome[i] + " " + cognome[i] + "<br>");
}
</script>

Come risultato otteniamo:

Mario Verdi
Paolo Rossi
Antonio Bianchi

Per eseguire il ciclo in maniera corretta è necessario indicizzare le nostre variabili di tipo array, utilizzando tra parentesi quadre la variabile che inizializziamo come contatore del ciclo, nel nostro caso i:

nome[i]

Ci troviamo di fronte ad un metodo molto comodo per manipolare i dati di un array; è possibile anche inserire del codice HTML all'interno di un document.write(), quindi è possibile creare un menu di link, quindi renderlo disponibile in qualsiasi momento ed in qualsiasi pagina (se lo script è contenuto in una matrice esterna) ed aggiornarlo semplicemente incrementando gli elementi dell'array.

Vediamo l'esempio in cui costruiamo un semplice menu di link:

<script type="text/JavaScript">
var arLink  = new Array(
			"pagina1.htm",
			"pagina2.htm",
			"pagina3.htm",
			"pagina4.htm",
			"pagina5.htm"
			);
var arText  = new Array(
			"Pagina # 1",
			"Pagina # 2",
			"Pagina # 3",
			"Pagina # 4",
			"Pagina # 5"
			);
// Quando aumentano i link è necessario incrementare la condizione
document.write('<ul>');
for (var i=0; i < 5; i++)
{
	 document.write('<li><a href="'+arLink[i]+'">'+arText[i]+'</a></li>');
}
document.write('</ul>');
</script>

Allo stesso modo in cui è possibile verificare con le istruzioni di controllo che il ciclo abbia luogo a procedere, è anche possibile verificare che un array debba essere interamente letto o meno.