entender JavaScript Reduce con 5 ejemplos

el método reduce() en arrays JavaScript ejecuta una función» reducer » en cada elemento de la matriz en orden, pasando el valor devuelto de la llamada reducercall anterior a la siguiente llamada reducer. La función reduce() es una causa común de confusión, pero también puede hacer que su código sea mucho más legible cuando se combina con otras abstracciones de programación funcional.,Aquí hay 4 ejemplos comunes y 1 Ejemplo no tan común que demuestran cómo usar reduce().

sumando una matriz de números

Most reduce() los tutoriales comienzan con este ejemplo: dado una matriz de números , calcule la suma. Así es como puede resumir una matriz con un bucle for.,

function sum(arr) { let sum = 0; for (const val of arr) { sum += val; } return sum;}sum(); // 16

Aquí el equivalente en un ejemplo de uso de reduce():

function sum(arr) { const reducer = (sum, val) => sum + val; const initialValue = 0; return arr.reduce(reducer, initialValue);}sum(); // 16

El reduce() función de los 2 primeros parámetros son función reducer() andan arbitraria initialValue. JavaScript luego llama a reducer() en cada elemento de la matriz con el valor del acumulador como primer parámetro.El acumulador comienza como initialValue, y luego JavaScript utiliza el valor de retorno de cada llamada reduce() como el nuevo acumulador.,

hablar es barato, Muéstrame el código. Así que aquí hay un ejemplo rápido de cómo puede implementar una función simplificada reduce() usando bucles for.

sumando una matriz de propiedades numéricas

la función reduce() por sí misma es a menudo más confusa que útil.Si todo lo que necesita hacer es sumar una matriz de números, podría ser mejor usando un bucle for., Pero, cuando se combina con otros métodos de matriz comofilter()y map(),reduce() comienza a parecer más atractivo.

por ejemplo, supongamos que tiene una matriz de elementos de línea y desea calcular la suma de la propiedad total de cada elemento de línea.

Aquí es una manera de sumar los elementos de línea total con reduce():

lineItems.reduce((sum, li) => sum + li.total, 0); // 17.5

Esto funciona, pero es menos que se puede componer. Una mejor alternativa es primeromap() para obtener el total.,

lineItems.map(li => li.total).reduce((sum, val) => sum + val, 0);

¿Por qué es mejor este segundo enfoque? Porque puede abstraer el producto en una función sum(), y reutilizarlo donde sea que necesite sumar una matriz.

esto es importante porque, si bien cree que sumReducer() nunca cambiará, lo hará. Por ejemplo, el código anterior no explica el hecho de que0.1 + 0.2 !== 0.3 en JavaScript. Este es un error común al calcular precios en un lenguaje interpretado. Los puntos flotantes binarios son raros.,Por lo tanto, en realidad necesita redondear:

const { round } = require('lodash');function sumReducer(sum, val) { // Round to 2 decimal places. return _.round(sum + val, 2);}

reduce() hace que sea fácil reutilizar lógica como sumReducer() a lo largo del encadenamiento de funciones de appusing. Por lo tanto, puede cambiar su lógica una vez en lugar de buscar a través de cada bucle for en su aplicación.

encuentre el valor máximo

por ejemplo, supongamos que tiene una matriz de fechas de JavaScript y desea encontrar la fecha más reciente.

const dates = .map(v => new Date(v));

Un enfoque es ordenar el array y tomar el último elemento en el sortedarray., Eso funciona, pero no es tan eficiente como podría ser, y ordenar una matriz de fechas en JavaScript no es trivial.

en su lugar, puede usar reduce() y hacer que su reductor devuelva la fecha más reciente encontrada hasta ahora.

agrupar valores

dado un array de objetos con una propiedad age:

const characters = ;

¿Cómo devuelve un mapa que contiene cuántos caracteres tienen unage? Por ejemplo, la salida correcta en la matriz anterior sería{ 29: 2, 59: 1 }.,

así es como puedes hacer eso con reduce().

Bonus: encadenamiento de promesas

supongamos que tiene una matriz de funciones asíncronas que desea ejecutar en serie.Hay una función no estándar promise.series para esto, pero también puede hacer esto con reduce().

pasando a

la función reduce() es una herramienta poderosa. Al abstraer filtros y reductores, puede consolidar tareas comunes como «sumar una matriz de números» en una función separada para facilitar la refactorización y el código DRY-er.