Metodi per gli array

Gli array forniscono una gran quantit di metodi. Per rendere le cose pi semplici, in questo capitolo li abbiamo divisi per gruppi.

Aggiungere/rimuovere elementi

Conosciamo gi i metodi che consentono di aggiungere e rimuovere elementi:

• arr.push(...items) aggiunge un elemento in coda,
• arr.pop() estrae un elemento dalla coda,
• arr.shift() estrae un elemento dalla testa,
• arr.unshift(...items) aggiunge un elemento in testa.

Vediamone altri.

splice

Come cancellare un elemento dallarray?

Gli array sono oggetti, quindi possiamo provare ad utilizzare delete:

let arr = ["I", "go", "home"];

delete arr[1]; // rimuove "go"

alert( arr[1] ); // undefined

// ora arr = ["I",  , "home"];
alert( arr.length ); // 3

Lelemento viene rimosso, ma larray ha ancora 3 elementi, possiamo vederlo tramite arr.length == 3.

Non una sorpresa, perch delete obj.key rimuove un valore dalla key. Questo tutto quello che fa. Pu andare bene per gli oggetti. Con gli array vorremmo che il resto degli elementi scalassero, andando ad occupare il posto che si liberato. Per questo ci aspetteremmo di avere un array pi corto.

Per questo scopo sono stati sviluppati dei metodi dedicati.

Il metodo arr.splice un coltellino svizzero per array. Pu fare qualsiasi cosa: aggiungere e rimuovere elementi, ovunque.

La sintassi :

arr.splice(start[, deleteCount, elem1, ..., elemN])

Modifica larray partendo dallindice start; rimuove deleteCount elementi ed inserisce elem1, ..., elemN. Infine ritorna un array contenente gli elementi rimossi.

Questo metodo facile da capire tramite esempi.

Proviamo ad eliminare degli elementi:

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // a partire da indice 1 rimuove 1 elemento

alert( arr ); // ["I", "JavaScript"]

Facile, vero? Ha rimosso 1 elemento, a partire dallelemento 1.

Nel prossimo esempio, rimuoviamo 3 elementi e li rimpiazziamo con altri due:

let arr = ["I", "study", "JavaScript", "right", "now"];

// rimuove i primi 3 elementi e li rimpiazza con altri
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // ora ["Let's", "dance", "right", "now"]

Possiamo vedere larray ritornato da splice contenente gli elementi rimossi:

let arr = ["I", "study", "JavaScript", "right", "now"];

// rimuove i primi 2 elementi
let removed = arr.splice(0, 2);

alert( removed ); // "I", "study" <-- array di elementi rimossi

Il metodo splice anche in grado di inserire elementi senza alcuna rimozione. Per ottenere questo dobbiamo impostare deleteCount a 0:

let arr = ["I", "study", "JavaScript"];

// da indice 2
// ne rimuove 0
// poi inserisce "complex" e "language"
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

let arr = [1, 2, 5];

// dall'indice -1 (un passo dalla fine)
// cancella 0 elementi,
// poi inserisce 3 e 4
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

slice

Il metodo arr.slice pi semplice di arr.splice.

La sintassi :

arr.slice([start], [end])

Ritorna un nuovo array contente tutti gli elementi a partire da "start" fino ad "end" ("end" escluso). Sia start che end possono essere negativi; in tal caso si inizier a contare dalla coda dellarray.

Funziona come str.slice, ma crea dei sotto-array piuttosto che sotto-stringhe.

Ad esempio:

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (copia da 1 a 3)

alert( arr.slice(-2) ); // s,t (copia da -2 fino alla fine)

Possiamo anche utilizzarlo senza argomenti: arr.slice() crea una copia di arr. Questo tipo di chiamata spesso utilizzata per creare una copia con cui poter liberamente lavorare senza modificare larray originale.

concat

Il metodo arr.concat crea un nuovo array che include valori di altri array, o elementi aggiuntivi.

La sintassi :

arr.concat(arg1, arg2...)

Accetta un numero arbitrario di argomenti sia array che valori.

Il risultato un nuovo array contenente gli elementi di arr, seguiti da arg1, arg2 etc.

Se un argomento argN un array, tutti i suoi elementi vengono copiati. Altrimenti viene copiato solamente largomento stesso.

Un esempio:

let arr = [1, 2];

// unisce arr con [3,4]
alert( arr.concat([3, 4])); // 1,2,3,4

// unisce arr con [3,4] e [5,6]
alert( arr.concat([3, 4], [5, 6])); // 1,2,3,4,5,6

// unisce arr con [3,4], poi aggiunge i valori 5 e 6
alert( arr.concat([3, 4], 5, 6)); // 1,2,3,4,5,6

Normalmente copia elementi da un array. Gli altri oggetti, anche se assomigliano molto ad un array, vengono aggiunti interamente:

let arr = [1, 2];

let arrayLike = {
  0: "something",
  length: 1
};

alert( arr.concat(arrayLike) ); // 1,2,[object Object]

Se, invece, un oggetto simile ad un array possiede la propriet Symbol.isConcatSpreadable, allora viene trattato come un array e i suoi elementi vengono copiati:

let arr = [1, 2];

let arrayLike = {
  0: "something",
  1: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,something,else

Iterate: forEach

Il metodo arr.forEach consente di eseguire una funzione su ogni elemento dellarray.

La sintassi:

arr.forEach(function(item, index, array) {
  // ... fa qualcosa con l'elemento
});

Ad esempio, il codice sotto mostra ogni elemento dellarray:

// per ogni elemento chiama alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

Invece questo codice ne mostra anche la posizione:

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

Il risultato di questa funzione (sempre che ci sia) viene scartato.

Ricerca in un array

Ora vedremo dei metodi per effettuare ricerche in un array.

indexOf/lastIndexOf e include

I metodi arr.indexOf, arr.lastIndexOf e arr.includes hanno la stessa sintassi, e fanno praticamente la stessa cosa della loro controparte per stringhe, ma operano su elementi invece che su caratteri:

• arr.indexOf(item, from) cerca un item a partire dallindirizzo from, e ritorna lindirizzo in cui stato trovato, altrimenti ritorna -1.
• arr.lastIndexOf(item, from) lo stesso, ma esegue la ricerca a partire da destra verso sinistra.
• arr.includes(item, from) cerca un item a partire dallindice from, e ritorna true se lo trova.

Ad esempio:

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

Da notare che questi metodi usano il confronto ===. Quindi, se cerchiamo false, troveremo esattamente false e non zero.

Se vogliamo solo verificare la presenza di un elemento, senza voler conoscere lindirizzo, preferibile utilizzare il metodo arr.includes.

Inoltre, una piccola differenza che includes gestisce correttamente NaN, a differenza di indexOf/lastIndexOf:

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 (dovrebbe essere 0, ma l'uguaglianza === non funziona con NaN)
alert( arr.includes(NaN) );// true (corretto)

find e findIndex

Immaginiamo di avere un array di oggetti. Come possiamo trovare un oggetto che soddisfi specifiche condizioni?

In questi casi si utilizza il metodo arr.find.

La sintassi :

let result = arr.find(function(item, index, array) {
  // se viene ritornato true, viene ritornato l'elemento e l'iterazione si ferma
  // altrimenti ritorna undefined
});

La funzione viene chiamata per ogni elemento dellarray:

• item lelemento.
• index il suo indice.
• array larray stesso.

Se la chiamata ritorna true, la ricerca viene interrotta e viene ritornato item. Se non viene trovato nulla verr ritornato undefined.

Ad esempio, abbiamo un array di utenti, ognuno con i campi id e name. Cerchiamo quello con id == 1:

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

Gli array di oggetti sono molto comuni, quindi il metodo find risulta molto utile.

Da notare che nellesempio noi forniamo a find un singolo argomento item => item.id == 1. Gli altri parametri di find sono raramente utilizzati.

Il metodo arr.findIndex fa essenzialmente la stessa cosa, ma ritorna lindice in cui stata trovata la corrispondenza piuttosto di ritornare loggetto stesso; se loggetto non viene trovato ritorna -1.

filter

Il metodo find cerca un singola occorrenza dellelemento, la prima, e se trovata ritorna true.

Se vogliamo cercare pi occorrenze, possiamo utilizzare arr.filter(fn).

La sintassi pressoch la stessa di find, ma ritorna un array contenente tutte le corrispondenze trovate:

let results = arr.filter(function(item, index, array) {
  // se un item  true viene messo dentro results e l'iterazione continua
  // ritorna un array vuoto qualora nessun elemento ritornasse true
});

Ad esempio:

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// ritorna un array con i primi due users
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

Trasformare un array

Questa sezione di occupa dei metodi che trasformano o riordinano gli array.

map

Il metodo arr.map uno dei pi utili e maggiormente utilizzati.

La sintassi :

let result = arr.map(function(item, index, array) {
  // ritorna il nuovo valore piuttosto di item
})

La funzione viene chiamata per ogni elemento dellarray e ritorna un array con i risultati.

Ad esempio, qui trasformiamo ogni elemento nella propria length:

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort(fn)

Il metodo arr.sort ordina larray sul posto, ovvero cambia la posizione originale dei suoi elementi.

Ritorna altres larray riordinato, ma il risultato viene di solito ignorato, essendo larr originale modificato.

Ad esempio:

let arr = [ 1, 2, 15 ];

// il metodo riordina il contenuto di arr (e lo ritorna)
arr.sort();

alert( arr );  // 1, 15, 2

Notate qualcosa di strano nel risultato?

Lordine degli elementi diventato 1, 15, 2. Errato. Ma perch?

Di default gli elementi vengono ordinati come stringhe.

Letteralmente, tutti gli elementi vengono convertiti in stringhe e confrontati. Quindi, viene applicato lalgoritmo di ordinamento lessicografico, perci "2" > "15".

Per utilizzare un ordinamento arbitrario, dobbiamo fornire una funzione come argomento di arr.sort().

La funzione dovrebbe essere simile a questa:

function compare(a, b) {
  if (a > b) return 1; // se il primo valore  maggiore del secondo
  if (a == b) return 0; // se i valori sono uguali
  if (a < b) return -1; // se il primo valore  inferiore al secondo
}

Ad esempio, per ordinare dei numeri:

function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr);  // 1, 2, 15

Ora funziona come dovrebbe.

Proviamo un attimo a capire cosa sta succedendo. Larray arr pu contenere qualsiasi cosa, giusto? Pu contenere numeri, stringhe, elementi HTML o qualsiasi altra cosa. Abbiamo quindi un insieme di qualcosa. Per poterlo ordinare abbiamo bisogno di una funzione di ordinamento che sappia ordinare gli elementi passati come argomenti. Lordinamento di default di tipo stringa.

Il metodo arr.sort(fn) implementa un algoritmo di ordinamento. Non dovremmo preoccuparci di come funzioni esattamente (la maggior parte delle volte un quicksort ottimizzato). Questo algoritmo attraverser lintero array e confronter i suoi valori; tutto quello che dobbiamo fare sar fornirgli una funzione fn che esegua il confronto.

In ogni caso, se mai volessimo conoscere quali elementi vengono comparati nulla ci vieta di utilizzare alert:

[1, -2, 15, 2, 0, 8].sort(function(a, b) {
  alert( a + " <> " + b );
  return a - b;
});

Lalgoritmo potrebbe confrontare un elemento pi volte durante il processo, sebbene tenti di fare il minor numero di confronti possibili.

let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return a - b; });

alert(arr);  // 1, 2, 15

arr.sort( (a, b) => a - b );

let countries = ['sterreich', 'Andorra', 'Vietnam'];

alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, sterreich (wrong)

alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,sterreich,Vietnam (correct!)

reverse

Il metodo arr.reverse inverte lordine degli elementi contenuti in arr.

Ad esempio:

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

Inoltre ritorna arr dopo averlo invertito.

split e join

Vediamo una situazione reale. Stiamo scrivendo unapplicazione di messaggistica, e lutente inserisce una lista di destinatari: John, Pete, Mary. Per noi sarebbe pi comodo avere un array di nomi piuttosto di una singola stringa. Come possiamo ottenerlo?

Il metodo str.split(delim) fa esattamente questo. Divide la stringa in un array utilizzando il delimitatore delim.

Nellesempio sotto, utilizziamo come delimitatore una virgola seguita da uno spazio:

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `A message to ${name}.` ); // A message to Bilbo (e altri name)
}

Il metodo split ha un secondo argomento opzionale di tipo numerico un limite di lunghezza per larray. Se questo argomento viene fornito, allora gli elementi extra verranno ignorati. Ma nella pratica raramente utilizzato:

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

let str = "test";

alert( str.split('') ); // t,e,s,t

La chiamata ad arr.join(separatore) fa esattamente linverso di split. Crea una stringa con gli elementi di arr incollati tra loro dal separatore.

Ad esempio:

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // incolla l'array utilizzando ;

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight

Quando vogliamo iterare su un array possiamo utilizzare forEach, for o for..of.

Quando invece abbiamo la necessit di iterare e ritornare dati per ogni elemento possiamo usare map.

I metodi arr.reduce e arr.reduceRight fanno parte della stessa categoria, ma sono leggermente pi complessi. Vengono utilizzati per calcolare un singolo valore basato sul contenuto dellarray.

La sintassi :

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

La funzione viene applicata ad ogni elemento dellarray uno dopo laltro, passando il risultato alla chiamata successiva.

Argomenti:

• accumulator il risultato della precedente chiamata, uguale ad initial per la prima chiamata (se initial viene fornito).
• item lattuale elemento dellarray.
• index la sua posizione.
• array larray.

Quando la funzione stata applicata, il risultato viene passato alla chiamata successiva.

Sembra complicato, ma non lo se pensate al primo argomento come un accumulatore che memorizza il risultato delle precedenti esecuzioni. E alla fine diventa il risultato di reduce.

Il modo pi semplice per spiegarlo tramite esempi.

Qui otterremo una somma degli elementi dellarray in una riga:

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

Qui abbiamo utilizzato la variante pi comune di reduce con solo 2 argomenti.

Proviamo a vedere nel dettaglio cosa succede.

1. Nella prima esecuzione, sum il valore iniziale (lultimo argomento di reduce), cio 0, e current il primo elemento dellarray, cio 1. Quindi il risultato 1.
2. Nella seconda esecuzione, sum = 1; gli sommiamo il secondo elemento dellarray(2) e ritorniamo il risultato.
3. Nella terza esecuzione, sum = 3; gli sommiamo lelemento successivo, e cosi via

Il flusso di calcolo:

[]

O nella forma tabellare, in cui ogni riga rappresenta una chiamata di funzione:

Come abbiamo potuto osservare, il risultato della chiamata precedente diventa il primo argomento della chiamata successiva.

Possiamo anche omettere il valore iniziale:

let arr = [1, 2, 3, 4, 5];

// rimosso il valore iniziale da reduce (no 0)
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

Il risultato sarebbe lo stesso. Questo perch se non c un valore iniziale, allora reduce prende il primo elemento dellarray come valore iniziale ed inizia literazione dal secondo elemento.

La tabella dei calcoli uguale a quella precedente, viene saltata solo la prima riga.

Questo tipo di utilizzo richiede particolare cura. Se larray vuoto, allora reduce effettua la chiamata senza valore iniziale e provoca un errore.

Vediamo un esempio:

let arr = [];

// Errore: Riduzione di un array vuoto senza valore iniziale
// se il valore iniziale esistesse, reduce lo restituirebbe all'array vuoto.
arr.reduce((sum, current) => sum + current);

Quindi fortemente consigliato di specificare sempre un valore iniziale.

Il metodo arr.reduceRight fa esattamente la stessa cosa, ma da destra verso sinistra.

Array.isArray

Gli array non sono un tipo di dato a s del linguaggio. Sono basati sulla sintassi degli oggetti.

Quindi typeof non aiuta a distinguere un oggetto da un array:

alert(typeof {}); // object
alert(typeof []); // lo stesso

Ma gli array vengono utilizzati cosi spesso che esiste un metodo dedicato per questo: Array.isArray(value). Ritorna true se value un array, false altrimenti.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

la maggior parte dei metodi accetta thisArg

Quasi tutti i metodi degli array che richiedono una funzione come find, filter, map, fatta eccezione per sort, accettano un parametro opzionale thisArg.

Questo parametro non stato spiegato nella sezione sopra, perch viene raramente utilizzato. Studiamolo per completezza.

Vediamo la sintassi di questi metodi:

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg  l'ultimo argomento opzionale

Il valore del parametro thisArg diventa this per func.

Ad esempio, qui utilizziamo il metodo di un oggetto come filtro e thisArg ci risulta utile:

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// trova tutti gli users pi giovani di user
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

Nella chiamata sopra, utilizziamo army.canJoin come filtro e forniamo army come contesto. Se non avessimo fornito il contesto, users.filter(army.canJoin) avrebbe chiamato army.canJoin come funzione a s stante, con this=undefined. Che avrebbe provocato un errore.

Una chiamata a user.filter(army.canJoin, army) pu essere sostituita da users.filter(user => army.canJoin(user)), che fa lo stesso. Lultima versione viene utilizzata pi spesso e per molte persone pi semplice da capire.

Riepilogo

Un breve riepilogo dei metodi per array:

• Per aggiungere/rimuovere elementi:

  • push(...items) aggiunge elementi in coda,
  • pop() estrae un elemento dalla coda,
  • shift() estrae un elemento dalla testa,
  • unshift(...items) aggiunge un elemento alla testa.
  • splice(pos, deleteCount, ...items) allindice pos cancella deleteCount elementi e al loro posto inserisce items.
  • slice(start, end) crea un nuovo array e copia al suo interno gli elementi da start fino ad end (escluso).
  • concat(...items) ritorna un nuovo array: copia tutti gli elementi di quello corrente e ci aggiunge items. Se uno degli items un array, allora vengono presi anche i suoi elementi.

• Ricercare elementi:

  • indexOf/lastIndexOf(item, pos) cerca item a partire da pos, e ritorna lindice, oppure -1 se non lo trova.
  • includes(value) ritorna true se larray contiene value, altrimenti false.
  • find/filter(func) filtra gli elementi tramite una funzione, ritorna il primo/tutti i valori che ritornano true.
  • findIndex simile a find, ma ritorna lindice piuttosto del valore.

• Per iterare sugli elementi:

  • forEach(func) invoca func su ogni elemento; non ritorna nulla.

• Per modificare un array:

  • map(func) crea un nuovo array con i risultati della chiamata func su tutti i suoi elementi.
  • sort(func) ordina larray sul posto, e lo ritorna.
  • reverse() inverte larray sul posto, e lo ritorna.
  • split/join converte una stringa in array e vice versa.
  • reduce/reduceRight(func, initial) calcola un singolo valore chiamando func per ogni elemento e passando un risultato temporaneo tra una chiamata e laltra

• Un altro metodo utile:

  • Array.isArray(arr) controlla che arr sia un array.

Da notare che i metodi sort, reverse e splice modificano larray stesso.

I metodi elencati sono quelli utilizzati pi spesso e sono in grado di coprire il 99% dei casi duso. Ce ne sono altri che possono tornare utili:

• arr.some(fn)/arr.every(fn) controlla larray.

  La funzione fn viene invocata su ogni elemento dellarray in maniera simile a map. Se qualcuno/tutti i risultati sono true, ritorna true, altrimenti false.

  Questi metodi si comportano quasi come gli operatori || e &&: se fn ritorna un valore vero, arr.some() ritorna immediatamente true e conclude literazione; se fn ritorna un valore falso, arr.every() ritorna immediatamente false e smette di iterare.

  Possiamo utilizzare every per confrontare gli array:

  function arraysEqual(arr1, arr2) {
    return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
  }
  
  alert( arraysEqual([1, 2], [1, 2])); // true

• arr.fill(value, start, end) riempie larray con value da start fino a end.

• arr.copyWithin(target, start, end) copia gli elementi da start fino a end dentro se stesso, nella posizione target (sovrascrivendo gli elementi contenuti).

• arr.flat(depth)/arr.flatMap(fn) crea un nuovo array monodimensionale partendo da un array multidimensionale.

Per la lista completa, vedere il manuale.

A prima vista potrebbero sembrare molti metodi da ricordare. Ma in realt molto pi semplice di quanto sembri.

Tenente sempre un occhio al riassunto fornito sopra. Provate anche a risolvere gli esercizi di questo capitolo.

In futuro quando avrete bisogno di fare qualcosa con un array, e non saprete come fare tornate qui, guardate il riassunto e trovate il metodo corretto. Gli esempi vi aiuteranno molto. In poco tempo vi risulter naturale ricordare questi metodi, senza troppi sforzi.