Array in javascript

Il linguaggio Javascript permette l'utilizzo degli array (o vettori). Un array è una speciale variabile in grado di registrare più informazioni al suo interno. Ogni informazione è associata a un numero indice. A differenza delle variabili gli array devono essere dichiarati prima dell'utilizzo.

A cosa serve un array? L'utilizzo degli array mi permette di elaborare i dati in modo standardizzato. Ad esempio, è utile per elaborare una grande mole dati su una particolare informazione ( es. i nomi degli studenti, il fatturato mensile, ecc ) tramite un ciclo iterativo. L'uso degli array è particolarmente utile nei loop perché il nome della variabile non cambia, mentre il numero indice può essere associato alla variabile numerica del ciclo iterativo.

Cos'è un array?

Un array è una variabile in grado di registrare più valori contemporaneamente.

Ad esempio, uso due variabili per registrare i numeri 2020 e 2021

myVar1 = 2020;
myVar2 = 2021;

In alternativa, posso creare una variabile array per contenerli entrambi

var myArray = new Array;
myArray[0]=2020;
myArray[1]=2021;

Un array può registrare due o più valori in posizioni distinte. In questo caso l'array myArray contiene due valori (2020 e 2021)

Ogni posto dell'array è detto elemento ed è individuato da una posizione nell'indice dell'array.

Ad esempio, il primo elemento dell'array ha indice 0.

myArray[0]=2020;

Il secondo elemento ha indice 1.

myArray[1]=2021;

E' importante ricordarsi che gli array cominciano sempre da 0 e non da 1.

Nota. Il fatto che il primo elemento di un array cominci da zero può creare confusione inizialmente, perché siamo abituati nella vita quotidiana a contare a partire da uno e associare lo zero al nulla.

Come dichiarare un array in Javascript

Nel javascript è necessario dichiarare un array prima dell'utilizzo.

Per dichiarare l'array uso la clausola new Array

var nome = new Array;

oppure

var nome = new Array();

La clausola new Array è detta sintassi del costruttore.

Nota. Javascript è case sensitive ossia distingue tra lettere minuscole e maiuscole. Quindi, il comando va scritto esattamente "new Array()". Se scrivo "new array()" non funziona.

In alternativa, Javascript mi permette di dichiarare un array tramite una sintassi più rapida

Le parentesi quadre [ ] sostituiscono la clausola new Array. Il risultato finale è lo stesso.

var nome = [ ];

Posso anche dichiarare prima la variabile e specificare in un secondo momento che si tratta di un array.

var myArray;
myArray = new Array();

Nella dichiarazione non occorre indicare anche il numero degli elementi che l'array dovrà contenere.

E' comunque possibile farlo indicando il numero degli elementi tra le parentesi tonde.

var myArray = new Array(5);

Una volta dichiarato l'array posso cominciare ad assegnare i valori dell'array

Nota. Il numero degli elementi dell'array indicato in fase di dichiarazione non mi impedisce di aggiungere più elementi all'array durante il programma. Da questo punto di vista Javascript è molto flessibile.

Come inserire i dati nell'array

Ci sono diverse strade per inserire i dati in un array.

La prima via consiste nel registrare un dato nell'array tramite una normale operazione di assegnazione.

Scrivo il nome dell'array e tra parentesi quadre la posizione dell'indice dove assegnare il dato.

nomevariabile[ numero indice ] = valore

Ad esempio, creo l'array "citta". Nel nome di una variabile non va messo mai l'accento.

Poi aggiungo il valore "Roma" nella posizione zero dell'indice dell'array.

var citta = new Array();
citta[0] = "Roma";

Come già detto in Javascript l'indice dell'array parte dal numero zero.

Pertanto, il primo elemento di un array si trova sempre alla posizione zero (0), il secondo alla posizione uno (1) e via dicendo.

Nota. A differenza dell'operazione di assegnazione di un valore a una variabile, nel caso dell'assegnazione di un valore a un array occorre indicare sempre anche la posizione nell'indice dell'array dove memorizzare l'informazione. Ad esempio, per scrivere il valore nella prima posizione scrivo myArray(0), in seconda posizione myArray(1) e via dicendo.

Per scrivere gli altri dati dell'array seguo lo stesso criterio.

In ogni assegnazione il nome dell'array è lo stesso. Quello che cambia è la posizione dell'indice.

var citta = new Array();
citta[0] = "Roma";
citta[1] = "Firenze";
citta[2] = "Milano";
citta[3] = "Napoli";
citta[4] = "Torino";

Anche se ho dichiarato inizialmente il numero degli elementi dell'array posso comunque aggiungere più elementi all'array

Ad esempio, definisco un array con 3 elementi e poi ne aggiungo cinque.

var citta = new Array(3);
citta[0] = "Roma";
citta[1] = "Firenze";
citta[2] = "Milano";
citta[3] = "Napoli";
citta[4] = "Torino";

Quando assegno il quarto elemento ("Napoli") Javascript si adegua aumentando a 4 la lunghezza dell'array.

Lo stesso accade quando assegno il quinto elemento ("Torino").

Un'altra via per assegnare i dati all'array.

In alternativa posso elencare i valori dell'array al momento della dichiarazione dell'array

var citta = new Array("Roma","Firenze","Milano","Napoli",”Torino”);

Questo comando equivale a scrivere

var citta = new Array()
myArray[0]="Roma";
myArray[1]="Firenze";
myArray[2]="Milano";
myArray[3]="Napoli";
myArray[4]="Torino";

Il risultato è sempre lo stesso.

L'array chiamato "citta" contiene cinque nomi di città italiane.

Un array può contenere tipi di dati diversi

Javascript mi permette anche di memorizzare tipi di dati diversi in uno stesso array.

Ad esempio stringhe e numeri.

var myArray = new Array("Roma",2020,"Milano",2021,”Torino”);

A differenza di altri linguaggi di programmazione javascript accetta anche gli array multi data type.

Come modificare e richiamare gli elementi dell'array

Per cambiare un valore dell'array basta digitare il nome dell'array, la posizione dell'indice tra parentesi quadre e il nuovo valore da assegnare.

nomearray[posizione]=nuovo valore

Ad esempio, dichiaro un array e i suoi elementi iniziali.

Poi modifico il valore del secondo elemento sostituendo "Firenze" con "Genova"

var myArray = new Array("Roma","Firenze","Milano","Napoli",”Torino”);
myArray[1]="Genova";

Dopo la modifica l'array è composto dai seguenti elementi:

"Roma","Genova","Milano","Napoli",”Torino”

Il valore in seconda posizione è stato sovrascritto.

Per richiamare gli elementi dell'array basta indicare il nome dell'array e la posizione dell'elemento tra parentesi quadre.

Ad esempio per stampare il contenuto del primo elemento scrivo

document.write("La città è " + myArray[0]);

Il risultato in output è

Roma

Per stampare il contenuto del secondo elemento scrivo

document.write("La città è " + myArray[1]);

Il risultato in output è

Genova

Un esempio pratico

Il seguente script mostra un esempio di utilizzo degli array nel javascript

studenti=new Array;
studenti[0]="Andrea";
studenti[1]="Luca";
studenti[2]="Paolo";
document.write(studenti[1]);

Con la prima istruzione definisco la variabile studenti come un Array. Per definire una nuova variabile è sufficiente porre il nome della variabile uguale alla clausola new seguita da Array.

studenti=new Array;

Nella seconda, terza e quarta istruzione assegno un dato all'indice uno, due e tre del vettore.

studenti[0]="Andrea";
studenti[1]="Luca";
studenti[2]="Paolo";

Si tratta di tre assegnazioni differenti poiché il numero indice è diverso.

Ad esempio, alla posizione zero (0) della variabile studenti assegno il dato "Andrea". Alla posizione uno (1) assegno il dato "Luca" e così via.

La quinta e ultima istruzione stampa a video il contenuto della variabile studenti[1].

document.write(studenti[2]);

L'esecuzione dello script mostra il seguente risultato sullo schermo dell'utente:

Luca

Per aggiungere un elemento a un array esistente utilizzo il metodo push.

studenti.push("Mario");

Questo comando aggiunge un nuovo elemento alla fine dell'array.

Gli elementi di un array devono essere dello stesso tipo?

No, un array in Javascript può anche contenere elementi con data type diversi.

Ad esempio, in parte stringhe e in parte valori numerici

studenti[0]="Andrea";
studenti[1]="Luca";
studenti[2]=2020;

La lunghezza dell'array

Per conoscere il numero di elementi di un array uso il metodo length.

Ad esempio, questa istruzione mi restituisce la lunghezza dell'array studenti.

var n = studenti.length;

In questo caso l'array è composto da 4 elementi (item).

Il metodo length è molto utile anche perché mi permette di accedere all'ultimo elemento dell'array senza conoscere la posizione esatta.

var p = studenti[studenti.length-1]

Dal computo devo togliere -1 perché la posizione degli elementi parte da zero (0) mentre il metodo length conta gli elementi dell'array a partire da 1.

Gli array a due o più dimensioni

Gli elementi di un array possono essere a loro volta altri array.

Questa caratteristica mi permette di creare array bidimensionali e multidimensionali.

Ad esempio, posso creare una matrice 2x3 con due righe e tre colonne

var matrice = [ [1,2,3] , [4,5,6] ];

In questo esempio l'array matrice ha due elementi. Ogni elemento è a sua volta un array con tre valori numerici.

Nel caso di un array bidimensionale, per accedere a un singolo elemento devo indicare due indici tra parentesi quadre

Ad esempio, per accedere al primo elemento in alto a sinistra scrivo matrice[0][0]

matrice[0][0];

Per accedere al primo elemento della prima riga dell'array sulla seconda colonna scrivo

matrice[0][1];

Un metodo alternativo per creare gli array multidimensionali

In alternativa, nel linguaggio javascript posso creare un array multidimensionale dichiarando come array ogni riga.

Ad esempio, la matrice 2x3

var matrice = [ [1,2,3] , [4,5,6] ];

posso dichiarala in questo modo

var matrice = new Array();
// prima riga
matrice[0] = new Array();
matrice[0][0] = 1;
matrice[0][1] = 2;
matrice[0][2] = 3;
// seconda riga
matrice[1] = new Array();
matrice[1][0] = 4;
matrice[1][1] = 5;
matrice[1][2] = 6;

Il risultato finale è lo stesso

E così via.