Articolo originale: How to Use the flat() and flatMap() Methods to Flatten Arrays in JavaScript
In questo articolo spiegherò come usare i nuovi metodi per array – flat() e flatMap() – introdotti con ES2019 (EcmaScript 2019). Puoi usare questi metodi per "appiattire" degli array.
Si tratta di metodi molto utili e semplici da usare. Sarà davvero molto bello utilizzare questi metodi nel tuo prossimo progetto. Prendi una tazza di tè e partiamo.
Prerequisiti
Per seguire questo tutorial dovresti avere familiarità con il concetto di array in JavaScript.
Cos'è un array?
Un oggetto array è una struttura di dati usata in diversi linguaggi di programmazione per contenere insiemi di dati.
Esempio di un array in JavaScript
const array = [1, 2, 3, true, null, undefined];
console.log(array);
// output atteso
1, 2, 3, true, null, undefined
Nel codice soprastante, abbiamo assegnato una variabile chiamata arr, memorizzando al suo interno diversi elementi/dati di vario tipo.
Il primo elemento, che è 1, si trova all'indice 0. L'ultimo elemento, undefined, si trova all'indice 5.
Non dimenticare che l'indicizzazione degli array parte da zero, quindi l'indice del primo elemento è zero.
Caratteristiche degli array in JavaScript
- Gli array sono indicizzati in base zero: questo vuol dire semplicemente che il primo elemento di un array si trova all'indice zero. L'indice corrisponde alla posizione. In JavaScript e in altri linguaggi di programmazione simili, il termine corretto da usare è indice e non posizione.
- Gli array in JavaScript possono contenere diversi tipi di dati: gli array JavaScript possono contenere un miscuglio di valori come numeri, stringhe, booleani, null e via dicendo.
- JavaScript crea copie superficiali: ciò significa che l'array e la sua copia puntano agli stessi valori – e modificando la copia puoi alterare anche l'array originale.
Nuovi metodi per array in JavaScript
Gli array sono una delle strutture di dati più comuni in JavaScript.
Esistono diversi metodi per array che puoi usare per facilitare delle operazioni e renderti la vita più semplice. Alcuni metodi sono reduce(), filter(), map(), flat(), flatMap(), ma ce ne sono molti altri.
In questo articolo non parleremo di tutti i metodi per array usati in JavaScript. Invece, esamineremo i nuovi metodi flat() e flatMap() che puoi usare per convertire un array in un nuovo array.
Come usare il metodo flat in JavaScript
Puoi usare il metodo flat per convertire un array in un nuovo array. Questo avviene prendendo i sotto-array contenuti e concatenandoli in un singolo array.
Un aspetto importante di questo metodo è che puoi trasformare l'array originale in un altro array in base alla sua profondità. Questo metodo è davvero utile perché rende il calcolo di questa operazione molto più semplice.
Esempi del metodo flat()
Come impostare il parametro di profondità
array.flat(profondità);
Il valore del parametro profondità è 1 di default e puoi non esplicitarlo. Il parametro prende un numero come tipo di dato.
Esempio 1 del metodo flat()
array.flat(1) è uguale a array.flat().
array.flat(2);
Qui sopra, la profondità è 2.
const arr = ["mon", "tues", ["wed", "thurs", ["fri", "sat"]], "sun"] ;
console.log(arr.flat());
// output atteso
["mon", "tues", "wed", "thurs", Array ["fri", "sat"], "sun"];
Cosa sta succedendo in questo codice?
L'array contiene due sotto-array, che sono ["wed", "thurs", ["fri", "sat"]].
Utilizziamo il metodo flat() sull'array chiamato arr per concatenare il primo sotto-array, dato che non abbiamo specificato alcun valore di profondità all'interno del metodo. Ricorda che il valore predefinito di profondità è 1.
Riesci a indovinare quale sarebbe l'array se il valore della profondità fosse 2?
Esempio 2 del metodo flat()
const arr = [1, 2, [3, 4, 5], 6, 7];
console.log(arr.flat());
// output atteso
[1, 2, 3, 4, 5, 6, 7]
Nel codice qui sopra, l'array contiene il sotto-array [3, 4, 5].
Utilizziamo il metodo flat() sull'array chiamato arr per concatenare i due array insieme in un singolo array.
Esempio 3 del metodo flat()
//esempio con profondità 2
const arr2 = [[[1, 2], 3, 4, 5]] ;
console.log(arr2.flat(2));
// output atteso
[1, 2, 3, 4, 5]
Nel codice qui sopra, l'array chiamato arr2 contiene due sotto-array.
Possiamo usare il metodo flat() su arr2 per concatenare i due array in un singolo array perché utilizziamo il valore di profondità 2 all'interno del metodo flat(2). Dai un'occhiata qui sopra e vedi cosa fa il valore della profondità.
Questo è un ottimo metodo per concatenare gli elementi di array ricorsivamente.
Come usare il metodo flatMap in JavaScript
Il metodo flatMap() usa una combinazione dei metodi map() e flat() per svolgere le sue operazioni.
flatMap() itera sugli elementi di un array e li concatena in un solo livello. flatMap() accetta una funzione callback che prende come parametro l'elemento corrente dell'array originale.
Esempio del metodo flatMap()
const arr3 = [1, 2, [4, 5], 6, 7, [8]] ;
console.log(arr3.flatMap((element) => element));
// output atteso
[1, 2, 4, 5, 6, 7, 8]
Nel codice qui sopra, l'array chiamato arr3 contiene due sotto-array distinti.
Abbiamo usato il metodo flatMap() sull'array passando una funzione callback, (element) => element, che itera sugli elementi dell'array e li concatena in un singolo array.
A volte ti troverai in una situazione in cui l'array ha una profondità maggiore e vuoi cambiare l'array in un solo livello di base. In questo caso, dovrai usare il metodo flat() subito dopo il metodo flatMap().
Ecco un esempio:
const arr4 = [1, 2, [3, [4, 5, [6, 7]]]] ;
console.log(arr4.flatMap((element) => element).flat(2)) ;
// output atteso
[1, 2, 3, 4, 5, 6, 7]
Nel codice qui sopra, l'array chiamato arr4 contiene tre sotto-array.
Abbiamo usato il metodo flatMap() sull'array passando una funzione callback, (element) => element, che itera sugli elementi dell'array e li concatena.
Poi abbiamo usato il metodo flat(2) per concatenare ulteriormente l'array in un singolo array passando una profondità di 2.
Fai pratica con questo esempio senza usare il metodo flat(2) e vedi la differenza.
Questo è tutto quello che ti serve per iniziare a usare questo due nuovi metodi per array.
Conclusione
In questo articolo ho parlato brevemente di cosa sono gli array e di come sono utili in JavaScript. Poi abbiamo imparato due nuovi importanti metodi per array, introdotti con ECMAScript 2019, che ti consentono di cambiare l'array originale in un nuovo array.
Si tratta dei metodi flat() e flatMap().
Puoi usare il metodo flat() per concatenare ricorsivamente dei sotto-array in un singolo array. Il metodo flat() prende un valore di profondità come suo parametro, che è opzionale a seconda della profondità dell'array che vuoi "appiattire" (concatenare). Il valore di profondità predefinito del metodo flat() è 1.
flatMap() invece funziona come una combinazione dei metodi map() e flat(). flatMap() itera sugli elementi di un array e li concatena.
Questi due nuovi metodi sono utili se vuoi cambiare un array in un nuovo array. Vale la pena di provarli in uno dei tuoi prossimi progetti, grandi o piccoli che siano.