Manipolazione dei dati
Array
Un array è un elenco di oggetti, anche di tipo differente.
let lista = [1,2,3,4,5,6];
let nomi = ["Mario", "Antonio", "Luigi"];
let matrix = [[1,2,3],[4,5,6],[7,8,9]];
let mixed = [1, False, "Sandra", 36, "Antonio", [4,5], null ];
let complicated = [1, 2, [4,5]];Operazioni principali:
console.log(lista[6]); // gli indici partono da 0
nomi[3] = "Carlo";
mixed.push(True); //inserisce nuovo valore
const last = mixed.pop(); //rimuove ultimo valore
const removed = lista.splice(3,5); // rimuove dall'indice 3 all'indice 5 escluso
const extracted = lista.slice(3,5); // estrae SENZA rimuovere
const extracted = list.shift(); // estrae il primo valore e lo rimuove
Gli array Javascript sono oggetti, e come oggetti hanno numerosi metodi.
Ad esempio è possibile iterare sull'array con la funzione forEach:
lista.forEach(function(element) {
console.log(element);
}L’operazione di mapping (funzione map) esegue una trasformazione degli elementi di una lista in una nuova lista applicando una funzione di trasformazione su ogni elemento, definita dalla funzione che riceve come argomento. Ad esempio:
const list = [1,2,3];
const newList = list.map(element => element*2);
// newList conterrà [2,4,6]L’operazione di splitting (split) consente di trasformare una stringa in un array suddividendola per un carattere separatore.
const string = "Mi piace molto Javascript"
const list = string.split(" ");
// ["Mi", "piace", "molto", "Javascript"]Oppure fare join ovvero l’opposto:
const numeriDelLotto = [36,21,18,9,71,33];
const values = numeriDelLotto.join(",");
// "36,21,18,9,71,33"Per copiare un array si usa l’operatore spread:
const a = [36,21,18,9,71,33];
const b = [...a];Se si eseguisse una copia per assegnazione (b=a) non verrebbe creata una copia del contenuto (clone o deep copy) ma una nuova variabile che contiene lo stesso contenuto (shallow copy).
Dizionari
Un dizionario è un oggetto che raccoglie un insieme di coppie nome-valore.
let dict = {
"nome": "Mario"
"cognome": "Rossi"
};Si può accedere ad un dizionario in due modi:
console.log(dict["nome"]);
console.log(dict.nome);E’ possibile iterare sulle chiavi del dizionario con il costrutto for in:
for (const key in dict) {
console.log(dict[key])
}Si può eseguire l’operazione di “flattening” estraendo sia le chiavi che i valori:
const keys = Object.keys(dict);
const values = Object.values(dict);Gli array possono contenere tutte le tipologie di oggetti, compresi i dizionari:
const list = [
{
"nome": "Mario"
"cognome": "Rossi"
},
{
"nome": "Paola"
"cognome": "Bianchi"
},
...
]Per copiare un dizionario in un altro (deep copy) è possibile usare l’operatore spread:
const a = {
"nome": "Mario"
"cognome": "Rossi"
};
const b = {...a};Se infatti si esegue una semplice assegnazione viene creata non una copia ma si assegna ad una nuova variabile lo stesso oggetto (shallow copy).
Sort
E’ possibile ordinare un array usando la funzione sort()
const list = [1,3,2];
list.sort(); // -> [1,2,3]E’ possibile anche usare una funzione che indica il comparatore di confronto, detta predicato. Il predicato è una funzione che viene iniettata in un’altra per indicare una operazione custom da svolgere all’interno di un altro argomento. Nello specifico il predicato di sort è il comparatore tra due elementi, che permette di capire all’algoritmo di ordinamento cosa viene prima e cosa viene dopo.
Il comparatore deve restituire 0 se gli elementi hanno la medesima posizione, -1 se il primo è inferiore al secondo, +1 viceversa. Si ricorda che l’ordinamento è crescente.
const list = [1,3,2];
list.sort((a,b) => a < b); // -> [3,2,1]E’ possibile ordinare ovviamente anche un array di dizionari.
const studenti = [
{
nome: "Luca Rossi",
voto: 8.5
},
{
nome: "Giulia Bianchi",
voto: 9.0
},
{
nome: "Marco Verdi",
voto: 7.5
},
];
studenti.sort((a,b) => a.voto - b.voto);
// restituisce valore negativo se a.voto è inferiore a b.voto
/*
Risultato:
[{
nome: "Giulia Bianchi",
voto: 9
}, {
nome: "Luca Rossi",
voto: 8.5
}, {
nome: "Marco Verdi",
voto: 7.5
}]
*/Filtro
La funzione array filter() consente di estrarre un sottoarray di elementi. Funziona tramite un predicato di filtro, che contiene la regola di filtro stessa.
const studenti = [
{
nome: "Luca Rossi",
voto: 6.5
},
{
nome: "Giulia Bianchi",
voto: 5.0
},
{
nome: "Marco Verdi",
voto: 9
},
];
const sufficienti = studenti.filter((studente) => studente.voto >= 6);CSV
Un CSV (Comma Separated Values) è un file di testo semplice formattato per contenere dati in forma tabellare, dove ogni riga contiene valori separati da virgole, ed è presente di norma una prima riga contenente (sempre con valori separati da virgola) una intestazione. I dati sono normalmente esportazioni da comuni applicazioni di foglio di calcolo (come Excel) o database.
Qui un esempio di articoli a magazzino di un supermercato:
Nome, Tipo, Prezzo, Quantità
pane, alimenti, 2, 10
latte, alimenti, 1, 50
acqua, alimenti, 0.25, 50
detersivo, casalinghi, 3, 20
microonde, elettrodomestici, 100, 3
carta igienica, casalinghi, 4, 100E’ possibile rappresentare un CSV in due modi:
- Un array dove ogni elemento è una lista contenente i valori di una riga, ed una prima riga con le intestazioni (o in alternativa in una variabile indipendente. Possiamo importare un csv con una funzione di importazione che usa split e map. Qui il codice:
const rows = csv.replaceAll(' ', '').split('\n');
const header = rows.shift().split(',');
const data = rows.map((row) => row.split(','));
/*
header -> ["Nome", "Tipo", "Prezzo", "Quantità"]
data ->
[
["pane", "alimenti", "2", "10"],
["latte", "alimenti", "1", "50"],
...
]
*/2. un array, dove ogni elemento è un dizionario coi valori contenuti in ogni riga e chiavi le intestazioni della prima riga. Qui il codice:
const rows = csv.replaceAll(' ', '').split('\n');
const header = rows.shift().split(',');
const data = rows.map((row) => {
const dict = {};
row.forEach((col, index) => {
dict[header[index]] = col;
})
return dict;
})
/*
header -> ["Nome", "Tipo", "Prezzo", "Quantità"]
data ->
{
{
"Nome": pane",
"Tipo": "alimenti",
"Prezzo": "2",
"Quantità": "10"],
},
{
"Nome": latte",
"Tipo": "alimenti",
"Prezzo": "1",
"Quantità": "50"],
},
...
}
*/E’ ovviamente possibile svolgere anche l’operazione opposta. Qui da array (caso 1):
const csv = header.join(",") + "\n";
csv += data.map((row) => row.join(",")).join("\n");Qui da dizionario (caso 2):
const csv = header.join(",") + "\n";
csv += data.map((rowDict) => Object.values(rowDict).join(",")).join("\n");JSON
Il formato JSON (Javascript Object Notation) è un formato di testo usato da Javascript quando è necessario salvare dati provenienti da array e dizionari. Grazie alla grande diffusione di Javascript, JSON è diventato il principale formato di scambio dati (insieme ad XML) anche di altri linguaggi. [1] Viene usato in molti ambiti: trasferire dati su Internet (come vedremo), memorizzare informazioni strutturate su file di testo, memorizzare strutture dati su database NoSQL, file di configurazione di numerose applicazioni e sistemi operativi.
Come detto, JSON permette di salvare sia array che dizionari, e usa una struttura ad albero per memorizzare la sua struttura dati.
Un JSON ha due fome: a dizionario o ad array, ma in ogni caso ogni elemento può contenere, annidati, altri array o dizionari. Come si vedrà la forma è praticamente identica al tipo di dato che rappresenta.
Ad esempio un dizionario si rappresenta in JSON nel seguente modo:
{
"chiave1": valore1,
"chiave2": valore2,
...
}dove la chiave è una stringa (notare che deve essere sempre tra virgolette, nei dizionari normali invece non è obbligatorio) ed il valore può essere uno qualsiasi dei seguenti oggetti:
– tipi base (number, bool, string, null, undefined)
– dizionari
– array
Un json può anche essere un array:
[a,b,c]dove a,b,c possono essere a loro volta tipi base, array o dizionari.
E’ possibile quindi creare strutture di dati annidati (ad esempio array di dizionari, o di altri array, o ancora dizionari contenenti array o dizionari, e così via).
In generale un JSON va visto quindi come come un “albero” di informazioni.
Per capirlo meglio vediamo questo esempio, dove rappresentiamo in JSON, l’anagrafica di una persona.
{
"id": 2529,
"uid": "515b9e85-559c-429c-970f-1bace407ec28",
"first_name": "Florinda",
"last_name": "Davis",
"username": "florinda.davis",
"email": "florinda.davis@email.com",
"phone_number": "+359 1-978-329-5178 x7957",
"date_of_birth": "1998-12-20",
"employment": {
"title": "Investor Agent",
"key_skill": "Self-motivated"
},
"address": {
"city": "New Marcene",
"street_address": "22189 Shanahan Course",
"zip_code": "21093-2467",
"state": "Wisconsin",
"country": "United States",
"coordinates": {
"lat": -58.31977228078984,
"lng": 27.15703627803444
}
},
"credit_card": {
"cc_number": "4465-6458-6997-9676"
},
"subscription": {
"plan": "Bronze",
"status": "Pending",
"payment_method": "Bitcoins",
"term": "Payment in advance"
}
}Qui un esempio di array:
[
{
"id": 4836,
"uid": "e16e7e38-7278-48a0-8848-3f8fb5551796",
"brand": "Corona Extra",
"name": "Shakespeare Oatmeal",
"style": "Merican Ale",
"hop": "Sorachi Ace",
"yeast": "3944 - Belgian Witbier",
"malts": "Roasted barley",
"ibu": "58 IBU",
"alcohol": "6.3%",
"blg": "18.4°Blg"
},
{
"id": 4743,
"uid": "c259e016-2a86-4c44-9a27-93ff46fd871a",
"brand": "Corona Extra",
"name": "Ten FIDY",
"style": "Vegetable Beer",
"hop": "Mt. Rainier",
"yeast": "2308 - Munich Lager",
"malts": "Chocolate",
"ibu": "96 IBU",
"alcohol": "7.4%",
"blg": "12.3°Blg"
},
{
"id": 122,
"uid": "588a0b25-dc51-4736-af3e-f3f12a316608",
"brand": "Pabst Blue Ribbon",
"name": "Ruination IPA",
"style": "Strong Ale",
"hop": "Liberty",
"yeast": "3763 - Roeselare Ale Blend",
"malts": "Black malt",
"ibu": "77 IBU",
"alcohol": "7.3%",
"blg": "14.7°Blg"
}]Conversione
In Javascript possiamo trasformare un qualsiasi oggetto[2] in una stringa in formato JSON con l’istruzione:
const jsonString = JSON.stringify(variabile);Viceversa possiamo trasformare la stringa JSON in un oggetto con l’istruzione
const obj = JSON.parse(stringaJSON);[1] Altri formati molto noti sono CSV (testo in colonne separate da virgola, tipico di export da programmi come Excel) e XML (formato dati a markup, di cui HTML è una derivazione).
[2] Sono esclusi gli oggetti o gli array che contengono funzioni.