Removendo itens duplicados de arrays no Javascript

As vezes precisamos que os itens de uma array possuam apenas um registro único por vez. É aí que vem o problema: Mas como fazer isso? Infelizmente ainda não temos algum método de array que torne extremamente simples, como algo do tipo minhaArray.getUniques() Olá ECMA, fica aqui minha sugestão pra a próxima revisão do padrão ECMAScript!, mas ainda assim, dependendo do que precisa ser feito isso pode ser facilmente alcançado.

Usando o Set()

Primeiro, vamos considerar uma array:

  const armasLendarias = [
    'Martelo Glorificado',
    'Espada Sagrada',
    'Espada Sagrada',
    'Escudo dos Deuses'
  ];

No nosso exemplo, considere que cada arma lendária é única. Mas na nossa array Espada Sagrada se repete. Para resolver isso, podemos usar o Set(), uma estrutura de dados que foi introduzida no ECMAScript 6, que limita os dados a apenas um registro no mesmo set, nunca mais que um, tornado o set único.

Para isso precisaremos também usar o operador spread/rest, que logo mais aparecerá aqui no blog, mas que basicamente, dependendo da forma que for usado, serve para agrupar dados numa variável (rest) ou espalhá-los em alguma estrutura (spread). Ficaria assim:

  // Definimos uma nova array para os itens únicos e espalhamos os dados
  // no novo Set dentro delas usando o operador spread. Nesse caso, opte
  // sempre por manter seus dados imutáveis, evite modificar o valor
  // inicial, que era `armasLendarias`.

  const armasLendariasUnicas = [...new Set(armasLendarias)]

  console.log(armasLendariasUnicas)
  // Resultado: [ 'Martelo Glorificado', 'Espada Sagrada', 'Escudo dos Deuses' ]

Nesse caso fizemos tudo numa só linha, mas podemos deixar mais legível e organizado fazendo assim:

const setUnicoDeArmas = new Set(armasLendarias);
const armasLendariasUnicas = [...setUnicoDeArmas]

console.log(armasLendariasUnicas)
// O resultado é o mesmo

Lembrando que essa é a maneira mais fácil, mas como sabemos (se você não sabia, aprenda isso agora), na programação podemos atingir um resultado de inúmeras maneiras diferentes, as vezes com alguns trade-offs (no nosso PT-BR, com algumas trocas). No caso do Set(), em navegadores muito antigos não irá funcionar, dados as limitações técnicas destes Olá Internet Explorer!. Mas para não deixar você sem o conhecimento, abaixo segue mais algumas formas de fazer essa filtragem.

Usando o .filter()

O .filter() é uma High Order Function, que futuramente será explorado aqui no blog, mas que basicamente são funções que aceitam outras funções como argumentos, evitando manter estados e focando na imutabilidade. Veja como ficaria usando o filter:

  // Ainda considerando a nossa array de armas lendárias `armasLendarias`:

  // 1. Criamos uma função que vai ser um helper para essas operações:
  const removeDuplicados = (arr) => {
    return arr.filter((item, index) => arr.indexOf(item) === index);
  };

  console.log(removeDuplicados(armasLendarias));

Leia mais sobre arrow functions aqui: Entendendo Arrow Functions no Javascript

Os trade-offs desse tipo seria que também não funcionaria em browsers muito antigos (em relação a isso, não se preocupe, você poderá usar o Can I Use It?, um ótimo lugar para ver quais versões dos browsers suportam algo específico), porém temos um ganho: agora nossa função é reutilizável e adaptando um pouco mais podemos fazer um sistema de filtragem muito mais profundo, considerando aninhamentos mais complexos.

Usando bibliotecas externas (Underscore.js)

Ainda, podemos usar alguma library (bibliotecas) de terceiros para nos ajudar a alcançar nosso objetivo. Acesse o site deles e veja a forma mais adequada para o seu uso aqui: Underscore.js. O código ficaria assim:

  // No node, importamos a biblioteca usando o `require` e no  caso do underscore
  // por convenção (mas no obrigatoriamente) atribuimos o caractere de
  // _underline_, (ou "traço baixo", ou ainda "sublinhado"), já que underscore
  // significa isso: 
  const _ = require('underscore');

  // e aqui chamamos a biblioteca `_` e acessamos o método `uniq`, que aceita
  // um parametro que é a nossa array:
  console.log( _.uniq(armasLendarias) )

Ainda assim existem mais formas de para remover itens duplicados, porém essas são as principais e lhe darão um norte para o que você precisa alcançar. Espero ter te ajudado, até o próximo post!