No desenvolvimento web moderno, a manipulação de dados é crucial para garantir aplicativos suaves e responsivos. Esteja você filtrando produtos, encontrando itens específicos ou transformando dados para exibição, a manipulação eficaz de dados garante que seu aplicativo funcione sem problemas e proporcione uma ótima experiência ao usuário.

JavaScript fornece vários métodos integrados, como localizar, mapear e filtrar para tarefas comuns. No entanto, o método versátil de redução se destaca pela capacidade de realizar todas essas operações e muito mais. Com reduzir, você pode acumular valores, transformar matrizes, nivelar estruturas aninhadas e criar transformações complexas de dados de forma concisa.

Embora a redução possa replicar outros métodos de array, pode nem sempre ser a escolha mais eficiente para tarefas simples. Métodos como mapa e filtro são otimizados para finalidades específicas e podem ser mais rápidos para operações simples. No entanto, entender como usar reduzir pode ajudá-lo a encontrar muitas maneiras de tornar seu código melhor e mais fácil de entender.

Neste artigo, nos aprofundaremos no método de redução, exploraremos vários casos de uso e discutiremos as melhores práticas para maximizar seu potencial.

Visão geral do artigo

• Compreendendo o método de redução

• JavaScript reduz sintaxe

• Exemplo de redução de Javascript

• Vários casos de uso do método de redução

• Substituindo mapa, filtro e localização de JavaScript por redução

• conclusão

Compreendendo o método de redução

O método de redução Javascript aplica uma função em um acumulador e em cada elemento do array (da esquerda para a direita) para reduzi-lo a um único valor. Este valor único pode ser string, número, objeto ou uma matriz.

Basicamente, o método de redução pega um array e o condensa em um valor, aplicando repetidamente uma função que combina o resultado acumulado com o elemento atual do array.

JavaScript reduz sintaxe

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

Parâmetros:

callback: A função a ser executada em cada elemento, que recebe os seguintes argumentos:

acumulador: O valor acumulado retornado anteriormente na última invocação do retorno de chamada, ou inicialValue, se fornecido.

currentValue: O elemento atual que está sendo processado na matriz.

index (opcional): O índice do elemento atual que está sendo processado na matriz.

array (opcional): A redução do array foi chamada.

initialValue: um valor a ser usado como primeiro argumento para a primeira chamada do retorno de chamada. Se nenhum valor inicial for fornecido, o primeiro elemento (array[0]) na matriz será usado como o valor inicial do acumulador e o retorno de chamada não será executado no primeiro elemento.

Exemplo de redução de Javascript

Aqui está um exemplo básico de como o método de redução javascript pode ser usado

Usando JavaScript reduza para soma

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

Neste exemplo, reduzir adiciona cada número da matriz ao acumulador (acc). Começando com um valor inicial de 0, ele processa da seguinte forma:

• (0 1) -> 1

• (1 2) -> 3

• (3 3) -> 6

• (6 4) -> 10

Vários casos de uso do método reduzir

O método de redução é altamente versátil e pode ser aplicado a uma ampla variedade de cenários. Aqui estão alguns casos de uso comuns com explicações e trechos de código.

Reduzindo uma matriz de objetos

Suponha que você tenha uma matriz de objetos e queira resumir uma propriedade específica.

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];


const totalPrice = products.reduce((acc, curr) => acc   curr.price, 0);
console.log(totalPrice); // Output: 2250

Neste exemplo, reduza as iterações sobre cada objeto de produto, adicionando a propriedade price ao acumulador (acc), que começa em 0.

Reduzir um array a um objeto

Você pode usar reduzir para transformar um array em um objeto. Isso pode ser útil quando você deseja agrupar um array usando sua propriedade

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
  { name: 'Banana', category: 'Fruit' }
];

const groupedItems = items.reduce((acc, curr) => {
  if (!acc[curr.category]) {
    acc[curr.category] = [];
  }
  acc[curr.category].push(curr.name);
  return acc;
}, {});

console.log(groupedItems);
// Output: { Fruit: ['Apple', 'Banana'], Vegetable: ['Carrot'] }

Este exemplo agrupa itens por categoria. Para cada item verifica se a categoria já existe no acumulador (acc). Caso contrário, ele inicializa um array para essa categoria e então adiciona o nome do item ao array.

Achatando uma matriz de matrizes

O método de redução pode nivelar uma matriz de matrizes em uma única matriz, conforme mostrado abaixo

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flatArray = nestedArrays.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Aqui, reduzir concatena cada array aninhado (curr) ao acumulador (acc), que começa como um array vazio.

Removendo duplicatas de um array

O método de redução também pode ser usado para remover duplicatas de um array

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

Substituindo mapa, filtro e localização de JavaScript por redução

O método de redução é incrivelmente versátil e pode replicar a funcionalidade de outros métodos de array, como mapear, filtrar e localizar. Embora nem sempre seja a opção com melhor desempenho, é útil entender como a redução pode ser usada nesses cenários. Aqui estão exemplos que mostram como a redução pode substituir esses métodos.

Usando reduzir para substituir mapa

O método map cria um novo array aplicando uma função a cada elemento do array original. Isso pode ser replicado com redução.

const numbers = [1, 2, 3, 4];

const doubled = numbers.reduce((acc, curr) => {
  acc.push(curr * 2);
  return acc;
}, []);

console.log(doubled); // Output: [2, 4, 6, 8]

Neste exemplo, reduza as iterações sobre cada número, duplique-o e coloque o resultado na matriz acumuladora (acc).

Usando reduzir para substituir filtro

O método filter cria um novo array com elementos que passam em um teste implementado por uma função fornecida. Isso também pode ser alcançado com redução.

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(evens); // Output: [2, 4, 6]

Aqui, reduza verifica se o número atual (curr) é par. Se for, o número é adicionado à matriz do acumulador (acc).

Usando reduzir para substituir encontrar

O método find retorna o primeiro elemento em uma matriz que satisfaz uma função de teste fornecida. reduzir também pode ser usado para esse propósito. Isso pode ser útil ao encontrar o primeiro número par em uma matriz

const numbers = [1, 3, 5, 6, 7, 8];

const firstEven = numbers.reduce((acc, curr) => {
  if (acc !== undefined) return acc;
  return curr % 2 === 0 ? curr : undefined;
}, undefined);

console.log(firstEven); // Output: 6

Conclusão

O método de redução em JavaScript é uma ferramenta versátil que pode lidar com uma ampla gama de tarefas de manipulação de dados, superando os recursos de mapa, filtro e localização. Embora nem sempre seja o mais eficiente para tarefas simples, dominar a redução abre novas possibilidades para otimizar e simplificar seu código. Compreender e usar efetivamente o reduz pode melhorar muito sua capacidade de gerenciar transformações complexas de dados, tornando-o uma parte crucial do seu kit de ferramentas JavaScript.