Array.prototype.flatMap()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

O método flatMap() primeiro mapeia cada elemento usando uma função de mapeamento e, em seguida, nivela o resultado em um novo array. É idêntico a um map seguido por um flat de profundidade 1, mas flatMap é bastante útil e mescla ambos em um método um pouco mais eficiente.

Experimente

const arr1 = [1, 2, 1];

const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));

console.log(result);
// Expected output: Array [1, 2, 2, 1]

Sintaxe

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // retorna o elemento para new_array
}[, thisArg])

Parâmetros

callback

Função que produz um elemento de uma nova Array, pegando três argumentos:

currentValue

O valor atual sendo processo na array.

indexOptional

O index do valor atual sendo processo na array.

arrayOptional

O map da array que foi chamado.

thisArgOptional

Valor para ser usado como this quando callback estiver sendo executado.

Valor de retorno

Uma nova array com cada elemento sendo o resultado da função callback e achatado ao valor de 1.

Descrição

Veja Array.prototype.map() para uma detalhada descrição da função callback. O método flatMap é idêntico ao map seguido por um chamado a flatten de profundidade 1.

Exemplos

map e flatMap

js
var arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

//  Só o primeiro nível
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

Enquanto que acima poderíamos alcançar apenas com a utilização de map, já aqui temos um exemplo onde flatMap é mais apropriado.

Vamos gerar uma lista de palavras a partir de uma lista de sentenças.

js
let arr1 = ["it's Sunny in", "", "California"];

arr1.map((x) => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap((x) => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Perceba, o comprimento da lista de saída pode ser diferente do comprimento da lista de entrada.

Alternativa

reduce e concat

js
var arr1 = [1, 2, 3, 4];
arr1.flatMap((x) => [x * 2]);
// é equivalente a
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [ 2, 4, 6, 8 ]

Especificações

Specification Status Comment
Array.prototype.flatMap proposal Rascunho

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
flatMap

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também