JavaScript/Oggetto Array

Last but not least esaminiamo gli array, una funzionalità presente nella maggior parte dei linguaggi di alto livello, che in JavaScript è disponibile tramite l'uso della classe Array.

Cos'è un array

In informatica, un array (o vettore) è un tipo di dato strutturato (non semplice, che dispone quindi di altri parametri) che permette di organizzare i dati secondo un indice; in pratica, lo stesso oggetto contiene a sua volta numerosi valori, ciascuno dei quali contrassegnato da una chiave numerica. Questo concetto può essere rappresentato da un tabella a singola entrata:

0	1	2	3	..
valore_0	valore_1	valore_2	valore_3	...

Gli array in JavaScript

Come è stato già detto, per creare un vettore in JavaScript facciamo riferimento alla classe Array:

var vettore = new Array (); //crea un array vuoto

Il costruttore della classe può essere tuttavia usato in maniere differenti:

var vettore = new Array (5); //crea un array contenente 5 elementi
var vocali = new Array ("A", "E", "I", "O", "U"); //crea un array contenente le vocali
var lettere_straniere = ["J", "K", "W", "X", "Y"]; //metodo breve

Per accedere ad un elemento dell'array, per leggerlo o modificarlo, usiamo la notazione:

vettore[indice]

Ad esempio, facendo riferimento alla variabile vocali, avremo questa tabella:

Indici	0	1	2	3	4
Valori	A	E	I	O	U

e potremo lavorare in questo modo:

alert(vocali[0]); //mostra "A"
vocali[1] = "ciao"
alert(vocali[1]); //mostra "ciao"

Da notare che la chiave dell'array è numerica e parte da 0 e che il valore di ciascun elemento può essere di qualsiasi tipo di dato, ciascuno diverso dall'altro.
Ad esempio, potremmo stabilire un metodo per memorizzare le informazioni su dei prodotti decidendo che all'elemento 0 corrisponde il nome, all'elemento 1 il modello, ecc... creando diversi array:

var descCampi = new Array ("ID", "Modello", "Prezzo")
var prod1 = new Array (1, "3000 plus", 35);
var prod2 = new Array (5, "4000 minus", 12);

Array associativi?

Javascript non supporta i vettori con indici associativi. Al suo posto si usano gli oggetti. Se si tenta di creare un array associativo, il parser lo interpreta come un oggetto con un indice denominato. Quindi i metodi degli array non funzioneranno in modo corretto. Ad esempio:

var vet = new Array();
vet["pippo"] = "valore1";
alert(vet.length); //output: 0 
/* length è una proprietà che si applica solo agli array 
con indice numerico, quindi dà un valore errato */

In JavaScript gli array hanno solo indici numerici.

Array multi-dimensionali

Per inizializzare un vettore multi-dimensionale (vettore di vettori) possiamo fare cosi:

var multivettore=new Array(new Array("A1","A2"),new Array("B1","B2"))
alert(multivettore[0][0]); //output: A1
alert(multivettore[0][1]); //output: A2
alert(multivettore[1][0]); //output: B1
alert(multivettore[1][1]); //output: B2

Proprietà

L'oggetto Array dispone di una sola proprietà interessante, length, che restituisce il numero di elementi in esso contenuti (contando anche quelli vuoti); da notare che, poiché gli indici partono da 0, un array di 5 elementi avrà gli elementi con le chiavi 0, 1, 2, 3 e 4.

Metodi

L'uso dell'oggetto Array diventa utile in relazione all'uso dei metodi.

concat()

Il metodo concat() restituisce un altro array contenente tutti gli elementi dell'array a cui è applicato seguiti da tutti gli elementi dell'array passato come parametro. Ad esempio:

var a = new Array (1, 2, 3);
var b = new Array (4, 5, 6);
var c = a.concat(b); //1, 2, 3, 4, 5, 6

Da notare che a contiene ancora solo gli elementi 1, 2 e 3.

push()

Il metodo push() inserisce l'elemento indicato come parametro come ultimo elemento dell'array e restituisce la nuova lunghezza dell'array. Ad esempio:

var a = new Array (1, 2, 3);
var b = a.push(7);
alert(b); //4

Da notare che l'array a contiene ora gli elementi 1, 2, 3 e 7

pop() e shift()

I metodi pop() e shift() eliminano rispettivamente l'ultimo e il primo elemento dell'array e restituiscono il valore dell'elemento eliminato:

var a = new Array (1, 2, 3);
var b = a.pop(); //ora a contiene 1 e 2
alert(b); //3

sort()

Il metodo sort() ordina l'array secondo l'ordine alfabetico:

var a = new Array ("e", "a", "u", "i", "o");
a.sort() //ora le vocali sono ordinate nell'array a
//attenzione: lavora direttamente sull'array!

Attenzione: in JavaScript le minuscole seguono alle maiuscole, quindi ad esempio

var a = new Array ("E", "a", "U", "i", "o");
a.sort() //ora le vocali sono ordinate in questo modo:
//E U a i o!

Per ovviare a questo problema possiamo lavorare su stringhe solo minuscole, usando il metodo toLowerCase in questo modo:

var a = new Array ("E", "a", "U", "i", "o"); //il nostro array
for (var i = 0; i < a.length; i++) { //itera sui singoli elementi...
 a[i] = a[i].toLowerCase(); //...rendendoli minuscoli
}

reverse()

Questo metodo agisce sull'array invertendo l'ordine degli elementi in esso contenuti. Ad esempio:

var vocali = new Array ("A", "E", "I", "O", "U");
vocali.reverse(); //ora contiene U O I E A

slice()

Il metodo slice(), infine, serve per copiare porzioni di array. La sua sintassi è:

arr.slice(a, b)

Il metodo restituisce un array contenente gli elementi di arr compresi tra a (incluso) e b (escluso). Se b non è indicato, vengono copiati tutti gli elementi a partire da a fino alla fine. Ad esempio:

var a = new Array ("A", "E", "I", "O", "U");
var b = a.slice(1,4); //b contiene gli elementi E I O

Iterare sugli elementi di un array

Come abbiamo visto precedentemente, è possibile iterare su tutti gli elementi di un array con un ciclo particolare; ad esempio, volendo azzerare il valore di tutti gli elementi di un array, possiamo usare il codice:

var a = new Array ("A", "E", "I", "O", "U");
for (indice in a) {
 a[indice] = ""; //annulla il valore
}
//ora l'array contiene 5 elementi tutti vuoti

Cercare un elemento in un array

Di seguito è mostrata a titolo di esempio una funzione arrayIndexOf() che restituisce la posizione di un elemento dato in un array. Nel caso l'elemento non sia presente, restituisce -1.

function arrayIndexOf(array, search) {
	var indice; //contatore
	for (indice in array) {
		if (array[indice] == search)
			return indice;
	}	
	return -1;
}

Il ciclo scorre su tutti gli elementi dell'array: se l'elemento corrente corrisponde a quello cercato (array[indice] == search) la funzione esce restituendo come valore l'indice corrente (return indice;). L'ultima istruzione (return -1;) verrà quindi eseguita se non verrà trovata nessuna corrispondenza nell'array (che è quindi il risultato che si voleva ottenere). La funzione presentate è una ricerca lineare, nel caso di array ordinati si può utilizzare anche l'algoritmo di ricerca binaria.