Array Javascript

Gli Array(), come le variabili, sono una porzione di memoria all’interno delle quali vengono immagazzinati dei dati. Se nella variabile viene immagazzinata una specifica informazione (ad esempio un numero, una stringa, un valore booleano, ecc.) nell’array possono essere incapsulati una pluralità di informazioni all’interno di una sorta griglia astratta. Javascript, come tutti i linguaggi di programmazione che si rispettino, supporta e gestisce gli array.

Definire un array

Vediamo la sintassi per la creazione di un oggetto Array() in Javascript:

var esempio = new Array();

Così facendo abbiamo definito un’array vuota.

Inserire dati nell’array

Per inserire i dati (che prendono il nome di item, elementi) in questo particolare tipo di variabile si possono seguire due strade, la prima consiste nel dichiarare i singoli dati su più righe passando tra parentesi quadre un numerico intero univoco identificativo di ogni singole voce, da zero a n. Ad esempio:

var esempio = new Array();
esempio[0] = "primo dato";
esempio[1] = "secondo dato";
esempio[2] = "terzo dato";

Il secondo metodo, più sintetico, consiste nel passare i dati tra parentesi come parametri dell’oggetto avendo cura di seprararli con una virgola:

var esempio = new Array("primo dato", "secondo dato", "terzo dato");

La differenza consiste sostanzialmente in una questione di ordine e di preferenze nello stile di programmazione.

N.B. E’ solo il caso di ricordare che se si tratta di stringhe sarà necessario utilizzare le virgolette per racchiudere ogni item dell’Array, mentre se si tratta di numeri ciò non è necessario.

Leggere i dati contenuti in un array

Per estrarre un singolo elemento da un’array è necessario richiamare il nome dell’array seguita dall’indice dell’elemento di nostro interesse:

document.write(esempio[1]);

Per leggere tutti i dati di un Array(), invece, occorre ciclarlo con l’istruzione for(), ipotizziamo il caso precedente:

var esempio = new Array();
esempio[0] = "primo dato";
esempio[1] = "secondo dato";
esempio[2] = "terzo dato";

// ciclo for
for (var i = 0; i < 3; i++) {
  document.write(esempio[i] + "<br>");
}

Per stampare l’output a video ci siamo serviti, come sempre, del document.write() passandogli la variabile di tipo Array() associata al contatore [i] del ciclo, ecco l’output di questo esempio:

primo dato
secondo dato
terzo dato

La proprietà length

Si noti che nell’esempio sapevamo esattamente quanti erano gli elementi contenuti nel nostro Array(); tuttavia può capitare di non conoscere a priori questo valore. In questo caso è possibile calcolare dinamicamente il numero di elementi contenuti nell’array attraverso la proprietà lenght (la stessa proprietà può essere applicata anche ad una stringa per contarne i caratteri, nel caso degli Array() viene calcolato il numero di indici presenti).

Vediamo un esempio:

var frutta = new Array();
frutta[0] = "Mele";
frutta[1] = "Pere";
frutta[2] = "Banane";
frutta[3] = "Pesche";

// ciclo for con limite calcolato dinamicamente
for (var i = 0; i < frutta.length; i++) {
  document.write(frutta[i] + "<br>");
}

Vediamo un ulteriore esempio che credo sia molto esplicativo circa il funzionamento della proprietà length:

document.write("Ci sono " + frutta.length + " tipi di frutta");

L’output sarà:

Ci sono 4 tipi di frutta

Aggiungere ed eliminare elementi: push, pop, shift, unshift

Grazie ai metodi push e pop è possibile, rispettivamente, aggiungere ed eleiminare un elemento in coda ad un array. Per prima cosa vediamo come utilizzare push() per aggiungere un elemento alla fine di un array:

var frutta = new Array();
frutta[0] = "Mele";
frutta[1] = "Pere";
frutta[2] = "Banane";
frutta[3] = "Pesche";

// aggiungo un elemento in coda all'array frutta
frutta.push("fragole");

La nostra array avrà i seguenti elementi:

Mele, Pere, Banane, Pesche, Fragole

Supponendo, invece, di voler eliminare l’ultimo elemento di un array si utilizza il metodo pop():

var frutta = new Array();
frutta[0] = "Mele";
frutta[1] = "Pere";
frutta[2] = "Banane";
frutta[3] = "Pesche";

// elimino un elemento in coda all'array frutta
frutta.pop();

La nostra array avrà ora i seguenti elementi:

Mele, Pere, Banane

Allo stesso modo i metodi shift e unshift consentono di eliminare ed aggiungere elementi in cima ad un array. Vediamo come aggiungere un elemento in cima ad un array con unshift:

var frutta = new Array();
frutta[0] = "Mele";
frutta[1] = "Pere";
frutta[2] = "Banane";
frutta[3] = "Pesche";

// aggiungo un elemento in cima all'array frutta
frutta.unshift("fragole");

La nostra array avrà i seguenti elementi:

Fragole, Mele, Pere, Banane, Pesche

Supponendo, invece, di voler eliminare il primo elemento di un array useremo shift:

var frutta = new Array();
frutta[0] = "Mele";
frutta[1] = "Pere";
frutta[2] = "Banane";
frutta[3] = "Pesche";

// elimino un elemento in cima all'array frutta
frutta.shift();

La nostra array avrà ora i seguenti elementi:

Pere, Banane, Pesche

Ordinamento di un array: sort e reverse

Lavorando con gli Array() si ha casisticamente l’esigenza di manipolare i dati in maniera diversa da quella nativa, ad esempio ordinando i dati secondo un certo criterio o manipolandoli come una stringa, occupiamoci ora di definire i principali metodi e le proprietà che ci permettono di stabilire questi controlli.

Possiamo decidere di ordinare un Array() in ordine alfabetico grazie al metodo sort, vediamo un esempio:

var nominativi = new Array();
nominativi[0] = "Gianni Rivera";
nominativi[1] = "Paolo Rossi";
nominativi[2] = "Claudio Gentile";

// ordinamento
nominativi.sort();

// ciclo for
for (var i=0; i<nominativi.length; i++) {
  document.write(nominativi[i] + "<br>");
}

Nonostante l’ordine stabilito all’atto della creazione dell’Array(), ci troveremo di fronte ad una situazione del genere:

Claudio Gentile
Gianni Rivera
Paolo Rossi

Siamo in questo modo riusciti ad ordinare i dati dell’Array() in ordine alfabetico in considerazione della prima lettera che viete trovata nella lettura delle singole stringhe rappresentanti i valori associati ai singoli indici dell’Array().

Grazie al metodo reverse, invece, possiamo invertire l’ordine di un Array() in senso contrario, se riprendiamo l’esempio appena proposto e lo modifichiamo come segue:

var nominativi = new Array();
nominativi[0] = "Gianni Rivera";
nominativi[1] = "Paolo Rossi";
nominativi[2] = "Claudio Gentile";

// ordinamento
nominativi.reverse();

// ciclo for
for (var i=0; i<nominativi.length; i++) {
  document.write(nominativi[i] + "<br>");
}

otterremo il seguente risultato:

Claudio Gentile
Paolo Rossi
Gianni Rivera

Concatenare due array

Il metodo concat ci permette di concatenare due o più Array(). Vediamo un esempio:

// definisco due array
var lettere = new Array('A','B','C');
var numeri = new Array(1,2,3,4,5,6);

// unisco le due array
var nuova = lettere.concat(numeri);

// ciclo for
for (var i=0; i<nuova.length; i++) {
  document.write(nuova[i] + ",");
}

Otterremo

A,B,C,1,2,3,4,5,6

Convertire un array in stringa

Simili tra loro sono i metodi toString e join, la loro funzione è quella di convertire un Array() in una stringa. Mentre toString() crea un elenco di elementi separati da una virgola, il metodo join() permette di scegliere il o i caratteri da utilizzare per la separazione, vediamo un esempio di entrambi:

var lettere = new Array();
lettere[0] = "A";
lettere[1] = "B";
lettere[2] = "C";
document.write(lettere.toString());

che ci restituirà:

A,B,C

var lettere = new Array();
lettere[0] = "A";
lettere[1] = "B";
lettere[2] = "C";
document.write(lettere.join('-'));

che ci restituirà

A-B-C