Matriz JavaScript flatMap

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 callbackfunção de mapeamento

A callbackfunção de mapeamento tem a mesma sintaxe do map()método:

function callback(currentValue [[,index], array]);Linguagem de código:  JavaScript  ( javascript )

2) O thisArgargumento

O thisArgargumento opcional é um valor a ser usado thisao 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.