Mapa JavaScript

Neste artigo, vamos aprender um dos métodos mais amplamente utilizados para a matriz, que é o Método MAP (). O método do mapa ajuda no mapeamento de matrizes de acordo com nossos requisitos. Vamos ver, o que é um método de mapa ()? Qual é a sintaxe para mapear matrizes usando o método map ()?

A matriz Método do mapa é usado para construir uma nova matriz mapeada com base no valor de retorno da função de retorno de chamada para cada elemento.

var mappedArray = matriz.mapa (função de chamada, thisValue)

O ligar de volta é a função que será chamada sempre para um único elemento e retornará um valor que será armazenado em uma nova matriz. A sintaxe para a função de retorno de chamada é

função (valor, [índice [, matriz]])

valor é um argumento necessário, que na verdade é um único elemento da matriz.
O índice é um argumento opcional que será usado como o índice de cada elemento na função de retorno de chamada.
O variedade é um argumento opcional também. Podemos passar esse argumento se quisermos usar a matriz na função de retorno de chamada.

Este valor é o valor que queremos passar, que será usado como um "isto" na função de retorno de chamada. Caso contrário, "indefinido" será passado.

O JavaScript fornece o loop for… em loop e foreach para iterar através de elementos e manipular matrizes. Mas, por que precisamos de um método de mapa além disso? Existem duas razões principais para isso. Uma é a separação de preocupação e a segunda é a sintaxe fácil para realizar essas tarefas. Então, vamos tentar alguns exemplos diferentes para demonstrar o objetivo e o uso certo.

Exemplos

Primeiro de tudo, teremos uma demonstração simples na qual temos uma variedade simples de números nos quais tentaremos realizar qualquer operação aritmética simples em todos os elementos.

var arr = [4, 8, 16, 64, 49];

Agora, antes de aplicar o método do mapa sobre esta matriz. Primeiro, escreveremos uma função de retorno de chamada para a qual podemos chamar em nossa função de mapa, na qual, digamos que queremos multiplicar cada elemento com 10 e ter uma nova matriz.

função multiply (elemento)
var newelement = elemento * 10;
retornar newelement;

Tudo está configurado para aplicar o método do mapa sobre a matriz e ter os resultados necessários.

var newarr = arr =.mapa (multiplicar);

Agora, se demos uma olhada no "newarr",

console.log (newarr);

Podemos ver a última matriz mapeada na saída, conforme nosso requisito.

Tenha isso em mente que o comprimento da nova matriz mapeada será definitivamente igual à matriz original.

Há uma maneira mais curta de fazer a mesma tarefa usando a seta ou a função anônima dentro de um método de mapa. Então, podemos escrever uma função de retorno de chamada em um método de mapa como este

var newarr = arr =.mapa ((elemento) =>
elemento de retorno * 10
)

Ou, se queremos ser um profissional e torná -lo mais conciso. Nós podemos fazer isso

var newarr = arr =.mapa (e => e * 10)

Tudo bem! Então, essa foi a demonstração muito básica do método do mapa e diferentes maneiras de escrever a função de volta. Mas, essa função é mais útil, quando estamos brincando com uma variedade de objetos. É aí que a verdadeira implementação acontece.

Usando mapa com uma variedade de objetos

Neste exemplo, supomos uma variedade de objetos nos quais cada objeto contém as informações de um jogador. Nome do jogador e seu id.

var arr = [
id: 12, nome: "James",
id: 36, nome: "Morgan",
id: 66, nome: "Jordan"
];

Agora, digamos que queremos extrair os IDs de cada objeto e ter uma nova variedade de IDs.
Mas, para entender como o método do mapa é diferente e ajuda melhor que o loop foreach. Vamos tentar os dois (método de mapa e loop foreach) para realizar a mesma tarefa e aprender a diferença.

Então, primeiro, tentaremos extrair IDs usando o loop foreach e depois usando o método do mapa.

var extrairdids = [];
arr.foreach ((elemento) =>
Retornar extrairdids.push (elemento.eu ia);
)

Agora, se dermos os IDs extraídos.

console.log (extrairedids);

Nós os separamos em uma matriz. Mas agora vamos demonstrar a mesma saída usando o método do mapa.

var extrairDIds = arr.mapa ((elemento) =>
elemento de retorno.eu ia;
)
console.log (extrairedids);

Observando a diferença no código e na mesma saída, podemos perceber a verdadeira diferença entre os dois métodos (foreach e mapa). A sintaxe e separação de preocupação.

Da mesma forma, podemos realizar muitas outras operações. Se tivermos que jogar e obter alguns dados da matriz de objetos. Supomos uma variedade de objetos nos quais cada objeto contém duas propriedades: primeiro nome e sobrenome.

var arr = [
FirstName: "John", LastName: "Doe",
FirstName: "Morgan", LastName: "Freeman",
FirstName: "Jordan", LastName: "Peterson"
];

Agora, queremos ter uma matriz que contenha os nomes completos. Então, vamos escrever uma função de mapa como essa para cumprir nosso propósito

var fullname = arr.mapa ((pessoa) =>
pessoa de volta.primeiro nome + " + pessoa.sobrenome
)
console.log (nome completo);

Como você pode ver, temos uma matriz separada com nomes completos. Isso é ótimo.

Portanto, essas são algumas das maneiras básicas e diferentes de como uma função de mapa pode ser usada para atender aos requisitos de desenvolvimento e ajuda na vida de todos os javascripts do desenvolvedor.

Conclusão

Neste artigo, aprendemos sobre o método mais usado do JavaScript para matrizes e aprendemos algumas das diferentes maneiras de usar o método do mapa. Este artigo explica o conceito do método de mapa de uma maneira tão fácil e profunda que qualquer codificador iniciante pode entendê -lo e utilizá -lo para suas necessidades. Então, continue aprendendo, trabalhando e obtendo experiência em JavaScript com Linuxhint.com ter uma compreensão melhor sobre isso. Muito obrigado!