En nuestro desarrollo diario, operar y convertir matrices es una operación muy común. Echemos un vistazo a un ejemplo:
La copia del código es la siguiente:
var descolors = [],
srccolors = [
{R: 255, G: 255, B: 255}, // blanco
{r: 128, g: 128, b: 128}, // gris
{r: 0, g: 0, b: 0} // negro
];
para (var i = 0, ilen = srccolors.length; i <ilen; i ++) {
var color = srccolors [i],
format = function (color) {
return math.round (color / 2);
};
Descolors.push ({
r: formato (color.r),
g: formato (color.g),
B: formato (color.b)
});
}
// salidas:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
console.log (Descolors);
Del ejemplo anterior, podemos ver que todas las operaciones tienen una tasa de repetición relativamente alta. ¿Cómo optimizarlo? Afortunadamente, Ecmascript 5 nos proporciona un método de mapa, que podemos usar para optimizar el ejemplo anterior:
La copia del código es la siguiente:
var srccolors = [
{R: 255, G: 255, B: 255}, // blanco
{r: 128, g: 128, b: 128}, // gris
{r: 0, g: 0, b: 0} // negro
]
descolors = srccolors.map (function (val) {
VAR format = function (color) {
return math.round (color/2);
};
devolver {
r: formato (val.r),
g: formato (val.g),
B: formato (val.b)
}
});
// salidas:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
console.log (Descolors);
Del ejemplo anterior, podemos ver que usamos MAP para reemplazar la parte forx para bucle, de modo que solo necesitamos preocuparnos por la lógica de implementación de cada elemento en sí. Para obtener detalles sobre el método del mapa, haga clic aquí.
1. Mapa de definición básica:
array.map (devolución de llamada [, thantarg]);
El método del mapa llama a la función de devolución de llamada una vez en orden para cada elemento en la matriz original. devolución de llamada Los valores de retorno después de cada ejecución se combinan para formar una nueva matriz. La función de devolución de llamada solo se convocará en índices con valor; No se llamarán a los índices a los que nunca se les han asignado valores o eliminados con Delete.
La función de devolución de llamada se pasará automáticamente en tres parámetros: elemento de matriz, índice de elementos y la matriz original en sí.
Si este parámetro de thantarg tiene un valor, esto apuntará a este objeto en el parámetro Thingg cada vez que se llama a la función de devolución de llamada. Si se omite el parámetro thantarg, o el valor se asigna a nulo o indefinido, esto apunta al objeto global.
MAP no modifica la matriz original que la llama (por supuesto, puede cambiar la matriz original cuando se ejecuta la devolución de llamada).
Cuando una matriz ejecuta un método de mapa, la longitud de la matriz se determina antes de llamar al primer método de devolución de llamada. Durante todo el funcionamiento del método del mapa, sin importar si las operaciones en la función de devolución de llamada agregan o eliminan elementos a la matriz original. El método del mapa no lo sabrá. Si el elemento de matriz aumenta, el mapa no atravesará el elemento recién agregado. Si el elemento de matriz disminuye, el método del mapa también pensará que la longitud de la matriz original no ha cambiado, lo que resulta en el acceso a la matriz a la salida. Si los elementos en la matriz se cambian o eliminan, el valor que pasan a la devolución de llamada es el valor del método de mapa que atraviesa su momento.
2. instancia de map:
La copia del código es la siguiente:
// Ejemplo 1: Método del mapa de llamadas en la cadena
VAR result = 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", Longitud: 11}
console.log (arr);
return x.charcodeat (0);
});
// salidas: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log (resultado);
El ejemplo anterior demuestra el uso del método MAP en una cadena para obtener una matriz de códigos ASCII correspondientes a cada carácter en una cadena. Preste atención a los resultados de impresión de console.log (arr) impreso.
La copia del código es la siguiente:
// Ejemplo 2: ¿Cuál es el resultado de la siguiente operación?
VAR result = ["1", "2", "3"]. MAP (parseInt);
// salidas: [1, nan, nan]
console.log (resultado);
Tal vez tengas una pregunta, ¿por qué no [1,2,3]? Sabemos que el método de Parseint puede recibir dos parámetros. El primer parámetro es el valor que debe convertirse, y el segundo parámetro es el número del binario. Si no entiende, puede hacer clic aquí. Cuando usamos el método MAP, la función de devolución de llamada recibe tres parámetros, mientras que PARSEINT solo puede recibir dos parámetros como máximo, de modo que el tercer parámetro se descarte directamente. Al mismo tiempo, ParseInt usa el valor del índice aprobado como un número binario, devolviendo así NAN. Mire los siguientes resultados de salida:
La copia del código es la siguiente:
// OUPUTS: 1
console.log (parseInt ("1", 0));
// OUPUTS: 1
console.log (parseint ("1", indefinido));
// Outs: Nan
console.log (parseint ("2", 1));
// Outs: Nan
console.log (parseint ("3", 2));
Los dos últimos son fáciles de entender, pero ¿por qué los dos primeros regresan 1? Para explicar este problema, echemos un vistazo a la descripción oficial:
Si Radix está indefinido o 0 (o ausente), JavaScript asume lo siguiente:
a) Si la cadena de entrada comienza con "0x" o "0x", Radix es 16 (hexadecimal) y se analiza el resto de la cadena.
b) Si la cadena de entrada comienza con "0", Radix es ocho (octal) o 10 (decimal). Exactamente qué radix se elige depende de la implementación. ECMAScript 5 Especificaciones que se usan 10 (decimal), pero no todos los navegadores lo admiten todavía. Por esta razón, siempre especifica una radix cuando se usa ParSeint.
c) Si la cadena de entrada comienza con cualquier otro valor, la radix es 10 (decimal).
En el tercer punto, cuando la cadena es otro valor, el valor predeterminado es 10.
Entonces, ¿cómo lo modificamos para hacer la salida de ejemplo anterior normalmente? Vea el siguiente ejemplo:
La copia del código es la siguiente:
resultado var = ["1", "2", "3"]. MAP (function (val) {
return Parseint (Val, 10);
});
// salidas: [1, 2, 3]
console.log (resultado);
3. Compatibilidad del método del mapa:
El método del mapa no es compatible con IE8 y debajo de los navegadores. Si desea ser compatible con versiones más antiguas de navegadores, puede:
a) No use map .B) Use algo como ES5-Shim para hacer map de soporte de IE más antiguo .C) Use el método _.map en bajo costo o lodash para una función de utilidad equivalente.
Lo anterior es la comprensión del método del mapa. Espero que sea útil para principiantes. Si hay puntos inapropiados en el artículo, ¡espero que pueda corregirlo!