JavaScript/Oggetto Array

Wikibooks, manuali e libri di testo liberi.

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[modifica]

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[modifica]

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 contente 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[modifica]

Javascript supporta la possibilità di creare vettori con indici associativi, cioè di associare all'indice del vettore un nome piuttosto che un numero. Un modo veloce per creare un vettore associativo è il seguente:

vet = new Array();
vet["pippo"] = "valore1";
alert(vet["pippo"]); //output: valore1

oppure

var vet = { "A": "valore1", "B": "valore2" }
alert(vet["A"]); // output: Valore1

Array multi-dimensionali[modifica]

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

L'esempio precedente potrà quindi essere così realizzato:

var prodotti = new Array (
    {"ID": 1, "modello": "3000 plus", "prezzo": 35},
    {"ID": 5, "modello": "4000 minus", "prezzo": 12}
);
//se vogliamo accedervi
alert(prodotti[0]["prezzo"]) //restituisce 35
alert(prodotti[1]["ID"]) //restituisce 5

Proprietà[modifica]

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[modifica]

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

concat()[modifica]

Il metodo concat() restituisce un altro array contente 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()[modifica]

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()[modifica]

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()[modifica]

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()[modifica]

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()[modifica]

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

arr.slice(a, b)

Il metodo restituisce un array contente 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[modifica]

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[modifica]

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.