Método de redução de JavaScript simplificado

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.