Mapa de array JavaScript: transformando elementos

Resumo : neste tutorial, você aprenderá como usar o map()método JavaScript Array para transformar elementos em um array.

Introdução ao map()método JavaScript Array

Às vezes, você precisa pegar um array , transformar seus elementos e incluir os resultados em um novo array.

Normalmente, você usa um forloop para iterar sobre os elementos, transformar cada um deles individualmente e enviar os resultados para um novo array.

Vejamos um exemplo.

Suponha que você tenha uma matriz de números onde cada elemento representa o raio de um círculo da seguinte forma:

let circles = [
    10, 30, 50
];
Linguagem de código:  JavaScript  ( javascript )

A seguir ilustra como calcular a área de cada círculo e inserir o resultado em uma nova matriz.

let areas = []; // to store areas of circles
let area = 0;
for (let i = 0; i < circles.length; i++) {
    area = Math.floor(Math.PI * circles[i] * circles[i]);
    areas.push(area);
}
console.log(areas);Linguagem de código:  JavaScript  ( javascript )

Saída

É necessária uma grande quantidade de código para fazer isso.

A partir do ES5, o tipo JavaScript Array fornece o map()método que permite transformar os elementos do array de uma forma mais limpa.

function circleArea(radius) {
    return Math.floor(Math.PI * radius * radius);
}
let areas = circles.map(circleArea);
console.log(areas);
Linguagem de código:  JavaScript  ( javascript )

Saída

[314, 2827, 7853]Linguagem de código:  JSON/JSON com comentários  ( json )

Como funciona.

• Primeiro, defina uma função que calcule a área de um círculo.
• Em seguida, passe a circleArea função para o map()método. O map()método chamará a circleArea função em cada elemento do circlesarray e retornará um novo array com os elementos que foram transformados.

Para torná-lo mais curto, você pode passar no map()método uma função anônima como segue.

let areas = circles.map(function(radius){
    return Math.floor(Math.PI * radius * radius);
});
console.log(areas);
Linguagem de código:  JavaScript  ( javascript )

Além disso, você pode usar a função de seta no ES6 para obter o mesmo resultado com um código mais limpo:

let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);Linguagem de código:  JavaScript  ( javascript )

Método JavaScript Array map() em detalhes

O seguinte ilustra o map()método.

arrayObject.map(callback[,contextObject]);Linguagem de código:  CSS  ( css )

O map()método leva dois argumentos nomeados, o primeiro é obrigatório e o segundo é opcional.

Semelhante a outro método iterativo, como   every(),   some(),   e   , a função tem o seguinte formato filter():forEach()sort()callback()

function callback(currentElement,index,array){
  // ... 
}Linguagem de código:  JavaScript  ( javascript )

A callback()função leva três argumentos:

• The currentElementé o elemento atual da matriz que está sendo processada.
• O indexé o índice do currentElement.
• O arrayé o objeto array que está sendo percorrido.

O currentElementé obrigatório enquanto os argumentos indexe arraysão opcionais.

Se você passar the contextObjectpara o map()método, poderá referenciar the contextObjectdentro da callback()função usando a thispalavra-chave.

É importante notar que o map()método não altera o array original, ele cria um novo array de todos os elementos que foram transformados pela função de retorno de chamada.

map()Mais exemplos de array JavaScript

O exemplo a seguir mostra como transformar uma matriz de números usando um método integrado do Mathtipo como callback()função.

let numbers = [16, 25, 36];
let results = numbers.map(Math.sqrt);
console.log(results);Linguagem de código:  JavaScript  ( javascript )

Saída

 [4, 5, 6]Linguagem de código:  JSON/JSON com comentários  ( json )

A nova matriz contém as raízes quadradas dos números na numbersmatriz.

Neste tutorial, você aprendeu como usar o map()método JavaScript Array para transformar elementos de um array de acordo com uma função fornecida.