Removendo elementos duplicados de um array em JavaScript

Entenda como remover elementos duplicados de um array em JavaScript usando métodos simples como Set() e filter().

Como remover elementos duplicados de um array?

Em JavaScript, muitas vezes você pode se deparar com a necessidade de remover elementos duplicados de um array. Existem várias maneiras de fazer isso, e dependendo do tipo de dados que você está manipulando, alguns métodos podem ser mais eficientes do que outros. Vamos explorar os métodos mais comuns: Set(), filter() e outros.

Método Set()

O Set() é uma estrutura de dados que armazena valores únicos. Quando você converte um array para um Set, automaticamente ele elimina quaisquer valores duplicados. O Set() é ideal para remover duplicatas de arrays de maneira simples e eficiente.

Exemplo de código com Set():

let numeros = [1, 2, 2, 3, 4, 4, 5];
let numerosUnicos = [...new Set(numeros)];
console.log(numerosUnicos);  // Exibe [1, 2, 3, 4, 5]

Aqui, o array numeros contém duplicatas, mas ao convertê-lo em um Set e depois espalhá-lo de volta para um array com o spread operator (...), todas as duplicatas são removidas, criando um novo array com valores únicos.

Características do Set()

  • Elimina automaticamente duplicatas: Não é necessário implementar lógica adicional para filtrar valores duplicados.
  • Fácil de usar: Apenas converta o array para um Set e depois de volta para um array se necessário.
  • Adequado para arrays simples: Funciona bem quando você está lidando com valores primitivos como números ou strings.

Método filter()

O método filter() permite que você crie um novo array com elementos que atendem a uma condição. Você pode usá-lo para remover duplicatas, verificando se o elemento já apareceu antes no array. Essa abordagem é um pouco mais flexível e pode ser usada para arrays mais complexos.

Exemplo de código com filter():

let numeros = [1, 2, 2, 3, 4, 4, 5];
let numerosUnicos = numeros.filter((valor, indice, self) => {
  return self.indexOf(valor) === indice;
});
console.log(numerosUnicos);  // Exibe [1, 2, 3, 4, 5]

Neste exemplo, filter() percorre o array e mantém apenas os elementos que são encontrados pela primeira vez, comparando o índice do elemento com a primeira ocorrência do valor no array.

Características do filter()

  • Flexível: Pode ser usado para realizar verificações adicionais ou lógica complexa, além de remover duplicatas.
  • Ideal para arrays com objetos: Se você tiver um array de objetos, pode usar filter() com uma função de comparação mais sofisticada.
  • Não altera o array original: Como filter() retorna um novo array, o original permanece intacto.

Usando reduce() para remover duplicatas

O método reduce() também pode ser usado para remover duplicatas, especialmente se você precisar de maior controle sobre a agregação dos dados. Ele pode ser útil quando você deseja transformar ou processar dados de maneira mais personalizada.

Exemplo de código com reduce():

let numeros = [1, 2, 2, 3, 4, 4, 5];
let numerosUnicos = numeros.reduce((acumulador, valor) => {
  if (!acumulador.includes(valor)) {
    acumulador.push(valor);
  }
  return acumulador;
}, []);
console.log(numerosUnicos);  // Exibe [1, 2, 3, 4, 5]

Neste exemplo, reduce() percorre o array e adiciona cada valor ao acumulador se ele ainda não estiver presente no array. Isso remove as duplicatas durante a iteração.

Características do reduce()

  • Mais controle: Pode ser usado para realizar operações personalizadas durante a iteração, como transformar ou filtrar os dados.
  • Menos eficiente: Em termos de legibilidade e performance, pode ser mais complexo do que os outros métodos, dependendo do caso.
  • Útil em casos avançados: Quando você precisa de uma agregação mais complexa ou de processamento adicional durante a iteração.

Comparando Set(), filter() e reduce()

Método Retorno Uso
Set() Novo array com valores únicos Método simples e direto para eliminar duplicatas em arrays de valores primitivos.
filter() Novo array sem duplicatas Flexível, funciona bem para arrays simples e objetos, e permite aplicar lógica personalizada.
reduce() Novo array com valores únicos Método avançado, mais flexível, mas pode ser mais complexo e menos eficiente.

Quando usar cada método?

  • Use Set() quando você deseja uma solução rápida e simples para remover duplicatas de arrays de valores primitivos.
  • Use filter() quando precisar de mais controle ou quando estiver lidando com arrays de objetos e precisar de uma lógica mais complexa para filtrar duplicatas.
  • Use reduce() quando precisar realizar um processamento mais avançado ou personalizado enquanto remove duplicatas.

Conclusão

A remoção de duplicatas de um array em JavaScript pode ser feita de maneira simples e eficiente utilizando os métodos Set(), filter(), e reduce(). Dependendo das suas necessidades, você pode escolher o método mais adequado para o seu caso. Set() é ideal para valores simples, filter() oferece maior flexibilidade e é útil para arrays mais complexos, e reduce() pode ser útil em situações mais avançadas, mas é menos eficiente.

Quando você está lidando com grandes volumes de dados, ou quando precisa garantir que um array não contenha duplicatas, é importante escolher o método certo. Usar o Set() é uma maneira rápida e eficaz de remover duplicatas quando você está lidando com valores simples como números ou strings. Para casos mais avançados, onde você precisa de lógica personalizada, o filter() e o reduce() oferecem maior controle sobre a iteração e transformação dos dados. Cada método tem suas vantagens, e entender as diferenças pode ajudá-lo a escolher o mais adequado para seu código.

Algumas aplicações:

  • Limpar dados antes de exibi-los em interfaces de usuário, como listas ou tabelas.
  • Eliminar entradas duplicadas ao processar grandes volumes de dados em aplicativos interativos.
  • Garantir que dados enviados para um servidor ou API estejam livres de duplicatas, para evitar inconsistências.
  • Filtrar dados para manter apenas entradas únicas, como quando você busca informações em um banco de dados ou em arquivos externos.

Dicas para quem está começando

  • Use Set() para simplificar a remoção de duplicatas em arrays de valores simples.
  • Experimente filter() quando trabalhar com arrays de objetos e quando a lógica de filtragem for mais complexa.
  • Aprenda a usar reduce() quando precisar de maior controle durante o processo de remoção de duplicatas.
  • Tenha cuidado ao usar métodos que modificam o array original, como push() dentro do reduce(), para não alterar os dados inadvertidamente.
Foto de Andressa Maria
Contribuições de
Andressa Maria

Desenvolvedora sênior com forte atuação em PHP, JavaScript e tecnologias de backend.

Mais sobre o autor
Compartilhe este tutorial: Como remover elementos duplicados de um array?

Compartilhe este tutorial

Continue aprendendo:

Como juntar dois arrays em JavaScript (concat, spread operator)?

Entenda como usar `concat()` e o spread operator para juntar dois arrays em JavaScript e quando usar cada um para manipulação de dados.

Tutorial anterior

Como converter um array em uma string e vice-versa?

Entenda como usar `join()` para converter arrays em strings e `split()` para converter strings em arrays em JavaScript.

Próximo tutorial