La struttura dati principale del Javascript sono gli array la cui flessibilità permette di utilizzarli per qualsiasi scopo. Un array non è nient’altro che un contenitore che, a differenza delle variabili che possono contenere al loro interno un solo valore, può contenere più valori (di vario genere) accessibili tramite un indice numerico che parte da zero. Un Javascript array può essere creato con il costruttore Array preceduto dall’operatore new in questo modo:
var nomi = new Array("Michele", "Sergio", "Simona", "Eva", "Giorgia", "Melania", "Marco")
oppure, in forma molto più sintetica, con il semplice impiego di parentesi quadre:
var nomi = ["Michele", "Sergio", "Simona", "Eva", "Giorgia", "Melania", "Marco"]
Gli elementi presenti in un array, come accennato, sono indicizzati per posizioni contate a partire da 0, pertanto nomi[1] equivale a Sergio, nomi[3] a Eva e via dicendo.
La stessa notazione può essere impiegata per assegnare loro dei valori.
Se eseguissimo:
nomi[3]="Saverio"
l’array diventerebbe:
["Michele", "Sergio", "Simona", "Saverio", "Giorgia", "Melania", "Marco"]
L’impiego di array si sposa bene con quello degli oggetti, definiti con parentesi graffe, in cui si possono definire una serie di proprietà con uno specifico valore etichettate con un nome.
Ad esempio, questo è un oggetto Javascript:
studente1={"nome":"Michele",
"cognome":"Rossi",
"citta":"Roma"
}
Risponde al riferimento studente1 e contiene tre proprietà: nome, cognome e citta.
Potremmo estrarre uno dei valori al suo interno semplicemente richiedendo una proprietà introdotta dal simbolo punto: studente1.citta per sapere la sua città o studente1.cognome per il suo cognome.
Allo stesso modo potremmo utilizzare questa stessa dicitura per compiere un’assegnazione con:
studente1.citta="Lecce"
In un array Javascript, potremmo utilizzare oggetti di questo tipo come valori. Ad esempio, creando un array di nome “corso” potremmo coinvolgere studente1 ed altri oggetti creati al volo:
corso=[
studente1,
{"nome":"Giorgia",
"cognome":"Verdi",
"citta":"Milano"
},
{"nome":"Paolo",
"cognome":"Neri",
"citta":"Napoli"
}
]
per poi recuperare il valore di una proprietà percorrendo le posizioni dell’array: con corso[2].citta otterremo Napoli, mentre con corso[0].nome otterremmo Michele.
Di qualsiasi tipo di oggetti sia composto un array possiamo sfruttare su di esso alcuni metodi e proprietà, vediamo di seguito i principali.
Iscriviti su devACADEMY e SEGUI TUTTI I CORSI che vuoi!
OLTRE 70 CORSI di coding A TUA DISPOSIZIONE con un’unica iscrizione 🙂
Prima cosa, è molto utile sapere la lunghezza di un array: possiamo farlo con length.
Utilizzando l’array:
nomi = ["Michele", "Sergio", "Simona", "Eva", "Giorgia", "Melania", "Marco"]
con nomi.length viene restituito 7 ovvero il numero di oggetti che esso contiene.
Altra necessità molto comune consiste nell’aggiungere elementi in coda all’array e possiamo farlo utilizzando push.
Invocando quindi nomi.push("Alessandro") il contenuto della struttura dati diventerà:
[ 'Michele', 'Sergio', 'Simona', 'Eva', 'Giorgia', 'Melania', 'Marco', 'Alessandro' ]
e la lunghezza, di conseguenza, sarà ora pari a 8.
Con pop invece svolgiamo due operazioni contemporaneamente: ci facciamo restituire l’ultimo oggetto e lo rimuoviamo dall’array.
Ad esempio, nomi.pop() restituisce la stringa “Alessandro” e, contemporaneamente, la rimuove dall’array.
Altro aspetto fondamentale è la possibilità di trasformare un array in una stringa. Lo si può fare in maniera molto standard utilizzando toString che restituisce una stringa come la seguente:
'Michele,Sergio,Simona,Eva,Giorgia,Melania,Marco'
costituita da tutti i nomi separati da virgola o con join che permette di specificare il separatore con cui verranno accodati tutti gli oggetti tra loro.
Ad esempio con nomi.join(' -- ') otterremo questo risultato:
'Michele -- Sergio -- Simona -- Eva -- Giorgia -- Melania -- Marco'
forEach è un altro metodo che offre una potenzialità molto importante. Permette infatti di eseguire un ciclo in cui ogni oggetto dell’array sarà sottoposto ad una funzione.
Ad esempio, potremo invocare:
nomi.forEach(funzione);
dove funzione viene definita separatamente:
function funzione(value, index, array) {
// codice da eseguire
}
e questa verrà richiamata e il suo codice eseguito per ogni elemento dell’array.
L’aspetto interessante è che al momento di eseguire il codice di funzione avremo a disposizione tre argomenti: il primo sarà l’indice dell’oggetto che stiamo trattando in questa iterazione, il secondo sarà il suo valore ed il terzo l’array completo.
