Rachaduras reduzem o conceito em apenas 10 minutos

Como desenvolvedor, adoro codificar especialmente em JavaScript. De acordo com minha experiência, o uso da função de redução é uma das tarefas mais difíceis em JS. Deixe-me elaborar primeiro o conceito Reduzir!

Na Wikipedia, tem muitos nomes viz.

Reduzir
Fold
Acumular
Agregar
Comprimir

É uma função que dobra uma lista em qualquer tipo de dados. É tudo uma questão de dividir uma estrutura em um único valor. É como dobrar uma caixa! Com reduzir, você pode transformar uma matriz [1,2,3,4,5] no número 15 adicionando todas elas.

Como foi feito no passado?

Suponha que você possa precisar de um loop para dobrar uma lista em um número, faça o seguinte:

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); 

No entanto, usando a função de redução, você só precisa de um loop para lidar com a função "adicionar função". O código será como:

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

Veja, foi assim que facilitou a codificação!

Por enquanto, preste atenção ao JavaScript, que não pode usar métodos de loops, recursão ou array, como forEach, some, find, etc. Portanto, apenas três são mapeados, filtrados e reduzidos. No entanto, nosso trabalho como programadores não mudou. Ainda precisamos de três tipos de funcionalidade em nossos aplicativos.

-> Listas de filtragem
-> Transformando listas
-> Convertendo listas em tipos de dados viz. string, booleano, número, objeto

O desafio acima pode ser facilmente manipulado com ferramentas filtrar, mapear e reduzir.

Listas de juízes Array.filter

O que acontece se você quiser uma nova lista com alguns itens removidos, como quando o usuário pesquisar sua lista de contatos? Portanto, basta criar uma função que retorne verdadeiro ou falso com base em sua entrada (um predicado).

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

Agora, conecte-o a um filtro para aplicá-lo a uma lista inteira.

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

Array.map transforma listas

A conversão de listas para outras listas é um desenvolvimento Front-End em poucas palavras. Portanto, o mapa cobre grande parte do trabalho da sua lista.

Digamos que nosso aplicativo chama uma API para a lista de usuários e precisamos mostrar o nome de cada usuário na tela. Simplesmente crie uma função que retorne o nome de um usuário.

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

Agora, conecte-o ao mapa para executá-lo em uma lista inteira de usuários.

 users.map(getUserName) 

Array.reduce pode fazer isso por você

Array.reduce usa dois parâmetros

1) Um valor inicial (que é opcional)

Se você não fornecer o valor inicial, reduza os padrões da função para o primeiro elemento da lista.

Para somar números simples, você escreverá:

 [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) O redutor

Ao reduzir loops na lista, ele alimenta abaixo de dois parâmetros para o redutor:

-> Valor atual: o valor atual é auto-explicativo, assim como quando você usa a matriz [i] em um loop regular. No entanto, o acumulador é um termo de computador que parece assustador e é realmente simples.

-> Acumulador: quando você está navegando em usuários, como acompanha a idade total deles? Você precisa de alguma variável de contador para mantê-lo. Esse é o acumulador. É o valor final que será reduzido quando terminar.

Em cada etapa do ciclo, alimenta o último acumulador e o elemento atual ao seu redutor. O que o redutor retorna se torna o próximo acumulador. O ciclo termina quando a lista termina e possui um único valor reduzido.

Se você acha que as funções de mapa e filtro não são suficientes, você pode executar o jogo com reduzir. Ele pode fazer tudo o que o mapa e o filtro estão fazendo e todas as outras coisas que envolvem loop sobre uma matriz.

Vamos dar a ajuda de um exemplo para calcular a idade dos usuários. Considere as idades dos usuários 29,30, 31 e 32.

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

Por outro lado, mapa e filtro só podem retornar matrizes, mas precisamos de um número!

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

Se tivéssemos loops, passávamos por usuários e contabilizávamos suas idades em um balcão! No entanto, pode ser mais fácil reduzir a função.

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

Agora, o uso do console.log em cada etapa pode ser a maneira mais fácil de lidar acima.

 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); 

Resumindo o código inteiro em 6 etapas aqui:

-> Primeiro, defina a função de redução e seus 3 parâmetros.
-> Ao fornecer o valor inicial, inicialize o acumulador. Isso mudará a cada loop.
-> Agora, comece a percorrer o array fornecido.
-> Capture o currentItem da matriz para esse ciclo.
-> É hora de chamar o redutor com acumulador e currentItem e salvá-lo como um novo acumulador
-> Por fim, o acumulador é alterado quando o loop é concluído e o retorna.