O método de redução de JavaScript é um dos métodos de array mais usados. Também faz parte da programação funcional. Neste tutorial, você aprenderá o que é o método de redução e como ele funciona. Você também aprenderá como usar esse método e quais são algumas das coisas que ele pode fazer com ele.
Introdução
O reduce()método é um dos recursos adicionados ao JavaScript no ES6 (ECMAScript 2015). Ele rapidamente se tornou um dos métodos de array mais usados. O que esse método faz é reduzir um determinado array em um único valor, executando uma função redutora fornecida por você. Essencialmente, reduz uma matriz em um único valor.
A sintaxe
A sintaxe do método de redução é simples. Este método leva dois parâmetros. O primeiro é uma função de retorno de chamada. A função de retorno de chamada será invocada para cada elemento da matriz. Quando é invocado, o reduce()passa quatro parâmetros para esta função de retorno de chamada.
Estes parâmetros são accumulator, currentValue, indexe a matriz original. O accumulatoré o valor reduce()retornado após a última chamada do retorno de chamada. Uma exceção é quando é reduce()executado pela primeira vez. Nesse caso, o valor de accumulatoré o valor fornecido como initialValueargumento.
O currentValueé o elemento atual sendo processado em uma determinada matriz. O indexé o índice do elemento atual que está sendo processado na matriz. Se você fornecer o, initialValueeste índice começará em 0. Se você omitir o initialValue, o índice começará em 1. O último parâmetro é a matriz que está sendo processada.
O segundo parâmetro do reduce()método é o initialValue. Este é o valor inicial com o qual você deseja que o método de redução comece.
Este valor inicial é usado como o primeiro argumento para a primeira chamada da função de retorno de chamada. Se você omiti-lo, reduce()usará o primeiro elemento da matriz como o valor inicial.
// Syntax of reduce():
someArray.reduce(callback, initialValue);
// Hypothetical reducer callback function:
const reducer = (accumulator, currentValue, index) => {
// ... do something
}
Uso
O método de redução é geralmente usado para operações como calcular somas e médias totais ou encontrar os valores mínimo e máximo em uma determinada matriz. Dito isso, você também pode usar reduce()para outras coisas. Por exemplo, para alterar a estrutura de objetos ou achatar matrizes bidimensionais.
Somando valores em uma matriz
Um dos exemplos mais simples de usar o reduce()método é somar valores em uma matriz. Isso pode ser feito com uma função de retorno de chamada simples na qual pegamos o currentValuee o adicionamos ao accumulator. Isso se repetirá para cada iteração. currentValueserá adicionado ao valor crescente do accumulator.
Depois que o último número na matriz for processado, reduce()retornará o valor acumulado de accumulator. Se quisermos que a redução comece com um número diferente de 0, podemos definir esse número inicial como o valor inicial. Caso contrário, podemos definir o valor inicial para 0 e reduce()começaremos com isso.
// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];
// Sum the numbers array:
const sum = numbers.reduce((accumulator, currentValue, index) => accumulator + currentValue, 0)
// For each iteration, add the "currentValue"
// to the value of the "accumulator".
// Log the result:
console.log(sum)
// 36
Encontrando médias
Também podemos usar a instrução if… else para retornar resultados diferentes da função de retorno de chamada. Isso é útil, por exemplo, quando queremos obter a média dos números em uma matriz. Podemos adicionar uma if...elseinstrução que verificará se o item atualmente processado é o último item da matriz.
Esta verificação usará o índice do item atualmente processado e o comprimento da matriz. Se o item atualmente processado for o último item do array, dividiremos o valor acumulado pelo comprimento do array. Caso não seja o último item, devolveremos o valor acumulado.
Antes de cada verificação, adicionaremos o valor atualmente processado ao acumulador.
// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];
// Find the average:
const average = array.reduce((accumulator, currentValue, index, array) => {
// For each iteration, add the "currentValue"
// to the value of the "accumulator".
accumulator += currentValue
// Check if currentItem is the last item in the array:
if (index === array.length - 1) {
// If it is, divide the accumulated value
// by the length of the array and return the result:
return accumulator / array.length
} else {
// Otherwise, return the accumulated value:
return accumulator
}
})
// Log the result:
console.log(average)
// 6
Encontrando valores mínimos e máximos
Podemos usar a redução para encontrar o valor mínimo em uma matriz, comparando o valor dos argumentos accumulatore currentValue. Se o valor de accumulatorfor menor que o valor de currentValue, retornaremos o accumulator. Caso contrário, devolveremos o currentValue.
// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];
// Find minimum value:
const min = numbers.reduce((accumulator, currentValue) => {
// If the value of "accumulator" is less than "currentValue"
// return the "accumulator", else return the "currentValue":
return accumulator < currentValue ? accumulator : currentValue;
})
// Log the result:
console.log(min)
// 6
Podemos encontrar facilmente o valor máximo alternando a condição dentro da função de retorno de chamada.
// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];
// Find maximum value:
const max = numbers.reduce((accumulator, currentValue) => {
// If the value of "accumulator" is greater than "currentValue"
// return the "accumulator", else return the "currentValue":
return accumulator > currentValue ? accumulator : currentValue;
})
// Log the result:
console.log(max)
// 11
Matrizes de nivelamento
O método de redução também pode ser útil quando queremos nivelar matrizes multidimensionais. Podemos fazer isso usando o método concat () no accumulator, passando o currentValuecomo um argumento para o concat()método. Observe que esta solução simples funcionará apenas com matrizes bidimensionais.
Se você tiver uma matriz com mais de duas dimensões, o método flat () fará o trabalho.
// Create array of numbers:
const numbers = [1, [3, 5], [7, 9, 11], [13, 15, 17]];
// Flatten an array:
const numbersFlattened = numbers.reduce((accumulator, currentValue) => {
// Concatenate the accumulator with the currentValue:
return accumulator.concat(currentValue);
}, [])
// Log the result:
console.log(numbersFlattened)
// [1, 3, 5, 7, 9, 11, 13, 15, 17]
Contando o número de ocorrências
Podemos usar o método de redução também para tarefas como contar o número em que um item ocorreu em uma matriz. Podemos fazer isso definindo o valor inicial para um objeto vazio. Durante cada iteração, iremos verificar se o item atualmente processado é uma propriedade existente daquele objeto.
Em caso afirmativo, alteraremos o valor desta propriedade em 1. Este é o número de ocorrências. Se o item não for uma propriedade existente, iremos adicioná-lo, com o valor 1. Em seguida, retornaremos o accumulatorobjeto. Ao final, obteremos um objeto com todos os itens como propriedades e número de ocorrências como valores.
// Create array of numbers:
const fruit = ['apple', 'pear', 'lemon', 'avocado', 'apple', 'banana', 'pear', 'apple', 'pineapple'];
// Count the number of occurrences:
const occurrences = fruit.reduce((accumulator, currentItem) => {
// Check if item exists in accumulator object:
if (currentItem in accumulator) {
// If so, increase the number of occurrences by 1:
accumulator[currentItem] = accumulator[currentItem] + 1
} else {
// Else register new occurrence:
accumulator[currentItem] = 1
}
// Return the accumulator object:
return accumulator
}, {})
// Log the result:
console.log(occurrences)
// {
// apple: 3,
// pear: 2,
// lemon: 1,
// avocado: 1,
// banana: 1,
// pineapple: 1
// }
Alterar a forma de objetos dentro de matrizes
Quando reduzimos um array, não precisamos reduzi-lo a um único valor. Também podemos mudar seu conteúdo. Por exemplo, se for uma matriz de objetos, podemos alterar a forma desses objetos. O valor retornado ainda será um array, apenas a forma dos objetos dentro do array será diferente.
// Create array of numbers:
const records = [
{ name: 'Joe', grade: 'A' },
{ name: 'Tom', grade: 'B' },
{ name: 'Sandra', grade: 'B' },
{ name: 'Joel', grade: 'C' },
{ name: 'Victoria', grade: 'A' }
]
// Change the structure of objects in "records" array:
const updatedRecords = records.reduce((accumulator, currentItem) => {
// During each iteration, transform currently processed object
// into this shape:
accumulator[currentItem.name] = {
grade: currentItem.grade,
passed: ['A', 'B'].includes(currentItem.grade)
}
// Return the modified object:
return accumulator
}, {})
// Log the result:
console.log(updatedRecords)
// {
// Joe: { grade: 'A', passed: true },
// Tom: { grade: 'B', passed: true },
// Sandra: { grade: 'B', passed: true },
// Joel: { grade: 'C', passed: false },
// Victoria: { grade: 'A', passed: true }
// }
Conclusão: método de redução de JavaScript simplificado
Mesmo que a sintaxe do método de redução seja simples, ele pode nos ajudar a fazer coisas interessantes com matrizes. Espero que este tutorial tenha ajudado você a entender o que o reduce()método faz, como funciona e como usá-lo.