Como Remover Itens Duplicados de um Array em JavaScript

Aprenda como remover itens duplicados de um array com JavaScript, deixando apenas os valores únicos!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Como Remover Itens Duplicados de um Array em JavaScript

Na aula de hoje, vou te mostrar como remover itens duplicados de um array com JavaScript! Esse é um problema muito comum em diversos projetos, pois nem sempre queremos todos os valores de uma lista. Em alguns casos, queremos apenas os valores únicos.

Para resolver isso, utilizaremos a estrutura set no JavaScript para converter um array em um conjunto de dados.

Dessa forma, teremos um conjunto de itens únicos que poderemos transformar novamente em uma lista. Vem comigo que vou te mostrar como realizar esse procedimento.

Array no JavaScript

Em JavaScript, um array é uma coleção de dados que armazena elementos de forma ordenada. Cada elemento em um array é associado a um índice numérico, começando do zero.

A forma padrão de declararmos um array em JavaScript é feita utilizando colchetes [].

Os array são listas de dados que permitem a existência de valores repetidos.

const lista = ["a","b","c","d","a","e"];

Por exemplo, se verificarmos o tamanho desse array, teremos o valor 6 sendo apresentado como resposta.

const lista = ["a","b","c","d","a","e"];
console.log(lista.length);

Isso acontece porque, de fato, temos 6 elementos dentro dessa lista; no entanto, um deles está duplicado.

Estrutura Set

Uma das formas que temos para removermos itens duplicados de um array no JavaScript é através da estrutura Set.

Set vem do inglês e significa conjunto. Ou seja, um Set se trata de um conjunto de dados no JavaScript que permite armazenar apenas valores únicos. Ao contrário dos arrays, o set armazena apenas valores distintos.

Para criarmos um Set utilizamos o comando new Set() passando como argumento um iterável (como um array).

const lista = ["a","b","c","d","a","e"];

const conjunto = new Set(lista);
console.log(conjunto);

Repare que ele informou a quantidade de elementos únicos e os exibiu em sequência.

No entanto, você pode querer que ele retorne esses elementos como uma lista. Para isso, precisamos convertê-lo novamente para um array.

Como Transformar Set em um Array

Para converter um conjunto em uma lista podemos utilizar o método Array.from() passando para ele o conjunto gerado. Esse método cria uma nova instância de array a partir de um objeto semelhante.

const lista = ["a","b","c","d","a","e"];

const conjunto = new Set(lista);

const listaElementosUnicos = Array.from(conjunto);
console.log(listaElementosUnicos);

Dessa forma, convertemos nosso set para um array contendo apenas elementos únicos.

Exemplo com Itens Duplicados

Vamos criar um exemplo em que, através de uma página que estava concedendo descontos, conseguimos capturar uma lista com e-mails dos usuários que se cadastraram para receber esse cupom.

No entanto, um dos usuários, na tentativa de receber mais de um cupom de desconto, se cadastrou mais de uma vez.

const listaEmails = [
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
];

Para obtermos apenas os elementos únicos dessa lista, podemos fazer o processo que aprendemos anteriormente, converter para um Set e, em seguida, transformar novamente em um array.

const listaEmails = [
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
];

const listaEmailsUnicos = Array.from(new Set(listaEmails));
console.log(listaEmailsUnicos);

Assim obtemos todos os e-mails cadastrados de forma única.

Conclusão – Como Remover Itens Duplicados de um Array em JavaScript

Nessa aula, você aprendeu como remover itens duplicados de um array em JavaScript.

Expliquei o que é um array no JavaScript e apresentei a estrutura Set no JavaScript, mostrando como utilizá-los para converter uma lista com itens duplicados em uma lista com itens únicos.

Apesar de ser um conteúdo bastante sucinto, essa prática é essencial para o aprendizado do JavaScript e pode ser aplicada em exemplos como os vistos nessa aula.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Diego Monutti

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.