Skip to content

4. Tabelle

Image

4.1. script [tab-01]

Il seguente script illustra alcune caratteristiche degli array JavaScript. Questi sono simili agli array PHP, ma con una differenza fondamentale: vengono manipolati tramite puntatori e sono considerati oggetti.


'use strict';
 
// an array is an object manipulated via its address
const tab1 = [1, 2, 3];
// address copying
const tab2 = tab1;
// tab1 and tab2 point to the same table
console.log("tab1===tab2 :", tab1 === tab2);
// the table can be modified using either tab1 or 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 dimostra che gli array JavaScript differiscono dagli array nei linguaggi compilati.


'use strict';
 
// table
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// element initialization
tab[3] = 100;
tab[1] = "huit";
// table
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// the keys to the picture are its indices
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// table values
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 simile a un 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 vari metodi dell'oggetto [array].


'use strict';
// a table can contain different types of data
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log can display the contents of an array
show(1);
console.log("tab=", tab);
show(2);
// table path with foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// another script to do the same thing
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// table route with for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// change tab[i]
tab[5] = [];
// display
console.log("tab=", tab);
show(5);
// remove the last element
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// add an element to the end of the array
tab.push('xyz');
console.log("tab=", tab);
show(7);
// add an element at the beginning of the array
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// remove the 1st element from the array
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// remove element no. 2 from the table
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// remove two elements from the table, starting with element no. 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);
 
// function
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Commenti

  • La differenza tra gli array PHP e quelli 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. L'array stesso può essere modificato.

  • Righe 14–16: L'array [tab] viene iterato utilizzando il metodo [forEach] dell'array [tab]. Questo metodo accetta come parametro la definizione di una funzione, che potrebbe essere definita una funzione letterale. Questa funzione accetta 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: usiamo una sintassi diversa per definire la funzione. Invece di scrivere:
    • funzione(p1, p2, …, pn){….}

scriviamo:

  • (continua)
    • (p1,p2, ..,pn)=>{.…}. Questa è chiamata notazione “a freccia”;
  • Il resto del codice è spiegato dai commenti;

Da questo script, si noti che:

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

4.4. script [tab-04]

Questo script introduce altri metodi degli oggetti array.


'use strict';
 
// table manipulation method
 
// a picture
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// display
console.log("tab=", tab);
// map
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// display
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce without initial value
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// reduce with initial value
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filter
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// find
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);
// spell
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// reverse spell
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 una funzione di trasformazione come parametro. Questa funzione 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. L'array originale rimane invariato: 

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 argomenti che viene chiamata ripetutamente per ogni elemento dell'array. Questa funzione accetta due argomenti:
    • [currentValue] è l'elemento corrente dell'array;
    • [accumulator] è l'ultimo risultato ottenuto dalla funzione. Se non viene fornito alcun valore iniziale per questo accumulatore, allora sarà 0;
    • la prima volta che la funzione di accumulo viene chiamata, restituisce [0+tab[0]]. Questo valore viene assegnato all'accumulatore;
    • la seconda volta, restituisce accumulator+tab[1], ovvero tab[0]+tab[1];
    • La terza volta, restituisce accumulator + 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] accetta una funzione di filtraggio come parametro. Questa funzione viene chiamata ripetutamente per ogni elemento dell'array e riceve quell'elemento come parametro. Deve restituire:
    • [true] se l'elemento deve essere mantenuto;
    • [false] in caso contrario;
  • riga 33: il metodo [find] accetta una funzione di ricerca come parametro. Questa funzione viene chiamata ripetutamente per ogni elemento dell'array e riceve quell'elemento come parametro. Deve restituire [true] se l'elemento ricevuto soddisfa i criteri di ricerca. La ricerca si interrompe quindi. 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(value)] cerca [value] nell'array e restituisce il suo indice, oppure -1 se non lo trova;
  • riga 44: il metodo [lastIndexOf(value)] funziona come il metodo [indexOf(value)] ma inizia la ricerca dalla fine dell'array;
  • riga 47: il metodo [sort] senza parametri restituisce un array ordinato in ordine naturale (numeri, stringhe);
  • riga 50: quando l'ordine naturale non è adatto, è necessario passare una funzione con due parametri (e1, e2) al metodo [sort], che restituisce:
    • +1 se e1 deve essere ordinato dopo e2;
    • -1 se e1 deve essere ordinato prima di e2;
    • 0 se entrambi gli elementi devono avere lo stesso rango;

La funzione passata come parametro al metodo [sort] viene da esso chiamata ripetutamente 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.