Como usar o JavaScript Array Reduza a função
Neste post, entenderemos o conceito de JavaScript reduzir() função. O que é uma reduzir() função, e como podemos usá -lo para ajudar a simplificar o código JavaScript e concluir as tarefas com eficiência e mais rapidamente.
Qual é a redução() função?
JavaScript reduzir() A função para a matriz é usada para reduzir a matriz em um único valor de saída.
O reduzir() A função leva o elemento de uma matriz um a um, executa uma operação e retorna um único valor de saída. Vamos explorar e cavar mais para entender a sintaxe e sua funcionalidade, juntamente com alguns exemplos.
Sintaxe:
variedade.redução (function_name, InitialValue);A parte interessante da função Reduce () da matriz é que ela pode assumir uma função de retorno de chamada com quatro argumentos. A sintaxe da função de retorno de chamada e a sequência dos argumentos serão assim:
function function_name (acumulador, valor, índice, array)..
Na função de volta de chamada de redução () método:
- O primeiro parâmetro é um acumulador que armazena o resultado após cada iteração.
- O segundo parâmetro/argumento contém o valor do elemento atual da matriz durante a iteração.
- O terceiro parâmetro é o parâmetro opcional que é a corrente índice do elemento da matriz durante a iteração.
- Por fim, também podemos passar o variedade para si mesmo para a função de retorno de chamada por ter algumas funcionalidades personalizadas dentro da função de retorno de chamada.
Também podemos passar o valor inicial para a função. O valor inicial será o valor inicial do acumulador.
Vamos tentar alguns exemplos para ver suas implementações
Observação: Usaremos o console do navegador para demonstrar exemplos realizados neste post. Para abrir o console do navegador:
- Use o F12 Chave no Chrome e outros navegadores à base de cromo.
- Usar Ctrl + Shift + K teclas de atalho do teclado para mozilla.
- Usar Opção + ⌘ + c Teclas de atalho do teclado no Safari (se o menu do desenvolvedor não aparecer, abra as preferências pressionando ⌘ +, e em Avançado Verificação da guia “Mostrar desenvolver menu na barra de menus”).
Como usar Reduce () Função em JavaScript
O melhor exemplo para entender o reduzir() Função é a adição de números armazenados nos elementos da matriz.
Exemplo 1:
Suponha que tenhamos uma variedade de números e queremos adicionar todos esses números:
Var Numbers = [23,76,38,55,10]A primeira maneira de adicionar esses números é usar um para laço:
var sum = 0;para (leti = 0; i
console.log (soma);
Embora tenhamos a soma como saída, por que não usar uma maneira inteligente e fácil de executar o mesmo cálculo usando o reduzir() Método da matriz, onde não precisamos mutações as variáveis como “soma.”
Usando da função reduz ():
O reduzir() função para calcular a soma será assim:
var sum = números.reduzir (addnumbers, 0);função addNumbers (total, num)
retornar total + num
console.log (soma);
No código acima, você pode ver que passamos pela primeira vez no addnumbers função para o reduzir() função, e no addnumbers Definição da função, acabamos de adicionar cada número à variável acumuladora total e retornou seu valor.
Uma vez o reduzir() função adiciona todos os números no números Array, ele armazenará o resultado final no soma variável.
Por fim, acabamos de consolar o soma variável para verificar se nosso reduzir() função funcionou bem ou não.
Ao procurar na captura de tela fornecida acima, você pode verificar se a função reduz () adicionou todos os números e mostrou o resultado no console, o que é 202 e perfeitamente calculado.
Outra maneira mais curta e mais fácil de escrever reduzir() Função é fazer da função de retorno de chamada uma função de seta:
A sintaxe de escrever a função de retorno de chamada dentro do reduzir() Os parênteses da função serão assim:
var sum = números.Reduce ((total, num) =>retornar total + num
, 0);
console.log (soma);
Tudo bem, este foi o exemplo simples em que temos apenas uma variedade de números; E a variedade de objetos. Vamos tentar esse também.
Exemplo 2:
Suponha que tenhamos uma lista de alunos em uma matriz e queremos calcular o total de taxas de todos os alunos:
Var alunos = [ID: 1,
Nome: "John,"
Idade: 12,
Taxa: 8500
,
ID: 2,
Nome: "Bob",
Idade: 14,
Taxa: 9000
,
ID: 3,
Nome: "Steve",
Idade: 10,
Taxa: 8000
,
]
O reduzir() Função para calcular as taxas totais serão assim:
var totalfees = estudantes.Reduce ((total, aluno) =>Retornar Total + Student.taxa
, 0);
console.log (totalfees);
Agora, a única diferença nesse código é que um único objeto é passado como um valor para a função de retorno de chamada e, dentro da definição da função de retorno de chamada, acessamos a taxa e a adicionamos à variável acumuladora.
Observando a captura de tela anexada acima, você pode ver que as taxas dos alunos são adicionadas e exibidas como uma saída. Então é assim que podemos acessar os objetos de uma matriz no reduzir() função.
Conclusão:
Neste post, aprendemos o que um reduzir() A função é e como podemos usá -la para ajudar a simplificar o código JavaScript e concluir as tarefas de maneira eficiente e rápida.
Aprendemos que o reduzir() A função reduz a matriz em um único valor de saída. O reduzir() A função leva uma função de retorno de chamada aplicada a todos os elementos da matriz e retorna um único valor de saída.
Esta postagem é sobre JavaScript's reduzir() função e seu uso. Contém alguns exemplos básicos que ajudam a entender o reduzir() função.