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 for
loop 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 omap()
método. Omap()
método chamará acircleArea
função em cada elemento docircles
array 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 chama uma função de retorno de chamada em cada elemento de um array e retorna um novo array que contém os resultados.
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 docurrentElement
. - O
array
é o objeto array que está sendo percorrido.
O currentElement
é obrigatório enquanto os argumentos index
e array
são opcionais.
Se você passar the contextObject
para o map()
método, poderá referenciar the contextObject
dentro da callback()
função usando a this
palavra-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 Math
tipo 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 numbers
matriz.
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.