Como obter valores únicos em um array JavaScript

Neste artigo você vai aprender como obter valores únicos em um array JavaScript – sem utilizar qualquer biblioteca, apenas com recursos da linguagem pura

Fala galera, beleza? Bora aprender mais sobre os arrays de JavaScript e como retirar apenas os valores únicos!

Uma solução simples e eficaz é utilizando a função filter do JavaScript

A partir desta função é possível criar um filtro de fato, retirando apenas os elementos que nos interessam, baseado em uma condição

Então uma solução muito conhecida é:

function unique(value, index, self) { 
    return self.indexOf(value) === index;
}


var array = ['a', 'b', 'b', 'c', 'c'];

var unique = array.filter(unique);

console.log(unique);

Ela foi retirada do Stack Over Flow, deste post

Desta forma vamos receber apenas os valores únicos, pois no return ele verifica se o valor do primeiro índice encontrador é o mesmo do índice atual

E como isso pode ajudar?

Por que sempre é verificado o primeiro valor, então é impossível repetir o índice caso não seja o primeiro

Inibindo assim as demais repetições pelo resto do array, legal né? 😀

Com ES6

Com os novos recursos do JavaScript ES6 podemos também facilitar esta operação de itens únicos no array

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Uma das formas é utilizando o Set

Veja um exemplo:

const array = ['a', 'b', 'b', 'c', 'c'];

const unique = [...new Set(array)];

console.log(unique)

De forma mais simples ainda, apenas os elementos que contem valores únicos serão atribuídos a variável unique

Conclusão

Neste artigo vimos como obter valores únicos em um array de duas maneiras

Na primeira vimos a utilização da função filter, criando uma nova função que retorna apenas os elementos únicos

Depois vimos com Set, um operador da versão ES6 do JavaScript

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Filter com indexOf ou Set: qual usar no dia a dia?

As duas formas funcionam, mas elas trabalham de um jeito bem diferente por baixo do capô

No filter com indexOf, pra CADA item do array o JavaScript varre o array de novo procurando a primeira ocorrência daquele valor

Array pequeno? tranquilo

Array grande? esse trabalho cresce MUITO rápido, porque é uma varredura dentro da outra

Já o Set guarda o que já viu e só pergunta "esse valor aqui já apareceu?"

Por isso o Set virou o caminho padrão pra listas simples, e o filter segue útil quando tu precisa de unicidade E outra regra no mesmo passo

// só os únicos

// únicos E que passam em outra regra

console.log(unicos, unicosFiltrados)

Bora ver os casos que o Set não resolve sozinho? 😀

E quando o array é de objetos?

Aqui mora a pegadinha que quebra muita gente

O Set compara valores, e dois objetos com o MESMO conteúdo ainda são dois objetos diferentes na memória

Ou seja, isso aqui não remove nada:

const usuarios = [
{ id: 1, nome: 'Ana' },
{ id: 2, nome: 'Bia' },
{ id: 1, nome: 'Ana' }
]

O que tu quer na real é remover duplicado por uma PROPRIEDADE (o id, o email, o slug)

E pra isso o Map cai como uma luva, porque ele guarda pares de chave e valor, e chave repetida sobrescreve a anterior

Se você já mexeu com objeto de configuração, a ideia é a mesma: a última chave igual vence

console.log(unicosPorId) // 2 itens

Se liga que essa versão fica com o ÚLTIMO objeto de cada id

Quer ficar com o primeiro? é só inverter antes: usuarios.slice().reverse().map(...)

Esse é o caso mais comum do dia a dia hoje, porque quase todo array que a gente trata vem de uma resposta de API, cheio de registro repetido

Cuidado: nem todo "repetido" é repetido

Antes de sair aplicando, dois detalhes que fazem perder tempo

Primeiro: tipo importa

O número 1 e a string ‘1’ são valores diferentes, então os dois sobrevivem no resultado

Segundo: NaN se comporta de um jeito em cada solução

O Set trata NaN como um valor só

Já o indexOf NUNCA encontra NaN (porque NaN não é igual a NaN na comparação), então a solução do filter derruba os dois

Tome cuidado com isso em array que veio de parseInt ou de cálculo com dado sujo, beleza?

Como juntar dois arrays sem repetir valores?

Essa é a dúvida que quase sempre vem logo depois da primeira

Não precisa de laço nenhum, é o mesmo Set aplicado na junção dos dois

E a ordem se mantém: o Set guarda os valores na ordem em que cada um apareceu pela primeira vez

Um detalhe do exemplo com filter:

Repara que ali a função e a variável têm o MESMO nome (unique)

Aquilo roda por causa do hoisting da declaração de função, mas é prato cheio pra confusão na hora de adaptar no teu projeto

Dá nomes diferentes e a leitura já melhora:

function ehUnico(valor, indice, self) {
return self.indexOf(valor) === indice
}

const unicos = array.filter(ehUnico)

console.log(unicos)

Já me ferrei com esse tipo de nome sombreado, e o pior é que o bug aparece semanas depois hehe

Filter com indexOf ou Set: qual usar no dia a dia?

As duas formas funcionam, mas elas trabalham de um jeito bem diferente por baixo do capô

No filter com indexOf, pra CADA item do array o JavaScript varre o array de novo procurando a primeira ocorrência daquele valor

Array pequeno? tranquilo

Array grande? esse trabalho cresce MUITO rápido, porque é uma varredura dentro da outra

Já o Set guarda o que já viu e só pergunta "esse valor aqui já apareceu?"

Por isso o Set virou o caminho padrão pra listas simples, e o filter segue útil quando tu precisa de unicidade E outra regra no mesmo passo

// só os únicos

// únicos E que passam em outra regra

console.log(unicos, unicosFiltrados)

Bora ver os casos que o Set não resolve sozinho? 😀

E quando o array é de objetos?

Aqui mora a pegadinha que quebra muita gente

O Set compara valores, e dois objetos com o MESMO conteúdo ainda são dois objetos diferentes na memória

Ou seja, isso aqui não remove nada:

const usuarios = [
{ id: 1, nome: 'Ana' },
{ id: 2, nome: 'Bia' },
{ id: 1, nome: 'Ana' }
]

O que tu quer na real é remover duplicado por uma PROPRIEDADE (o id, o email, o slug)

E pra isso o Map cai como uma luva, porque ele guarda pares de chave e valor, e chave repetida sobrescreve a anterior

Se você já mexeu com objeto de configuração, a ideia é a mesma: a última chave igual vence

console.log(unicosPorId) // 2 itens

Se liga que essa versão fica com o ÚLTIMO objeto de cada id

Quer ficar com o primeiro? é só inverter antes: usuarios.slice().reverse().map(...)

Esse é o caso mais comum do dia a dia hoje, porque quase todo array que a gente trata vem de uma resposta de API, cheio de registro repetido

Cuidado: nem todo "repetido" é repetido

Antes de sair aplicando, dois detalhes que fazem perder tempo

Primeiro: tipo importa

O número 1 e a string ‘1’ são valores diferentes, então os dois sobrevivem no resultado

Segundo: NaN se comporta de um jeito em cada solução

O Set trata NaN como um valor só

Já o indexOf NUNCA encontra NaN (porque NaN não é igual a NaN na comparação), então a solução do filter derruba os dois

Tome cuidado com isso em array que veio de parseInt ou de cálculo com dado sujo, beleza?

Como juntar dois arrays sem repetir valores?

Essa é a dúvida que quase sempre vem logo depois da primeira

Não precisa de laço nenhum, é o mesmo Set aplicado na junção dos dois

E a ordem se mantém: o Set guarda os valores na ordem em que cada um apareceu pela primeira vez

Um detalhe do exemplo com filter:

Repara que ali a função e a variável têm o MESMO nome (unique)

Aquilo roda por causa do hoisting da declaração de função, mas é prato cheio pra confusão na hora de adaptar no teu projeto

Dá nomes diferentes e a leitura já melhora:

function ehUnico(valor, indice, self) {
return self.indexOf(valor) === indice
}

const unicos = array.filter(ehUnico)

console.log(unicos)

Já me ferrei com esse tipo de nome sombreado, e o pior é que o bug aparece semanas depois hehe