Entender o JavaScript Reduzir Com 5 Exemplos

reduce() método de matrizes JavaScript executa um “redutor” função everyelement da matriz em ordem, passando o valor de retorno da anterior reducercall para o próximo redutor de chamada. A função reduce() é uma causa comum de confusão, mas também pode tornar o seu código muito mais legível quando combinado com outras abstrações de programação funcional.,Aqui estão 4 exemplos comuns e 1 Exemplo não-tão-comum que demonstram como usar reduce().

Soma de uma Matriz de Números

Mais reduce() tutoriais de começar com este exemplo: dada uma matriz de números , calcular a soma. Aqui está como você pode resumir um array com um simples id

loop.,

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

Aqui está um exemplo equivalente usando reduce():

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

reduce() função 2 primeiros são os parâmetros de uma função reducer() andan arbitrário initialValue. JavaScript então chama o reducer() em eachelement do array com o valor do acumulador como o primeiro parâmetro.O acumulador começa como initialValue, e então JavaScript usa o valor de retorno de cada reduce() call como o novo acumulador.,

falar é barato, Mostre-me o código. Então, aqui está um exemplo rápido de como você mightimplement simplificado reduce() função for loops.

somar uma matriz de propriedades numéricas

a reduce() função por si só é muitas vezes mais confusa do que útil.Se tudo o que você precisa fazer é somar um array de números, você pode ser betteroff usando um for loop., Mas, quando combinado com outros de matriz de métodos como ofilter() e map()reduce() começa a parecer mais atraente.

por exemplo, suponha que você tem um array de itens de linha, e você quer calcular a soma de cada item de linha total propriedade.

Aqui está uma maneira de adicionar os itens de linha total uso de reduce():

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

Isto funciona, mas é menos compostas. Uma melhor alternativa é a primeira map() para obter o total.,

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

Por que esta segunda abordagem é melhor? Porque você pode abstrair o obturador em uma função sum(), e reutilizá-lo onde você precisar para resumir uma matriz.

isto é importante porque, enquanto você pensa que sumReducer() nunca mudará, mudará. Por exemplo, o código acima não conta para o fato de que0.1 + 0.2 !== 0.3 em JavaScript. Este é um erro comum ao calcular os preços numa linguagem interpretada. Pontos binários flutuantes são estranhos.,Então você realmente precisa para completar:

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

reduce() torna fácil reutilizar a lógica como sumReducer() ao longo de toda a sua appusing função de encadeamento. Então você pode mudar sua lógica uma vez em vez de pesquisar através de cada id