Il metodo flatMap

Il metodo flatMap restituisce un nuovo array, creato dopo che a ogni elemento dell'array originale è stato applicato un callback, specificato nel parametro del metodo. A prima vista il metodo flatMap è simile al metodo map, ma la sua differenza principale è che restituisce sempre un array monodimensionale.

Sintassi

javascriptlet newArray = array.flatMap(funzione);

Esempio

Otteniamo un nuovo array, utilizzando il metodo flatMap:

javascriptlet arr = ['a', 'b', 'c'];

let res = arr.flatMap(function(elem) {
  return elem + '!';
});

console.log(res);

Risultato dell'esecuzione del codice:

javascript['a!', 'b!', 'c!']

Esempio

Otteniamo un nuovo array a partire da uno originale composto da numeri:

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

let res = arr.flatMap(function(elem) {
  return elem + 2;
});

console.log(res);

Risultato dell'esecuzione del codice:

javascript[3, 4, 5, 6, 7]

Esempio

Proviamo ad applicare il metodo flatMap a un array con il primo livello di annidamento:

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

let res = arr.flatMap(function getElem(elem){
  return elem + 2;
});

console.log(res);

Dopo l'esecuzione del codice vedremo che le condizioni della funzione sono state applicate al sotto-array, considerandolo come un unico elemento. Pertanto, chiamare questo metodo su array annidati non ha senso:

javascript[3, 4, 5, '4,52']

Esempio

Se non vogliiamo preoccuparci del livello di annidamento, ma unire l'intero array, utilizziamo il parametro Infinity:

javascriptlet arr = ['a', 'b', ['c', 'd', ['e', 'f', ['g', 'h', ['i']]]]];

let res = arr.flatMap(Infinity);

console.log(res);

Risultato dell'esecuzione del codice:

javascript[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h', 'i'
]

Esempio

Applichiamo all'array due metodi: flatMap e map, e in entrambi i metodi verrà specificata una funzione che rende l'array bidimensionale:

javascriptlet arr = [1, 2, 3, 4, 5, 6];
let res1 = arr.map(elem => [elem * 3]);
let res2 = arr.flatMap(elem => [elem * 3]);

console.log('metodo map', res1);
console.log('metodo flatMap', res2);

Risultato dell'esecuzione del codice:

javascript'metodo map' [[3], [6], [9], [12], [15], [18]]
'metodo flatMap' [3, 6, 9, 12, 15, 18]

Vedi anche