JavaScript Array map()

Definição e uso

map() O método cria um novo array usando os resultados da função chamada para cada elemento do array.

map() O método chama a função fornecida para cada elemento do array uma vez, na ordem.

Observação:map() Não executa a função para elementos do array sem valor.

Observação:map() Não altera o array original.

Exemplo

Exemplo 1

Retorna um array com as raízes quadradas de todos os valores do array original:

var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt)
document.getElementById("demo").innerHTML = x;

Experimente você mesmo

Exemplo 2

Multiplicar todos os valores do array por 10:

var numbers = [65, 44, 12, 4];
var newarray = numbers.map(myFunction)
function myFunction(num) {
  return num * 10;
}
document.getElementById("demo").innerHTML = newarray;;

Experimente você mesmo

Exemplo 3

Obter o nome completo de cada pessoa no array:

var persons = [
  {"firstname": "Malcom", "lastname": "Reynolds"},
  {"firstname": "Kaylee", "lastname": "Frye"},
  {"firstname": "Jayne", "lastname": "Cobb"}
];
function getFullName(item) {
  var fullname = [item.firstname,item.lastname].join(" ");
  return fullname;
}
function myFunction() {
  document.getElementById("demo").innerHTML = persons.map(getFullName);
}

Experimente você mesmo

Sintaxe

array.map(function(currentValue, index, arr), thisValue)

Valor do parâmetro

Parâmetros Descrição
function(currentValue, index, arr) Obrigatório. A função executada para cada elemento do array.

Parâmetros da função:

Parâmetros Descrição
currentValue Obrigatório. O valor do elemento atual.
index Opcional. O índice do array do elemento atual.
arr Opcional. O objeto de array ao qual pertence o elemento atual.
thisValue

Opcional. O valor a ser passado para a função para usar como seu valor "this".

Se este parâmetro estiver vazio, o valor "undefined" será passado como seu valor "this".

Detalhes técnicos

Retorno: Um array que contém os resultados da função fornecida chamada para cada elemento do array original.
Versão do JavaScript: ECMAScript 5

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente este método.

Todos os navegadores suportam completamente map() Método:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9.0 Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial:Arrays do JavaScript

Tutorial:Const de arrays do JavaScript

Tutorial:Métodos de arrays do JavaScript

Tutorial:Ordenação de arrays do JavaScript

Tutorial:Iteração de arrays do JavaScript