Reducir qué hacer?
1) sumador
2) Calcular precio
3) datos consolidados
4) redux componer el método
¿Cuáles son los principales contenidos de este artículo?
1) describe la acción principal reducir el
2) reducir la escritura implementar el método
0) Aprender reducir
Antes de entender de los beneficios de reducir, reducir lo que conocemos primero que? es un método para reducir la matriz, función toma cuatro parámetros, el resultado de una función, el resultado del índice actual, la matriz actualmente ejecutado; en la cola pueden añadirse a un valor inicial. Cada parámetro tiene un montón de uso, el uso del bien, puede ser convertido en una variedad de cambios.
dejar que r = [1,2,3] .reduce ( ( ' en un valor de retorno', 'valor actual', 'índice actual', 'ejecución de la matriz') => {
}, 'primero inicial valor ')
1) sumador
Esta función se lleva a cabo dos veces, la primera vez a = 1, b = 2,. en un momento dado a + b es el resultado. En segundo lugar a = 3, b = 3. Operación terminó, de vuelta en el resultado global.
// 求和 dejar que r = [1, 2, 3] .reduce ((a, b) => { volver a + b; }) console.log (r) // r = 6
2) Calcular precio
Este es el trasfondo de pase de recorrido sobre el precio y la cantidad, y en ocasiones la estructura es más compleja. Aquí echamos un vistazo a la primera, esto es incorrecto. Los primeros 100 * 100 * 2 + 2. Los resultados de un hecho que la primera actuación, a.price y a.number no pueden encontrar, no están definidos. Así que tenemos un valor inicial, todos los resultados acumulados en el valor inicial. Aquí nos fijamos en la segunda
Función, añadir el valor inicial a un 0, es decir, reducir el Baga un 0, b de modo que cada resultado en la acumulación de a. A continuación, el precio se puede calcular.
// 算价格 dejar que k = [{precio: 100, cantidad: 2}, {precio: 100, cantidad: 2}, {precio: 100, cantidad: 2}, {precio: 100, cantidad: 2}]. Reducir ((a, b) => { retorno a.price * a.number + b.price * b.number; }) console.log (k) // k = NaN
// 算价格 dejar que k = [{precio: 100, cantidad: 2}, {precio: 100, cantidad: 2}, {precio: 100, cantidad: 2}, {precio: 100, cantidad: 2}]. Reducir ((a, b) => { volver a + b.price * b.number; }, 0 ) console.log (k) // k = 800
3) datos consolidados
Aquí está una clave y el valor de una matriz de objetos y traversal clave para un valor inicial {}, {} asignado al valor inicial. Lo mismo hicieron los datos combinados
// combinar varios datos Let Claves = [ 'nombre', 'edad' ]; el valor Let = [ 'WangShaoQun', '20 es ]; el dejar que obj = keys.reduce ((A, B, índice, un curent) = > { A [B] = valor [índice]; retorno A; }, {}); la console.log (obj); // obj = {name: 'WangShaoQun', edad: '20 '}
4) redux componer el método
En primer lugar, la creación de los tres primeros métodos, los dos primeros se encargará de unir una cadena, convertida a mayúsculas segunda, tercera parte delantera y trasera, más ***
función suma (a, b) { volver a + b; } Función toUpper (str) { volver str.toUpperCase (); } Función add (str) { retorno `*** $ {str} *** ` }
Tres método de ejecución normal es tal que una capa con un conjunto de capas, ahora tenemos dos formas de lograr la optimización, uno es reduceRight, de derecha a izquierda para llevar a cabo. Una de ellas es reducir, de izquierda a derecha.
suma (toUpper (add ( '111', 'asd')))
Echemos un vistazo al método reduceRight, vamos a echar un vistazo al código de composición realizada (ADD, toUpper, suma) ( 'wangshao', '666') aquí es llevar a cabo ambas funciones, se ajusta una función con una función. FNS array función de capa de recepción, la capa interna para aceptar los argumentos de wangsaho ', '666'. Tome una matriz función de pop asignado a un último método lastFn, lastFn como un valor inicial de reducRight
Entonces comenzó a recorrer de derecha a izquierda. En este momento, a es el valor inicial, que es la última función add. b es el segundo, la función toUpper. Por lo tanto, el valor de retorno es b (a). Es el siguiente valor de un toUpper (add ()), b es la suma (). Esta realización es completa.
la función de redacción (... FNS) { retorno de la función (... args) { dejar que lastFn = fns.pop (); retorno fns.reduceRight ((a, b) => { retorno b (a) }, lastFn (... args)) } };
sea r = Componer (complemento, toUpper, suma) ( 'wangshao', '666');
A continuación, vamos a utilizar la función de optimización de la función anterior en una flecha, la flecha y la función puede devolver remove {}. Se reduce al código siguiente. El efecto es el mismo.
dejar = Componer (... FNS) => (... args) => {dejar que lastFn = fns.pop (); retorno fns.reduceRight ((a, b) => b (a), lastFn (... args))};
Por último, el método redcue, que creemos que a la luz nos fijamos, es la primera función anidada segunda función. Los resultados de nuevo anidados tercera función. En primer lugar, los FNS matriz función más externa es aceptable, el resultado devuelto traverse la matriz, donde a, b son los mismos que anteriormente. Volvemos a una función que es la función interna, los parámetros tienen argumentos. Es el valor de un segundo toUpper (add (..) args).
la función de redacción (... FNS) { retorno fns.reduce ((a, b) => { retorno (... args) => { volver a (b (... args)) } }) }
La función anterior con la mirada optimización de la función de flecha, esto es más una breve
dejar = Componer (... FNS) => fns.reduce ((a, b) => (... args) => a (b (... args)));
Vimos quizás algún método, hace la primera un año redux del método de composición, el segundo método es ahora redux de componer
Luego continuamos reduciendo método de escritura a mano, añadir un método para reducir aquí en una matriz prototipo. Acepta dos parámetros, uno es la devolución de llamada, uno es el valor inicial de prev. Entonces empezará a atravesar el número es la longitud de la matriz, que aquí en el prototipo podemos usar este punto para su variedad de llamadas. En primer lugar, hacer un juicio acerca de si el valor inicial es nulo, la devolución de llamada es un parámetro para la primera, b es un segundo bit, índice = i + 1, en comparación con el cuarto misma matriz de parámetros. El valor devuelto se asigna prev, y dejar que i ++; realizar una segunda función, una segunda ir por debajo, de devolución de llamada es el último de una parte posterior resultados Ant, b es ahora un elemento, índice es i, el cuarto parámetro matriz en sí es sin cambios. La parte posterior resultado global para Prev. Podemos ver, aquí me gustaría utilizar forEach lograr. Pero parece que no va a cambiar el número de travesía y el índice. Por lo que el más original o usarlo para reciclar.
Array.prototype.reduce = función (devolución de llamada, prev) { para (deje i = 0; i < este .length; i ++ ) { si (prev == indefinido) { prev = devolución de llamada ( esta [i], esta [i + 1], i + 1, este ); i ++ ; } Más { prev = devolución de llamada (prev, esta [i], i, este ); } } // this.forEach ((e, i) => { // si (== prev indefinido) { // console.log (e, e + 1) // prev = devolución de llamada (E, E + 1, i + 1, este); // } else { // prev = devolución de llamada (prev, e + 1, i + 1, este); // } // }) de retorno anterior; }; dejar que r = [1, 2, 3] .reduce ((a, b, índice, actual) => { volver a + b })