El concepto de reducción de grietas en solo 10 minutos

Siendo desarrollador, me encanta codificar especialmente en JavaScript. Según mi experiencia, el uso de la función reducir es una de las tareas más difíciles en JS. ¡Permítanme primero desarrollar el concepto Reducir!

En Wikipedia, tiene muchos nombres, a saber.

Reducir
Doblar
Acumular
Agregado
Comprimir

Es una función que pliega una lista en cualquier tipo de datos. Se trata de dividir una estructura en un solo valor. ¡Es como doblar una caja! Con reduce, puede convertir una matriz [1,2,3,4,5] en el número 15 al sumarlos todos.

¿Cómo se hizo en el pasado?

Supongamos que necesita un bucle para plegar una lista en un número, puede hacer esto:

const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; let total = 0; for (let i = 0; i < numbers.length; i++) { total = add(total, numbers[i]); } console.log(total); 

Sin embargo, con la función reducir, solo necesita un bucle para manejar junto con la función "agregar". El código será como:

 const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; numbers.reduce(add); 

¡Mira, así es como ha facilitado la codificación!

Por ahora, preste atención a JavaScript que no puede usar bucles, recursividad o métodos de matriz como forEach, some, find, etc. Entonces, solo quedan tres para asignar, filtrar y reducir. Sin embargo, nuestro trabajo como programadores no ha cambiado. Todavía necesitamos tres tipos de funcionalidad en nuestras aplicaciones.

-> Listas de filtrado
-> Transformando listas
-> Convertir listas en tipos de datos a saber. cadena, booleano, número, objeto

El desafío anterior se puede manejar fácilmente con herramientas de filtro, mapeo y reducción.

Array.filter juzga listas

¿Qué sucede si desea una nueva lista con algunos elementos eliminados, como cuando el usuario busca en su lista de contactos? Por lo tanto, simplemente cree una función que devuelva verdadero o falso en función de su entrada (un predicado).

 const isEven = (x) => x % 2 === 0; 

Ahora, conéctelo a un filtro para aplicarlo en una lista completa.

 const numbers = [1, 2, 3, 4, 5]; numbers.filter(isEven); 

Array.map transforma listas

Convertir listas a otras listas es el desarrollo de Front-End en pocas palabras. Por lo tanto, el mapa cubre gran parte de su trabajo de lista.

Digamos que nuestra aplicación llama a una API para la lista de usuarios, y necesitamos mostrar el nombre de cada usuario en la pantalla. Simplemente cree una función que devuelva el nombre de un usuario.

 const getUserName = (user) => user.name; 

Ahora, conéctelo al mapa para ejecutarlo en una lista completa de usuarios.

 users.map(getUserName) 

Array.reduce puede hacerlo por ti

Array.reduce usa dos parámetros

1) Un valor inicial (que es opcional)

Si no proporciona el valor inicial, reduzca los valores predeterminados de la función al primer elemento de la lista.

Para sumar números simples, escribirás:

 [1, 2, 3].reduce((total, current) => total + current);/source> In case, you give an initial value of zero, you will use this code: <source lang="markdown"> [{ age: 1 }, { age: 2 }, { age: 3 }] .reduce((total, obj) => total + obj.age, 0); 

2) El reductor

Cuando reduce los bucles sobre la lista, alimenta por debajo de dos parámetros al reductor:

-> Valor actual: el valor actual se explica por sí mismo, al igual que cuando utiliza la matriz [i] en un bucle regular. Sin embargo, el acumulador es un término informático que suena aterrador y en realidad es simple.

-> Acumulador: cuando estás buscando usuarios, ¿cómo haces un seguimiento de su edad total? Necesita alguna variable de contador para mantenerla. Ese es el acumulador. Es el valor final que se reducirá cuando termine.

En cada paso del ciclo, alimenta el último acumulador y el elemento actual a su reductor. Lo que devuelve el reductor se convierte en el próximo acumulador. El ciclo finaliza cuando finaliza la lista y tiene un único valor reducido.

Si crees que las funciones de mapa y filtro no son suficientes, puedes ejecutar el juego con reducción. Puede hacer todo lo que está haciendo el mapa y el filtro y todas las demás cosas que involucran bucle sobre una matriz.

Tomemos la ayuda de un ejemplo para calcular la edad de los usuarios. Considere las edades de los usuarios como 29.30, 31 y 32.

 const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ]; 

Por otro lado, el mapa y el filtro solo pueden devolver matrices, ¡pero necesitamos un número!

 users.map(?); users.filter(?); 

¡Si tuviéramos bucles, pasaríamos por los usuarios y contabilizaríamos sus edades en un mostrador! Sin embargo, puede ser más fácil reducir la función.

 users.reduce((total, currentUser) => total + currentUser.age, 0); 

Ahora, usar console.log en cada paso puede ser la forma más fácil de manejar arriba.

 const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ]; const reducer = (total, currentUser) => { console.log('current total:', total); console.log('currentUser:', currentUser); // just for spacing console.log('\n'); return total + currentUser.age; } users.reduce(reducer, 0); 

Resumiendo el código completo en 6 pasos aquí:

-> Primero, defina la función reducir y sus 3 parámetros.
-> Al proporcionar el valor inicial, inicialice el acumulador. Cambiará cada bucle.
-> Ahora, comienza a recorrer la matriz dada.
-> Capture el elemento actual de la matriz para ese ciclo.
-> Es hora de llamar al reductor con acumulador y elemento actual y guardarlo como un nuevo acumulador
-> Por último, el acumulador termina de cambiar cuando finaliza el ciclo y lo devuelve.