Resumo : neste tutorial, você falará sobre o flatMap()
método JavaScript Array que mapeia cada elemento em um array usando uma função de mapeamento e nivela o resultado em um novo array.
Introdução ao flatMap()
método JavaScript Array
O flat()
método cria um novo array com os elementos dos subarrays concatenados nele.
O map()
método cria um novo array cujos elementos são os resultados de uma função de mapeamento.
O flatMap()
método é a combinação do map()
método seguido pelo flat()
método de profundidade 1.
O flatMap()
método primeiro mapeia cada elemento em um array usando uma função de mapeamento e depois nivela os resultados em um novo array.
O seguinte mostra a sintaxe do flatMap()
método:
let newArray = arrayObject.flatMap(callback,thisArg);
Linguagem de código: JavaScript ( javascript )
O flatMap()
método leva dois parâmetros:
1) A callback
função de mapeamento
A callback
função de mapeamento tem a mesma sintaxe do map()
método:
function callback(currentValue [[,index], array]);
Linguagem de código: JavaScript ( javascript )
2) O thisArg
argumento
O thisArg
argumento opcional é um valor a ser usado this
ao executar o arquivo callback
.
Observe que o flatMap()
método não modifica o array original.
flatMap()
Exemplos de matriz JavaScript
Vejamos alguns exemplos de uso do flatMap()
método.
1) Exemplo de criação de palavras a partir de frases
Suponha que você tenha o seguinte array:
let sentences = ["JavaScript Array flatMap()", " ", "is", " ", "Awesome"];
Linguagem de código: JavaScript ( javascript )
A seguinte map()
função divide as palavras das frases:
let words = sentences.map(s => s.split(' '));
console.log(words);
Linguagem de código: JavaScript ( javascript )
Saída:
[
[ 'JavaScript', 'Array', 'flatMap()' ],
[ ' ' ],
[ 'is' ],
[ ' ' ],
[ 'Awesome' ]
]
Linguagem de código: JavaScript ( javascript )
O resultado é uma matriz de matrizes aninhadas preenchidas por palavras. Para nivelar o resultado, você pode usar o flat()
método no resultado do map()
método. No entanto, será mais conciso usar o flatMap()
método.
O flatMap()
cria um array nivelado executando cada frase do array por meio de uma função de mapeamento e nivelando os resultados mapeados:
let sentences = [
"JavaScript Array flatMap()",
" ",
"is",
" ",
"Awesome"
];
let words = sentences.flatMap(s => s.split(' '));
console.log(words);
Linguagem de código: JavaScript ( javascript )
Saída:
[ 'JavaScript', 'Array', 'flatMap()', '', '', 'is', '', '', 'Awesome' ]
Linguagem de código: JSON/JSON com comentários ( json )
2) Exemplo de adição e remoção de elementos durante o mapeamento
O flatMap()
método permite adicionar ou remover elementos durante o mapeamento. Considere o seguinte exemplo:
Suponha que você tenha o seguinte carrinho de compras:
let cart = [{
name: 'Smartphone',
qty: 2,
price: 500,
freeOfCharge: false
},
{
name: 'Tablet',
qty: 1,
price: 800,
freeOfCharge: false
}
];
Linguagem de código: JavaScript ( javascript )
Se os clientes comprarem um smartphone, você deseja oferecer a eles um protetor de tela grátis.
Quando o cliente adiciona um smartphone ao carrinho, você pode adicionar um protetor de tela ao carrinho usando o flatMap()
método a seguir:
let newCart = cart.flatMap(
(item) => {
if (item.name === 'Smartphone') {
return [item, {
name: 'Screen Protector',
qty: item.qty,
price: 5,
freeOfCharge: true
}]
} else {
return [item];
}
}
);
console.log(newCart);
Linguagem de código: JavaScript ( javascript )
O carrinho ficará assim:
[
{ name: 'Smartphone', qty: 2, price: 500, freeOfCharge: false },
{ name: 'Screen Protector', qty: 2, price: 5, freeOfCharge: true },
{ name: 'Tablet', qty: 1, price: 800, freeOfCharge: false }
]
Linguagem de código: JavaScript ( javascript )
A seguir, utiliza-se o reduce()
método para calcular o valor total dos itens no carrinho. Ele ignora itens gratuitos, como protetores de tela:
const total = newCart.reduce((sum, item) => {
if (!item.freeOfCharge)
sum += item.price * item.qty;
return sum;
}, 0);
console.log({total});
Linguagem de código: JavaScript ( javascript )
Saída:
{ total: 1800 }
Linguagem de código: JavaScript ( javascript )
Resumo
- Use o
flatMap()
método para criar uma matriz nivelada de elementos executando cada elemento da coleção por meio de uma função de mapeamento e nivelando os resultados mapeados.