Em nosso desenvolvimento diário, operar e converter matrizes é uma operação muito comum. Vamos dar uma olhada em um exemplo:
A cópia do código é a seguinte:
var descolors = [],
srccolors = [
{r: 255, g: 255, b: 255}, // branco
{r: 128, g: 128, b: 128}, // cinza
{r: 0, g: 0, b: 0} // preto
];
for (var i = 0, ilen = srccolors.length; i <ilen; i ++) {
var color = srccolors [i],
formato = função (cor) {
return math.round (cor / 2);
};
Descolors.push ({
R: formato (color.r),
G: formato (color.g),
B: formato (color.b)
});
}
// saídas:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
console.log (Descolors);
A partir do exemplo acima, podemos ver que todas as operações têm uma taxa de repetição relativamente alta. Como otimizá -lo? Felizmente, o ECMAScript 5 nos fornece um método de mapa, que podemos usar para otimizar o exemplo acima:
A cópia do código é a seguinte:
var srcColors = [
{r: 255, g: 255, b: 255}, // branco
{r: 128, g: 128, b: 128}, // cinza
{r: 0, g: 0, b: 0} // preto
],
Descolors = srccolors.map (função (val) {
var format = function (cor) {
return math.round (cor/2);
};
retornar {
R: formato (val.r),
G: formato (val.g),
B: formato (val.b)
}
});
// saídas:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
console.log (Descolors);
A partir do exemplo acima, podemos ver que usamos o mapa para substituir a parte do loop, para que precisemos apenas nos preocupar com a lógica de implementação de cada elemento. Para detalhes sobre o método do mapa, clique aqui.
1. Mapa Definição Básica:
Array.map (retorno de chamada [, thisArg]);
O método do mapa chama a função de retorno de chamada uma vez para cada elemento na matriz original. Retorno de chamada Os valores de retorno após cada execução são combinados para formar uma nova matriz. A função de retorno de chamada será chamada apenas em índices com valor; Os índices que nunca foram atribuídos valores ou excluídos com exclusão não serão chamados.
A função de retorno de chamada será passada automaticamente em três parâmetros: elemento da matriz, índice de elemento e a própria matriz original.
Se esse parâmetro thisArg tiver um valor, isso apontará para esse objeto neste parâmetro ThisArg sempre que a função de retorno de chamada for chamada. Se o parâmetro thisArg for omitido ou o valor for atribuído a nulo ou indefinido, isso aponta para o objeto global.
O mapa não modifica a própria matriz original que a chama (é claro, pode alterar a matriz original quando o retorno de chamada for executado).
Quando uma matriz executa um método de mapa, o comprimento da matriz é determinado antes que o primeiro método de retorno de chamada seja chamado. Durante toda a operação do método do mapa, não importa se as operações na função de retorno de chamada adicionam ou excluem elementos à matriz original. O método do mapa não saberá. Se o elemento da matriz aumentar, o elemento recém -adicionado não será percorrido pelo mapa. Se o elemento da matriz diminuir, o método do mapa também pensará que o comprimento da matriz original não mudou, resultando no acesso da matriz à saída. Se os elementos da matriz forem alterados ou excluídos, o valor que eles são transmitidos para o retorno de chamada é o valor do método do mapa percorrendo seu momento.
2. Instância do mapa:
A cópia do código é a seguinte:
// Exemplo 1: Método do mapa de chamada na string
var resultado = array.prototype.map.call ("Hello World", function (x, index, arr) {
// String {0: "H", 1: "E", 2: "L", 3: "L", 4: "O", 5: "", 6: "W", 7: "O", 8: "R", 9: "L", 10: "D", comprimento: 11}
console.log (arr);
retornar x.charcodeat (0);
});
// saídas: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log (resultado);
O exemplo acima demonstra o uso do método do mapa em uma string para obter uma matriz de códigos ASCII correspondentes a cada caractere em uma string. Por favor, preste atenção aos resultados da impressão do console.log (ARR) impresso.
A cópia do código é a seguinte:
// Exemplo 2: Qual é o resultado da seguinte operação?
var resultado = ["1", "2", "3"]. mapa (parseint);
// saídas: [1, nan, nan]
console.log (resultado);
Talvez você tenha uma pergunta, por que não [1,2,3]? Sabemos que o método parseint pode receber dois parâmetros. O primeiro parâmetro é o valor que precisa ser convertido e o segundo parâmetro é o número do binário. Se você não entende, pode clicar aqui. Quando usamos o método do mapa, a função de retorno de chamada recebe três parâmetros, enquanto o Parseint pode receber apenas dois parâmetros no máximo, para que o terceiro parâmetro seja descartado diretamente. Ao mesmo tempo, o Parseint usa o valor do índice passado como um número binário, retornando assim NAN. Veja os seguintes resultados de saída:
A cópia do código é a seguinte:
// OPUTS: 1
console.log (parseint ("1", 0));
// OPUTS: 1
console.log (parseint ("1", indefinido));
// OPUTS: NAN
console.log (parseint ("2", 1));
// OPUTS: NAN
console.log (parseint ("3", 2));
Os dois últimos são fáceis de entender, mas por que os dois primeiros retornam 1? Para explicar esse problema, vamos dar uma olhada na descrição oficial:
Se o Radix for indefinido ou 0 (ou ausente), o JavaScript assume o seguinte:
a) Se a sequência de entrada começar com "0x" ou "0x", o Radix será 16 (hexadecimal) e o restante da string será analisado.
b) Se a sequência de entrada começar com “0 ″, o Radix terá oito (octal) ou 10 (decimal). Exatamente qual o Radix é escolhido depende da implementação. Ecmascript 5 Especificações de que 10 (decimal) é usado, mas não todos os navegadores suportam isso ainda.
c) Se a sequência de entrada começar com qualquer outro valor, o Radix será 10 (decimal).
No terceiro ponto, quando a string é outro valor, o padrão é 10.
Então, como o modificamos para fazer o exemplo acima a saída normalmente? Veja o seguinte exemplo:
A cópia do código é a seguinte:
var resultado = ["1", "2", "3"]. mapa (função (val) {
Retornar Parseint (Val, 10);
});
// saídas: [1, 2, 3]
console.log (resultado);
3. Compatibilidade do método do mapa:
O método do mapa não é suportado no IE8 e abaixo dos navegadores. Se você deseja ser compatível com versões mais antigas de navegadores, você pode:
a) Não use map .b) Use algo como ES5-Shim para tornar map de suporte do IE mais antigo .C) use o método _.map no sublinhado ou no LODASH para uma função de utilidade equivalente.
O acima é o entendimento do método do mapa. Espero que seja útil para iniciantes. Se houver algum ponto inadequado no artigo, espero que você possa corrigi -lo!