Gli array

Gli array sono delle liste di coppie chiave - valore dove le chiavi possono essere solo numeriche mentre i valori possono essere di qualsiasi tipo. Inoltre il numero e il tipo dei valori può cambiare liberamente. Le chiavi non devono essere necessariamente consecutive ma non possono essere stringhe (non esistono gli array associativi come in PHP).

Gli array hanno una proprietà length che indica il numero di elementi. Modificare la proprietà length va ad aumentare o diminuire la lunghezza dell'array ma di solito questo viene fatto tramite dei metodi appositi. In realtà non si tratta propriamente della lunghezza dell'array ma del primo indice libero disponibile nell'array.

var frutta = ["arancia", "banana", "fragola", "mela"];
console.log(frutta.length); //4

frutta.length = 5;
console.log(frutta); //["arancia", "banana", "fragola", "mela", empty]
console.log(frutta[4]); //undefined

frutta.length = 2;
console.log(frutta); //["arancia", "banana"]
console.log(frutta[2]); //undefined

//Attenzione!!
var agrumi = ["arancia", "mandarino", "limone"];
var agrumi2 = agrumi;
//svuoto l'array assegnandogli come valore un altro array vuoto
agrumi = []; 
console.log(agrumi2); //["arancia", "mandarino", "limone"] le references non vengono modificate
//svuoto l'array settando la sua length a 0
agrumi.length = 0;
console.log(agrumi2); //[] la modifica della length ha effetto anche sulle references

//Attenzione!!
var mele = [];
mele[3] = "melinda";
console.log(mele.length); //4

isArray()

Il metodo statico isArray() serve per sapere se un determinato valore è un array oppure no.

console.log(Array.isArray([])); //true
console.log(Array.isArray([undefined])); //true
console.log(Array.isArray("[]")); //false

from()

Il metodo statico from() crea un array a partire da un altro tipo di dato purchè iterabile. E' anche possibile eseguire una funzione su tutti gli elementi dell'iterabile.

var giorni = new Set();
giorni.add("Lunedi");
giorni.add("Martedì");
giorni.add("Mercoledì");
console.log(Array.from(giorni)); //["Lunedi", "Martedì", "Mercoledì"]

var abbr = Array.from(giorni, (g, i) => {
    return i + " - " + g.substring(0, 3);
});
console.log(abbr); //["0 - Lun", "1 - Mar", "2 - Mer"]

of()

Il metodo statico of() crea un array a partire dai valori passati come parametro

console.log(Array.of(0, false, "ciao", {nome: "Mario"}, [], undefined, null, "0")); 
//[0, false, "ciao", {nome: "Mario"}, Array(0), undefined, null, "0"]

keys()

Il metodo keys() restituisce un Array Iterator contenente le chiavi dell'array.

var arr = [7, 12, 23, 55];
var keys= arr.keys();
console.log(keys); //Array Iterator

//utilizzando la funzione next dell'iterator (attenzione al puntatore!)
console.log(keys.next()); //{done: false, value: 0}
console.log(keys.next()); //{done: false, value: 1}
console.log(keys.next()); //{done: false, value: 2}
console.log(keys.next()); //{done: false, value: 3}
console.log(keys.next()); //{done: true, value: undefined}

//utilizzando un ciclo for - of
for (let k of keys) {
    console.log(k); //stampa i valori 0, 1, 2, 3
}

values()

Il metodo values() restituisce un Array Iterator contenente i valori dell'array.

var arr = [7, 12, 23, 55];
var values= arr.values();
console.log(values); //Array Iterator

//utilizzando la funzione next dell'iterator (attenzione al puntatore!)
console.log(values.next()); //{done: false, value: 7}
console.log(values.next()); //{done: false, value: 12}
console.log(values.next()); //{done: false, value: 23}
console.log(values.next()); //{done: false, value: 55}
console.log(values.next()); //{done: true, value: undefined}

//utilizzando un ciclo for - of
for (let k of values) {
    console.log(k); //stampa i valori 7, 12, 23, 55
}

entries()

Il metodo entries() restituisce un Array Iterator contenente sia le chiavi che i valori dell'array.

var arr = [7, 12, 23, 55];
var iterator = arr.entries();
console.log(iterator); //Array Iterator

//utilizzando la funzione next dell'iterator (attenzione al puntatore!)
console.log(iterator.next()); //{done: false, value: [0, 7]}
console.log(iterator.next()); //{done: false, value: [1, 12]}
console.log(iterator.next()); //{done: false, value: [2, 23]}
console.log(iterator.next()); //{done: false, value: [3, 55]}
console.log(iterator.next()); //{done: true, value: undefined}

//utilizzando un ciclo for - of
for (let el of iterator) {
    console.log(el); //stampa i valori [0, 7], [1, 12], [2, 23], [3, 55]
}

forEach()

Il metodo forEach() esegue la funzione passata come parametro su tutti gli elementi dell'array. Non è possibile utilizzare le parole chiave break e continue come nei cicli for (Uncaught SyntaxError: Illegal break statement). Il metodo ritorna sempre undefined e non è chainable, quindi non ritorna un nuovo array nè modifica quello esistente. Usare la parola chiave return non ferma il ciclo.

var colori = ["bianco", "lilla", "turchese", "indaco"];

colori.forEach( (el, i, array) => {
    el = i + " " + el;
    console.log(el); // stampa "0 bianco", "1 lilla", "2 turchese", "3 indaco"
    console.log(array); //stampa 4 volte ["bianco", "lilla", "turchese", "indaco"]
});
console.log(colori); //["bianco", "lilla", "turchese", "indaco"]

colori.forEach(function(el, i, array) {
    el = el + " " + i;
    console.log(el); //stampa "bianco 0", "lilla 1", "turchese 2", "indaco 3"
    console.log(array); //stampa 4 volte ["bianco", "lilla", "turchese", "indaco"]
    console.log(this); //in questo caso stampa 4 volte Window, ma se fossimo in oggetto 
}, this);
console.log(colori); //["bianco", "lilla", "turchese", "indaco"]

var callbackForEach = function(el, i, array) { //si può anche definire la funzione al di fuori del forEach
    console.log(el, i, array);
}
colori.forEach(callbackForEach, this); //attenzione, senza le parentesi!!!
console.log(colori); //["bianco", "lilla", "turchese", "indaco"]

map()

Il metodo map() crea un nuovo array con i risultati dell'esecuzione della funzione passata come parametro su tutti gli elementi dell'array.

var colori = ["bianco", "lilla", "turchese", "indaco"];

var newColors = colori.map( (el, i, array) => {
    el = i + " " + el;
    return el; //ricordarsi di ritornare sempre qualcosa
});
console.log(colori); //["bianco", "lilla", "turchese", "indaco"]
console.log(newColors); //["0 bianco", "1 lilla", "2 turchese", "3 indaco"]

var newColors2 = colori.map(function(el, i, array) {
    el = el + " " + i;
    return el;  //ricordarsi di ritornare sempre qualcosa
}, this);
console.log(colori); //["bianco", "lilla", "turchese", "indaco"]
console.log(newColors2); //["bianco 0", "lilla 1", "turchese 2", "indaco 3"]

var callbackMap = function(el, i, array) { //si può anche definire la funzione al di fuori del forEach
    return i;  //ricordarsi di ritornare sempre qualcosa
}
var newColors3 = colori.map(callbackMap, this); //attenzione, senza le parentesi!!!
console.log(colori); //["bianco", "lilla", "turchese", "indaco"]
console.log(newColors3); //[0, 1, 2, 3]

var newColors4 = colori.map((el, i, array) => {
    return el + " " + i;
}).map((el, i, array) => { //chainable!
    return i + " " + el;
});

console.log(newColors4); //["0 bianco 0", "1 lilla 1", "2 turchese 2", "3 indaco 3"]

concat()

Il metodo concat() serve per creare un nuovo array formato dalle coppie chiave-valore contenute nell'array in oggetto e da quelle contenute nell'array passato come parametro.

var pari = [4, 10, 16, 24];
var dispari = [9, 11, 15, 21];
var numeri = pari.concat(dispari);

console.log(pari); //[4, 10, 16, 24]
console.log(dispari); //[9, 11, 15, 21]
console.log(numeri); //[4, 10, 16, 24, 9, 11, 15, 21]

//creare una copia di un array evitando il problema del passaggio per referenza
//concatenare con un array vuoto non ha nessun effetto se non quello di ritornare un nuovo array
var frutta = ["mela", "pera"];
var copiaFrutta = frutta.concat([]);
console.log(copiaFrutta); //["mela", "pera"]
frutta.push("banana");
console.log(frutta); //["mela", "pera", "banana"]
console.log(copiaFrutta); //["mela", "pera"]

push() / unshift()

Il metodo push() serve per aggiungere alla fine dell'array in oggetto gli elementi passati come parametro mentre il metodo unshift() li aggiunge all'inizio. Entrambi ritornano la nuova lunghezza dell'array.

var gatti = ["persiano", "soriano"];
gatti.push("certosino", ["siberiano", "norvegese"], {nudo: "sphynx", bicolore: "siamese"});
console.log(gatti); 
//["persiano", "soriano", "certosino", ["siberiano", "norvegese"], {nudo: "sphynx", bicolore: "siamese"}]
console.log(gatti.unshift("europeo")); //6
console.log(gatti); //["europeo", "persiano", "soriano", "certosino", ["siberiano", "norvegese"], {nudo: "sphynx", bicolore: "siamese"}]

shift() / pop()

Il metodo shift() estrae dall'array in oggetto il primo elemento e lo ritorna, mentre il metodo pop() estrae l'ultimo e lo ritorna.

var pizze = ["margherita", "capricciosa", "4 stagioni", ["vegetariana", "vegana"], "hawaiana"];
console.log(pizze.shift()); //"margherita"
console.log(pizze); //["capricciosa", "4 stagioni", ["vegetariana", "vegana"], "hawaiana"]
console.log(pizze.pop()); //"hawaiana"
console.log(pizze); //["capricciosa", "4 stagioni", ["vegetariana", "vegana"]]

copyWithin()

fill()

slice()

splice()

find()

findIndex()

indexOf()

Il metodo indexOf() serve per conoscere la chiave corrispondente al valore passato come parametro.

E' anche possibile indicare un secondo parametro che definisce da quale indice bisogna iniziare a cercare.

Se il valore non viene trovato la funzione restituisce il valore -1.

lastIndexOf()

Il metodo lastIndexOf(elemento dell'array) serve per conoscere la chiave corrispondente al valore passato come parametro, iniziando la ricerca dalla fine dell'array.

includes()

filter()

every()

some()

join()

Il metodo join() serve per creare una stringa a partire dall'array in oggetto. La stringa sarà formata dalla concatenazione dei valori dell'array divisi dal separatore di default (una virgola).

E' anche possibile indicare come parametro un separatore diverso da quello di default.

toString()

toLocaleString()

sort()

reverse()

Il metodo reverse() serve per invertire l'ordine degli elementi dell'array in oggetto.

flat()

flatMap()

reduce()

reduceRight()