Skip to content

4. Le tabelle

Image

4.1. script [tab-01]

Lo script seguente illustra alcune caratteristiche delle tabelle JavaScript. Queste sono simili alle tabelle PHP, con una grande differenza: vengono gestite tramite puntatori e sono considerate oggetti.


''use strict';

// un array è un oggetto gestito tramite il proprio indirizzo
const tab1 = [1, 2, 3];
// copia degli indirizzi
const tab2 = tab1;
// tab1 e tab2 puntano allo stesso array
console.log("tab1===tab2 :", tab1 === tab2);
// è possibile modificare l'array utilizzando indifferentemente tab1 o tab2
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Esecuzione


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
tab2= [ 1, 10, 3 ]

Commenti

  • la riga 2 dei risultati mostra che [tab1] e [tab2] sono due entità uguali, ovvero due puntatori uguali;
  • le righe 4 e 5 dei risultati mostrano che questi due puntatori puntano allo stesso array;

4.2. script [tab-02]

Questo script mostra che l'array JavaScript è diverso dagli array dei linguaggi compilati.


'use strict';

// array
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// inizializzazione di un elemento
tab[3] = 100;
tab[1] = "huit";
// array
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// le chiavi dell'array sono i suoi indici
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// i valori dell'array
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • riga 4: un array vuoto;
  • riga 8: un array non ha una dimensione fissa. È semplicemente una sequenza di elementi indicizzati da un numero. È possibile inizializzare l’elemento n. 3 anche se gli elementi [0, 1, 2] non sono ancora definiti;
  • righe 16-24: un array JavaScript si comporta in modo analogo all’array PHP;

Esecuzione


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. script [tab-03]

Questo script illustra diversi metodi dell’oggetto [tableau].


'use strict';
// un array può contenere diversi tipi di dati
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log sa visualizzare il contenuto di un array
show(1);
console.log("tab=", tab);
show(2);
// iterazione dell'array con foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// un altro modo per ottenere lo stesso risultato
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// iterazione dell'array con for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// modifica tab[i]
tab[5] = [];
// visualizzazione
console.log("tab=", tab);
show(5);
// si rimuove l'ultimo elemento
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// si aggiunge un elemento alla fine dell'array
tab.push('xyz');
console.log("tab=", tab);
show(7);
// si aggiunge un elemento all'inizio della tabella
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// rimuove il primo elemento dall'array
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// si rimuove l'elemento n. 2 dall'array
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// si rimuovono dalla tabella due elementi a partire dall'elemento n. 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

// funzione
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Commenti

  • la differenza tra gli array PHP e gli array JavaScript è illustrata dalle righe 3 e 24:
    • la riga 3 dichiara la variabile [tab] come costante;
    • la riga 24 modifica l'elemento tab[5];

Nella riga 3, è il puntatore che punta all’array ad essere dichiarato costante, non l’array stesso. Quest’ultimo può essere modificato.

  • righe 14-16: l’array [tab] viene iterato utilizzando un metodo [forEach] dell’array [tab]. Questo metodo riceve come parametro la definizione di una funzione, che potremmo definire una funzione letterale. Questa funzione parametro riceve un parametro: l’elemento corrente dell’array [tab]. La funzione viene chiamata per ogni elemento dell’array. Questo tipo di sintassi è comune in JavaScript;
  • righe 9-10: si utilizza un’altra sintassi per definire la funzione parametro. Invece di scrivere:
    • function(p1, p2, …, pn){….}

si scrive:

  • (continua)
    • (p1,p2, ..,pn)=>{.…}. Questa si chiama notazione «freccia» o «arrow»;
  • il resto del codice è spiegato dai commenti;

Da questo script si noti che:

  • un array è un oggetto a cui fa riferimento un puntatore;
  • che questo oggetto dispone dei metodi [forEach, pop, push, shift, unshift];

4.4. script [tab-04]

Questo script illustra altri metodi degli oggetti array.


'use strict';

// metodo di manipolazione degli array

// un array
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// visualizzazione
console.log("tab=", tab);
// mappa
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// visualizzazione
console.log("tab=", tab);
console.log("tab2=", tab2);
// riduzione senza valore iniziale
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// riduzione con valore iniziale
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filtro
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// trova
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
// sort
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// ordinamento inverso
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

Commenti

  • righe 13-15: il metodo [map] accetta come parametro una funzione di trasformazione. Questa viene chiamata ripetutamente per ogni elemento dell'array. Ha il compito di trasformare l'elemento in qualcos'altro, in questo caso un oggetto con le proprietà [prop1, prop2]. Il metodo [map] restituisce un nuovo array. Quello precedente non viene modificato: 

tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]
  • riga 20: il metodo [reduce] accetta come parametro una funzione a due parametri chiamata ripetutamente per ogni elemento dell'array. Questa funzione accetta due parametri:
    • [currentValue] è l'elemento corrente dell'array;
    • [accumulator] è l’ultimo risultato ottenuto dalla funzione. Se non è previsto alcun valore iniziale per questo accumulatore, allora sarà pari a 0;
    • la prima volta che viene chiamata la funzione di accumulo, essa restituisce [0+tab[0]]. È questo valore che viene assegnato all’accumulatore;
    • la seconda volta restituisce accumulatore+tab[1], ovvero tab[0]+tab[1];
    • la terza volta, restituisce accumulatore+tab[2], ovvero tab[0]+tab[1]+tab[2];
    • ecc. Alla fine, l’accumulatore rappresenterà la somma di tutti gli elementi dell’array [tab];
  • riga 26: il metodo [filter] ha come parametro una funzione di filtraggio. Questa viene chiamata ripetutamente per ogni elemento dell’array e riceve l’elemento stesso come parametro. Deve restituire:
    • [true] se l’elemento deve essere mantenuto;
    • [false] in caso contrario;
  • riga 33: il metodo [find] ha come parametro una funzione di ricerca. Questa viene chiamata ripetutamente per ogni elemento dell’array e riceve l’elemento stesso come parametro. Deve restituire [true] se l’elemento ricevuto soddisfa il criterio di ricerca. A quel punto la funzione si interrompe. Il metodo [find] restituisce quindi 0 o 1 elemento;
  • riga 36: il metodo [findIndex] funziona come il metodo [find], ma invece di restituire l’elemento trovato, restituisce il suo indice nell’array;
  • righe 39, 41: il metodo [indexOf(valeur)] cerca [valeur] nell’array e restituisce il suo indice, oppure -1 se non viene trovato;
  • riga 44: il metodo [lastIndexOf(valeur)] funziona come il metodo [indexOf(valeur)], ma inizia la ricerca dalla fine dell'array;
  • riga 47: il metodo [sort] senza parametri restituisce un array ordinato secondo l’ordine naturale (numeri, stringhe);
  • riga 50: quando l'ordine naturale non è adeguato, occorre passare al metodo [sort], una funzione a due parametri (e1, e2) che restituisce:
    • +1 se e1 deve essere classificato dopo e2;
    • -1 se e1 deve essere classificato prima di e2;
    • 0 se entrambi gli elementi devono avere lo stesso ordine;

La funzione passata come parametro al metodo [sort] viene richiamata ripetutamente da quest’ultimo per confrontare due elementi dell’array;

https://stahe.github.io
Questo tutorial scritto da Serge Tahé è reso disponibile al pubblico secondo i termini della Creative Commons Attribuzione – Non commerciale – Condividi allo stesso modo 3.0 Unported.