JavaScript Array reduzir e reduzirRight: reduzindo um array em um valor

Resumo : neste tutorial, você aprenderá como usar o array JavaScript reduce()e reduceRight()métodos para reduzir um array a um valor.

Introdução ao método JavaScript Array reduz()

Suponha que você tenha uma matriz de números, como esta:

let numbers = [1, 2, 3];Linguagem de código:  JavaScript  ( javascript )

e você deseja calcular o total de elementos do array.

Normalmente, você usa um forloop para iterar sobre os elementos e adicioná-los conforme mostrado no exemplo a seguir:

let numbers = [1, 2, 3];

let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(sum);Linguagem de código:  JavaScript  ( javascript )

Saída:

6

O script é simples e direto:

• Primeiro, declare uma matriz de três números 1, 2 e 3.
• Segundo, declare a sum variável e defina seu valor como zero.
• Terceiro, no forloop, some os elementos do numbersarray à sumvariável. Após o loop, o valor da sumvariável é 6.

O que fizemos foi reduzir um array a um valor.

O Array.prototypepermite reduzir um array a um único valor usando o reduce()método como este:

let numbers = [1, 2, 3];
let sum = numbers.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue;
});

console.log(sum);Linguagem de código:  JavaScript  ( javascript )

É bem simples, não é?

Vamos dar uma olhada no reduce()método em detalhes.

Método JavaScript Array reduz() em detalhes

O seguinte ilustra a sintaxe do reduce()método:

array.reduce(callbackFn [, initialValue])Linguagem de código:  CSS  ( css )

O reduce()método leva dois argumentos:

• Uma função de retorno de chamada callbackFn . A função é frequentemente chamada de redutor.
• Um valor inicial opcional.

O  reduce() método chama a  callbackFn() função para cada elemento do array.

A  reducer() função retorna um valor que resulta da execução de callbackFnaté a conclusão em todo o array.

1) O argumento da função callbackFn()

A callbackFnfunção possui a seguinte sintaxe:

function callbackFn(previousValue, currentValue, currentIndex, array) { /**/}Linguagem de código:  PHP  ( php )

A callbackFnfunção leva quatro argumentos:

previousValue

O valor retornado da chamada anterior da callbackFnfunção. Na primeira chamada, o initialValueé o previousValuecaso você passe no initialValue. Caso contrário, seu valor é array[0].

currentValue

O valor do elemento da matriz atual. Na primeira ligação é array[0]se você passar initialValueou array[1]não.

currentIndex

O índice do currentValuena matriz. Na primeira chamada é 0se passar o InitialValue ou 1 caso contrário.

array

A matriz a ser percorrida.

2) O argumento inicialValue

O initialValueargumento é opcional.

Se você especificar initialValue, a callbackFnfunção inicializará o previousValuee initialValuepara currentValueo elemento do primeiro array na primeira chamada.

Se você não especificar initialValue, a callbackFnfunção inicializará o previousValuepara o elemento do primeiro array ( array[0]) no array e currentValuepara o elemento do segundo array ( array[1]).

A tabela a seguir ilustra a lógica quando o reduce()método executa a callbackFn()função pela primeira vez de acordo com o initialValueargumento:

initialValue	previousValue	currentValue
passado	initialValue	array[0]
não passou	array[0]	array[1]

O exemplo a seguir mostra o progresso da função reduzir() com initialValue100:

let numbers = [1, 2, 3];

function getOrdinalSuffix(i) {
  let j = i % 10, k = i % 100;
  if (j == 1 && k != 11) return i + 'st';
  if (j == 2 && k != 12) return i + 'nd';  
  if (j == 3 && k != 13) return i + 'rd';
  return i + 'th';
}

let call = 1;
let sum = numbers.reduce(function (previousValue, currentValue, currentIndex, array) {
    let result = previousValue + currentValue;

    // show the 1st call, 2nd call, etc.
    console.log(`${getOrdinalSuffix(call)} call`);
    call++;

    // show the immediate values
    console.table({ previousValue, currentValue, currentIndex, result });

    return result;
},100);

console.log(`Result: ${sum}`);Linguagem de código:  JavaScript  ( javascript )

Saída:

1st call
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ previousValue │  100   │
│ currentValue  │   1    │
│ currentIndex  │   0    │
│    result     │  101   │
└───────────────┴────────┘
2nd call
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ previousValue │  101   │
│ currentValue  │   2    │
│ currentIndex  │   1    │
│    result     │  103   │
└───────────────┴────────┘
3rd call
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ previousValue │  103   │
│ currentValue  │   3    │
│ currentIndex  │   2    │
│    result     │  106   │
└───────────────┴────────┘
Result: 106Linguagem de código:  texto simples  ( texto simples )

E o seguinte ilustra o reduce()método sem o initialValueargumento:

1st call
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ previousValue │   1    │
│ currentValue  │   2    │
│ currentIndex  │   1    │
│    result     │   3    │
└───────────────┴────────┘
2nd call
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ previousValue │   3    │
│ currentValue  │   3    │
│ currentIndex  │   2    │
│    result     │   6    │
└───────────────┴────────┘
Result: 6Linguagem de código:  texto simples  ( texto simples )

Mais exemplos de redução de JavaScript Array()

Suponha que você tenha a seguinte shoppingCartmatriz de objetos de produto:

let shoppingCart = [
  {
    product: 'phone',
    qty: 1,
    price: 500,
  },
  {
    product: 'Screen Protector',
    qty: 1,
    price: 10,
  },
  {
    product: 'Memory Card',
    qty: 2,
    price: 20,
  },
];Linguagem de código:  JavaScript  ( javascript )

Para calcular a quantidade total de produtos no carrinho de compras, você pode usar o reduce()método assim:

let total = shoppingCart.reduce(function (previousValue, currentValue) {
  return previousValue + currentValue.qty * currentValue.price;
}, 0);Linguagem de código:  JavaScript  ( javascript )

Saída:

550

Observe que neste exemplo, passamos o initialValueargumento para o reduce()método.

Caso contrário, o reduce()método pegaria o primeiro elemento do shoppingCartarray, que é um objeto, como valor inicial e realizaria o cálculo neste objeto. Portanto, causaria um resultado incorreto.

Método JavaScript Array reduzRight()

O reduceRight()método funciona da mesma forma que o reduce()método, mas na direção oposta.

O reduce()método começa no primeiro elemento e viaja em direção ao último, enquanto o reduceRight()método começa no último elemento e retrocede no primeiro.

Veja o exemplo a seguir:

let numbers = [1, 2, 3];

let sum = numbers.reduceRight(function (previousValue, currentValue) {
  console.log({ previousValue, currentValue });
  return previousValue + currentValue;
});

console.log(`Result:${sum}`);Linguagem de código:  JavaScript  ( javascript )

Saída

{ previousValue: 3, currentValue: 2 }
{ previousValue: 5, currentValue: 1 }
Result:6Linguagem de código:  CSS  ( css )

A imagem a seguir ilustra a diferença entre os métodos reduce()e :reduceRight()

Neste tutorial, você aprendeu como usar o array JavaScript reduce()e reduceRight()os métodos para reduzir um array em um valor.