8

Tenho um array de objetos que tem essa estrutura abaixo:

listaProdutos = 
[
      {nome:'Teclado',preco:28.00},
      {nome:'Mouse',preco:36.00},
      {nome:'Monitor',preco:500.00},
      {nome:'CPU',preco:800.00},
      {nome:'Teclado',preco:28.00},
      {nome:'Monitor',preco:500.00},
];

Minha intenção seria que fosse gerado um array de objetos com o resultado abaixo:

novoLista = 
[
    {nome:'Teclado',preco:56.00},
    {nome:'Mouse',preco:36.00},
    {nome:'Monitor',preco:1000.00},
    {nome:'CPU',preco:800.00} 
];

Você poderiam me ajudar com a melhor abordagem para essa situação ?

11
  • 1
    Veja qual seria a estrutura de tabela hash / tabela de espalhamento / hash table no JS (conjunto de pares de chave/valor em que a chave não se repete)? Percorre o array e vai vendo se os nomes já existem como chaves da hash table, se já existirem você atualiza o valor da mesma (soma o que já estava com o do objeto), senão acrescenta o novo par.
    – Piovezan
    Commented 5/02/2021 às 1:49
  • 1
    Tabela hash é uma estrutura de dados essencial e ubíqua em computação, presente nas linguagens sob diversos nomes (dicionários, maps, hashmaps, etc), se não conhece recomendo que estude e entenda bem seu princípio de funcionamento, pois se aplica a uma diversidade de situações. Aqui no SOpt mesmo tem uma boa explicação: pt.stackoverflow.com/q/27827/357
    – Piovezan
    Commented 5/02/2021 às 2:06
  • 2
    Estou mantendo um benchmark com cada resposta desta pergunta. Para não ser injusto com nenhuma resposta, sugiro que o iminente utilizador de qualquer um dos códigos abaixo altere os valores padrão do número de elementos do benchmark para espelhar as necessidades do projeto. A performance de cada solução varia significativamente de acordo com o número de itens únicos (NAMES_COUNT) e de elementos totais (ITEMS_COUNT). Aqui está o link. Commented 5/02/2021 às 11:12
  • 1
    @GatodeSchrödinger, com poucos dados a diferença é mínima e quase imperceptível, uma vez que (embora percentualmente a diferença seja visível) será tudo muito rápido. Em quantidades maiores, aí sim fará diferença. No seu caso, se a quantidade de dados for pequena, escolha o código que mais lhe agrada. Sem dúvidas todas as soluções postadas aqui são muito elegantes. :-) Commented 5/02/2021 às 12:14
  • 3
    @GatodeSchrödinger depende de a partir de qual numero voce considera "muitos dados" ou "poucos dados". O legal dessas respostas é que são soluções distinas, com resultados de benchmark diferentes de acordo com a situacao. No bench. que o Luiz Felipe mostrou, a solucao dele é excelente para casos de muitos objetos no array (+1000), mas para caso mais simples, a solucao do Ricardo Pontual é a que melhor se adapta. Acho inclusive que deveriamos estudar um pouco mais sobre o Map. Pra mim essa foi a pergunta com as respostas mais interessantes do ano :D . Commented 5/02/2021 às 12:19

5 Respostas 5

5

Pode-se usar o método reduce() para iterar em cada elemento do array, remover os duplicados e somar. Por exemplo:

listaProdutos = 
[
      {nome:'Teclado',preco:28.00},
      {nome:'Mouse',preco:36.00},
      {nome:'Monitor',preco:500.00},
      {nome:'CPU',preco:800.00},
      {nome:'Teclado',preco:28.00},
      {nome:'Monitor',preco:500.00},
];

const novoLista = listaProdutos.reduce((soma, cur) => {
  // guarda o nome atual e verifica se existe repetido
  let nome = cur.nome;
  let repetido = soma.find(elem => elem.nome === nome)
  // se for repetido soma, caso contrário adiciona o elemento ao novo array
  if (repetido) repetido.preco += cur.preco;
  else soma.push(cur);
  // retorna o elemento agrupado e somado
  return soma;
}, []);

console.log(novoLista);

9
  • Legal! :) +1 Só acho válido observar que como reduce e find têm complexidade O(n), este código tem complexidade quadrática, o que pode ser ruim em casos de grande quantidade de itens. Commented 5/02/2021 às 1:54
  • Galera, vou verificar amanhã de tarde. Hoje estou super exausto. Muito obrigado. Commented 5/02/2021 às 1:56
  • @LuizFelipe, por curiosidade criei um benchmark entre as duas soluções e o resultado é quase igual, sendo o reduce ligeiramente mais performático: jsben.ch/oQc4s Commented 5/02/2021 às 2:17
  • 2
    A diferença é perceptível com uma amostra de dados um pouco maior, veja. Quanto maior o número de elementos, maior é a diferença. Em amostras pequenas, a diferença de velocidade é ínfima e faz pouca diferença. Commented 5/02/2021 às 2:34
  • 2
    obrigado @GatodeSchrödinger, os testes, que aliás o Luiz Felipe fez um ótimo trabalho de juntar e manter mostram que esse algoritmo que usei é o mais rápido com poucos elementos, eu fiz um teste com até 30 ele é o mais rápido, dai até 100 já fica na média, e com mais de 100 começa a cair a performace, sendo o mais lento com 1000 elementos para cima, deixo comentado aqui para quem ver essa ótima pergunta e quiser experimentar algum dos algoritmos :) Commented 7/02/2021 às 19:12
5

Você pode acumular cada nome único e ir somando o preco de cada objeto por nome correspondente. Uma vez que o mapa tenha sido completo, gera-se o novo array. Uma forma de manter os objetos a partir de uma chave única é utilizar a estrutura de dados Map do JavaScript.

Algo assim:

function sumByPropName(nameProp, sumProp, arr) {
  const map = new Map();

  for (const obj of arr) {
    // Chave que utilizaremos para o mapa. A `key` corresponde a cada "nome" único.
    const key = obj[nameProp];

    // Caso nenhum objeto já tiver sido registrado para a chave atual, devemos o
    // inserir pela primeira vez.
    if (!map.has(key)) {
      map.set(key, obj);

      // Podemos pular para a próxima iteração, já que o valor correspondente
      // já está incluído no `obj`.
      continue;
    }

    // Caos já tenha sido registrado, é só somar ao valor já armazenado.
    map.get(key)[sumProp] += obj[sumProp];
  }

  // Converter o mapa em array:
  return [...map.values()];
}

const original = [
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Mouse', preco: 36.0 },
  { nome: 'Monitor', preco: 500.0 },
  { nome: 'CPU', preco: 800.0 },
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Monitor', preco: 500.0 }
];

// Queremos identificar elementos únicos pela propriedade `nome` (1º arg.)
// O somatório corresponde à propriedade `preco` (2º arg.)
console.log(sumByPropName('nome', 'preco', original));

A complexidade da função acima seria algo como O(n + m), sendo n o número de elementos do array original e m o número de nomes únicos.

  • O n vem do for (que é indispensável neste tipo de situação).
  • O m (que muitas vezes é ínfimo e pode ser desconsiderado) vem da necessidade de se converter o mapa para array ao final da função.

Se Map não puder ser utilizado (foi introduzido no ECMAScript 2015), pode-se utilizar Object.create(null) como substituto.

Tentei já explicar direto pelo código, qualquer dúvida deixe nos comentários que tento editar para esclarecer.

1
  • Galera, vou verificar amanhã de tarde. Hoje estou super exausto. Muito obrigado. Commented 5/02/2021 às 1:56
5

Vou compartilhar a minha solução, sendo esta, ao meu ver, uma alternativa decente as outras respostas.

Código:

const listaProdutos = [
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Mouse', preco: 36.0 },
  { nome: 'Monitor', preco: 500.0 },
  { nome: 'CPU', preco: 800.0 },
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Monitor', preco: 500.0 },
];

const resObject = {};

listaProdutos.forEach((elem) => {
  const valorAnterior = resObject[elem.nome] || 0;

  resObject[elem.nome] = valorAnterior + elem.preco;
});

const novoLista = Object.keys(resObject).map((key) => {
  return { nome: key, preco: resObject[key] };
});

console.log(novoLista);

As explicações:

  • const resObject = {}; é um objeto temporário para salvar o valor de nome como uma key deste objeto, além de manter um valor acumulado de cada preco da lista de produtos.

  • forEach pra iterar sobre os elementos de lista.

  • valorAnterior recebe o valor já salvo no resObject de acordo com a chave (Teclado, Mouse, etc...). Se a chave não existir, adotamos o valor 0.

  • resObject[elem.nome] = valorAnterior + elem.preco; basicamente, adicionar uma chave ao objeto resObject com um valor inicial de acordo com elem.preco. Se a chave já existe, ela já tem um valor, então faremos uma soma.

Neste ponto, se você der um console.log, verá o objeto resObject com as chaves com o nome dos nomes de produtos da lista e os respectivos valores já somados.

const listaProdutos = [
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Mouse', preco: 36.0 },
  { nome: 'Monitor lcd', preco: 500.0 },
  { nome: 'CPU', preco: 800.0 },
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Monitor', preco: 500.0 },
];

const resObject = {};

listaProdutos.forEach((elem) => {
  const valorAnterior = resObject[elem.nome] || 0;

  resObject[elem.nome] = valorAnterior + elem.preco;
});

console.log(resObject)

A partir de agora, o que faremos é associar a chave do resObject para um objeto com a propriedade nome:

 return { nome: key, ...}

e o preco será o valor desta chave usando resObject[key]:

return { nome: key, preco: resObject[key] };

Adicionei um toFixed apenas pra ficar como deseja para novoLista:

const listaProdutos = [
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Mouse', preco: 36.0 },
  { nome: 'Monitor lcd', preco: 500.0 },
  { nome: 'CPU', preco: 800.0 },
  { nome: 'Teclado', preco: 28.0 },
  { nome: 'Monitor', preco: 500.0 },
];

const resObject = {};

listaProdutos.forEach((elem) => {
  const valorAnterior = resObject[elem.nome] || 0;

  resObject[elem.nome] = valorAnterior + elem.preco;
});

const novoLista = Object.keys(resObject).map((key) => {
  return { nome: key, preco: parseFloat(resObject[key]).toFixed(2) };
});


console.log(novoLista);

3
  • 1
    Legal! Coloquei no benchmark para não ficar de fora. :-) Commented 5/02/2021 às 3:02
  • 1
    boa, acho que vai ficar muito boa essa pergunta, com várias soluções e benchmark :) Commented 5/02/2021 às 10:53
  • Obrigado, verificarei todas. Commented 5/02/2021 às 11:54
5

const listaProdutos = [{
    nome: 'Teclado',
    preco: 28.00
  },
  {
    nome: 'Mouse',
    preco: 36.00
  },
  {
    nome: 'Monitor',
    preco: 500.00
  },
  {
    nome: 'CPU',
    preco: 800.00
  },
  {
    nome: 'Teclado',
    preco: 28.00
  },
  {
    nome: 'Monitor',
    preco: 500.00
  },
];

// Agrupe
const groups = listaProdutos.reduce((acc, current) => {
  if (!acc[current.nome]) {
    acc[current.nome] = { ...current
    }

    return acc
  }

  acc[current.nome].preco = acc[current.nome].preco + current.preco

  return acc
}, {})

// Extraia a lista 
const newList = Object.values(groups)
console.log(newList)

4
  • Também coloquei no benchmark. Commented 5/02/2021 às 14:32
  • Pelo que pude ver, essa foi a mais rápida, certo ? Commented 5/02/2021 às 20:08
  • seria legal adicionar comentários ou na pergunta explicar como fez para agrupar Commented 5/02/2021 às 21:58
  • Eu vou escolher a resposta amanhã. Cara, o trabalho está me sugando de uma forma absurda. Por um acaso maravilhoso, todas as respostas me serviram. Fico até sem jeito de escolher uma. Se pudesse eu escolheria todas. Muito obrigado mesmo. Commented 6/02/2021 às 2:32
5

Ainda no tema Map é possível utilizar outra abordagem.

Faça duma instancia de Map um índice para os elementos do Array novoLista que será populado inicialmente com uma cópia do primeiro objeto da lista listaProdutos cujo a propriedade nome ainda não tenha sido indexada. Caso já haja um índice que seja a propriedade nome apenas some preço ao preço do elemento já indexado.

let listaProdutos = 
[
      {nome:'Teclado',preco:28.00},
      {nome:'Mouse',preco:36.00},
      {nome:'Monitor',preco:500.00},
      {nome:'CPU',preco:800.00},
      {nome:'Teclado',preco:28.00},
      {nome:'Monitor',preco:500.00},
];

let novoLista = [];

let m = new Map();

//Para todos os elementos de listaProdutos...
for(let prod of listaProdutos){
  //Verifica se índice contiver a chave prod.nome...
  if (m.has(prod.nome)){
    //No item indexado por prod.nome no array novoLista incrementa o preço registrado com o novo preço.
    novoLista[m.get(prod.nome)].preco += prod.preco;                          
  } else {
    //Cria um índice nomeado pelo valor de prod.nome apontando para o mais novo elemento do array novoLista
    m.set(prod.nome, novoLista.push({nome:prod.nome,preco:prod.preco}) - 1);  
  }
}

console.log(novoLista);

Créditos ao Luiz Felipe quem colocou o código acima na forma de uma função:

let listaProdutos = 
[
  {nome:'Teclado',preco:28.00},
  {nome:'Mouse',preco:36.00},
  {nome:'Monitor',preco:500.00},
  {nome:'CPU',preco:800.00},
  {nome:'Teclado',preco:28.00},
  {nome:'Monitor',preco:500.00},
];

function somar(arr) {
  let novoLista = [];
  let m = new Map();
  for (let prod of arr) {
    if (m.has(prod.nome)) {
      novoLista[m.get(prod.nome)].preco += prod.preco;
    } else {
      m.set(prod.nome, novoLista.push({
        nome: prod.nome,
        preco: prod.preco
      }) - 1);
    }
  }
  return novoLista;
}

console.log(somar(listaProdutos))

3
  • 1
    Também coloquei no benchmark. Commented 5/02/2021 às 11:15
  • 1
    Obrigado, verificarei todas. Commented 5/02/2021 às 11:54
  • 1
    @LuizFelipe eu peguei o seu código benchmark. Espero que não haja problemas. Quando escrevi esta resposta estava muito cansado. Havia virado a noite brigando com codepoints unicode e foi quando achei uma resposta aqui no site que municiava para resolver o meu problema. Commented 5/02/2021 às 19:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .