Como remover elementos duplicados de uma Array no JavaScript ES6

Inscreva-se em nossa Newsletter!

Você já se deparou com a situação de ter que filtrar uma Array ou coleção no JavaScript para remover elementos duplicados?

Se você tem já experiência com desenvolvimento web, provavelmente já passou por essa situação e pode ter se perguntado como fazer.

Temos fazer um loop ou for para comparar cada item? Há uma função já do JavaScript que nos permite fazer isso de forma mais otimizada?

Pois então, para tentar explicar um pouco melhor essa questão, vou te mostrar algumas formas mais tradicionais e também mais novas do ES6 para lidar com essa situação.

Como remover elementos duplicados no JavaScript

Para começar, é preciso dizer que não há uma solução única para todos os casos. Se sua array é composta de elementos de natureza diversa – por exemplo, números, floats e strings -, então uma solução pode ser melhor.

Se ela for apenas de objetos, pode ser outra. Caso sua Array seja pequena, uma solução mais simples vai dar conta, mas se for grande talvez seja melhor utilizar algo mais complexo que vai escalar melhor na performance.

Uso do filter

Iniciamos, portanto, com um jeito bem tradicional e simples:

var array = [1, 2, 2, 3, 4, 5, 5, 5, 6, 7, 7, 8, 9, 10, 10];
var unico = array.filter(function(elem, index, self) {
    return index === self.indexOf(elem);
});

Utilizando o filter, geramos uma nova array com base na função que passamos para identificar as posições de elementos repetidos.

Esse é um código que funciona OK para arrays menores, pois não é algo que vai escalar muito bem.

Usando o filter, podemos fazer de outra maneira: hashtables.

function unico(a) {
    var jaVisto = {};
    return a.filter(function(item) {
        return jaVisto.hasOwnProperty(item) ? false : (jaVisto[item] = true);
    });
}

Aqui, basicamente estamos conferindo imediatamente se há um item duplicado. No entanto, nesse objeto não há como distinguir entre a string “1” e o numeral 1, então não recomendo para arrays mistas.

Usando jQuery

Para quem gosta de jQuery ainda (confesso que até hoje acabo usando em projetos mais simples), temos uma solução bem simples também.

var nomes = ["André","Pedro","Clara","André","João","Marina","Paula", "Marina"];
var nomesUnicos = [];
$.each(nomes, function(i, el){
    if($.inArray(el, nomesUnicos) === -1) nomesUnicos.push(el);
});

O jQuery facilita bastante nossa vida, então aqui iteramos pelos itens da array com o each e conferimos se há mais de um do mesmo elementos. Caso exista, removemos pois é duplicado.

Usando set

O set foi introduzido no ES6, então seu suporte em navegadores é menor, mas nos permite remover elementos duplicados de nossas arrays de forma bem simples.

O set armazena valores únicos, então quando passamos uma array por ele, acabamos sem os repetidos. Assim, depois que convertemos a array set, devemos reverter de volta para uma array.

const array = ["André", 1, 2, 3, "André", 3, "Pedro"];

const setUnico = new Set(array);

const deVoltaAAray = [...setUnico];

Usando o reduce

O método reduce é usado para ‘reduzir’ elementos de uma array e combiná-los numa array final baseado em alguma função que passamos por ele.

Nesse caso, a função vai conferir se nossa array contém determinado item. Se não tem, manda ela para a array final. Caso tenha, então passa para o próximo item sem jogar para a array final.

const array = ["André", 1, 2, 3, "André", 3, "Pedro"];

array.reduce((unico, item) => {
    return unico.includes(item) ? unico : [...unico, item]
}, []);

Conclusão

Como tudo em desenvolvimento web, há um monte de jeito diferente de se chegar ao resultado final. Nesse breve artigo quis te apresentar algumas maneiras que podemos fazer para remover elementos duplicados de uma array.

Você também pode utilizar várias bibliotecas prontas que, assim como o jQuery, vão te dar um pouco de ajuda na hora de escrever essas funções. Underscore e Lo-Dash são outras duas possíveis com suas funções uniq.

Há algo mais sobre esse assunto, sobre JavaScript ou sobre desenvolvimento web que gostaria de saber? Me conta nos comentários.

Divirta-se!

Gostou do artigo?

Facebook
LinkedIn
Pinterest
WhatsApp
Picture of André Lug

André Lug

Apaixonado por design e desenvolvimento de websites. De vez em quando gosta de escrever sobre produtividade, como é ser um freelancer e algumas reflexões da vida.