A Guide To the Reduce Method In Javascript (Português)

by Josh Pitzalis

Javascript’s reduce method is one of the cornerstones of functional programming. Vamos explorar como ele funciona, quando você deve usá-lo, e algumas das coisas legais que ele pode fazer.

uma redução básica

Use-a quando: você tem uma lista de quantidades e você quer adicioná-las todas.,

const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

Como usá-lo:

• neste exemplo, Reduzir aceita dois parâmetros, o total e a quantidade atual.
• o método de redução ciclos através de cada número na matriz, muito como seria em um for-loop.
• Quando o ciclo inicia o valor total é o número à esquerda (29.76) e a quantidade atual é a próxima a ele (41.85).
• Neste exemplo em particular, queremos adicionar a quantidade atual ao total.,
• o cálculo é repetido para cada quantidade no array, mas cada vez que o valor atual muda para o próximo número no array, movendo-se para a direita.
• Quando não restam mais números na lista, o método devolve o valor total.

a versão ES5 do método de redução em JavaScript

Se você nunca usou a sintaxe ES6 antes, não deixe o exemplo acima intimidá-lo., É exatamente o mesmo que escrever:

var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11

Nós usamos const em vez de var e podemos substituir a palavra function com uma “gordura em forma de seta (=>) depois de parâmetros, e nós omitir a palavra ‘return’.

vou usar a sintaxe ES6 para o resto dos exemplos, uma vez que é mais concisa e deixa menos espaço para erros.

encontrando uma média com o método de redução em JavaScript

em vez de registar a soma, você poderia dividir a soma pelo comprimento da matriz antes de retornar um valor final.,

A maneira de fazer isso é aproveitando os outros argumentos no método de redução. O primeiro desses argumentos é o índice. Muito parecido com um for-loop, o índice refere-se ao número de vezes que o redutor tem looped sobre o array. O último argumento é o próprio array.

mapear e filtrar como reduções

Se você pode usar a função de redução para cuspir uma média, então você pode usá-la como quiser.,

Por exemplo, você pode dobrar o total, ou metade de cada número antes de adicioná-los juntos, ou usar uma declaração if dentro do redutor para apenas adicionar números que são maiores que 10. Meu ponto é que o método de redução em JavaScript lhe dá um mini CodePen onde você pode escrever qualquer lógica que você quiser. Ele vai repetir a lógica para cada quantidade no array e, em seguida, retornar um único valor.

a coisa é, você nem sempre tem que devolver um único valor. Você pode reduzir um array em um novo array.,

por exemplo, permite reduzir uma matriz de quantidades em outra matriz onde cada quantidade é dobrada. Para isso, precisamos definir o valor inicial de nosso acumulador para um array vazio.

o valor inicial é o valor do parâmetro total quando a redução começa. Você define o valor inicial adicionando uma vírgula seguida de seu valor inicial dentro dos parênteses, mas após os Chavetas (bolded no exemplo abaixo).

const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);

em exemplos anteriores, o valor inicial era zero, por isso omiti-o., Ao omitir o valor inicial, o total padrão para a primeira quantidade na matriz.

ao definir o valor inicial para uma matriz vazia, podemos então empurrar cada quantidade para o total. Se queremos reduzir uma matriz de valores em outra matriz onde cada valor é dobrado, precisamos empurrar a quantidade * 2. Em seguida, retornamos o total quando não há mais quantidades para empurrar.

const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // 

criamos um novo array onde cada quantidade é dobrada. Também podemos filtrar números que não queremos dobrar adicionando uma declaração if dentro do redutor.,

estas operações são o mapa e os métodos de filtragem reescritos como um método de redução.

para estes exemplos, faria mais sentido usar mapa ou filtro porque eles são mais simples de usar. O benefício de usar o reduce entra em jogo quando você quer mapear e filtrar juntos e você tem um monte de dados para passar.

Se você mapear em cadeia e filtrar em conjunto, você está fazendo o trabalho duas vezes. Filtra cada valor e mapeia os valores restantes. Com o reduce você pode filtrar e, em seguida, mapear em um único passo.,

Use o mapa e o filtro, mas quando começar a acorrentar muitos métodos em conjunto, agora sabe que é mais rápido reduzir os dados em vez disso.

criando uma concordância com o método de redução em JavaScript

Use-o quando: você tem uma coleção de itens e você quer saber quantos de cada item estão na coleção.

para contar itens em um array nosso valor inicial deve ser um objeto vazio, não um array vazio como estava no último exemplo.

Uma vez que vamos devolver um objeto, podemos agora armazenar pares de valores-chave no total.,

fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})

na nossa primeira passagem, queremos que o nome da primeira chave seja o nosso valor actual e queremos dar-lhe um valor de 1.

isto nos dá um objeto com todos os frutos como chaves, cada um com um valor de 1. Queremos que a quantidade de cada fruta aumente se se repetir.para fazer isso, em nosso segundo loop nós verificamos se nosso total contém uma chave com o fruto atual do redutor. Se não o fizer, criamo-lo. Se o fizer, aumentamos a quantidade por um.

fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});

i reescreveu a mesma lógica de uma forma mais concisa até o topo.,

achatar uma matriz de arrays com o método de redução em JavaScript

podemos usar reduzir a achatar quantidades aninhadas em uma única matriz.

definimos o valor inicial para uma matriz vazia e depois concatenamos o valor actual para o total.

const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // 

mais frequentemente do que não, a informação está aninhada de formas mais complicadas. Por exemplo, digamos que só queremos todas as cores na variável de dados abaixo.

const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];

vamos atravessar cada objecto e retirar as cores. Fazemos isto apontando a quantia.c para cada objeto na matriz., Nós então usamos um laço forEach para empurrar todos os valores na matriz aninhada para fora total.

Se só precisamos de um número único, então podemos verificar para ver o número já existe no total antes de empurrá-lo.

Piping com redução

um aspecto interessante do método de redução em JavaScript é que você pode reduzir sobre funções, bem como números e cadeias de caracteres.digamos que temos uma coleção de funções matemáticas simples. estas funções permitem-nos aumentar, diminuir, dobrar e reduzir para metade uma quantidade.,

por qualquer razão, precisamos aumentar, em seguida, dobrar, em seguida, decretar uma quantidade.

pode escrever uma função que recebe uma entrada e devolve (entrada + 1) * 2-1. O problema é que sabemos que vamos precisar aumentar a quantidade três vezes, então dobrá-la, então decretá-la, e então reduzi-la para metade em algum ponto no futuro. Nós não queremos ter que reescrever nossa função toda vez que nós vamos usar o reduce para criar um pipeline.

pipeline é um termo usado para uma lista de funções que transformam algum valor inicial em um valor final., O nosso oleoduto consistirá nas nossas três funções na ordem em que queremos usá-las.

let pipeline = ;

em vez de reduzir uma série de valores que reduzimos sobre o nosso gasoduto de funções. Isto funciona porque definimos o valor inicial como a quantidade que queremos transformar.

const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3

porque o gasoduto é um array, ele pode ser facilmente modificado. Se queremos decretar algo três vezes, então dobre-o , Decrete-o, e reduza-o para metade, então nós apenas alteramos o oleoduto.

var pipeline = ;

a função de redução permanece exatamente a mesma.,

erros tolos para evitar

Se você não passar em um valor inicial, reduzir irá assumir que o primeiro item em sua matriz é o seu valor inicial. Isto funcionou bem nos primeiros exemplos porque estávamos adicionando uma lista de números.se você está tentando somar frutas, e você deixa de fora o valor inicial, então as coisas ficam estranhas. Não introduzir um valor inicial é um erro fácil de fazer e uma das primeiras coisas que você deve verificar quando depurar.outro erro comum é esquecer-se de devolver o total. Você deve devolver algo para a função de redução de trabalho., Verifica sempre e certifica-te que estás a devolver o valor que queres.

Ferramentas, Dicas & referências

• udo neste post veio de uma fantástica série de vídeo sobre egghead chamado introdução redução. Eu dou Mykola Bilokonsky crédito total e eu sou grato a ele por tudo o que eu agora sei sobre o uso do método de redução em JavaScript. Eu tentei reescrever muito do que ele explica em minhas próprias palavras como um exercício para entender melhor cada conceito., Além disso, é mais fácil para mim referenciar um artigo, em vez de um vídeo, quando eu preciso lembrar como fazer algo.
• a MDN reduz os rótulos de documentação a que chamei um total de accumulator. É importante saber isso porque a maioria das pessoas vai se referir a ele como um acumulador se você ler sobre ele on-line. Algumas pessoas chamam-lhe prev como no valor anterior. Tudo se refere à mesma coisa. Achei mais fácil pensar num total quando estava a aprender a reduzir.,
• Se você gostaria de praticar usando o reduce eu recomendo a inscrição para o freeCodeCamp e completar o máximo de algoritmos intermediários que você pode usar reduce.
• Se as variáveis ‘const’ nos excertos de exemplo são novas para si, escrevi outro artigo sobre as variáveis ES6 e porque poderá querer usá-las.
• também escrevi um artigo chamado “Trouble With Loops” que explica como usar map() e filter() se os são novos para você.obrigado pela leitura! Se você gostaria de ser notificado quando eu escrever um novo artigo, por favor, digite seu e-mail aqui.,

  E se gostou do artigo, por favor partilhe-o nas redes sociais para que outros possam encontrá-lo.