En este tutorial, aprenderás tres maneras de filtrar elementos duplicados en un array y obtener uno nuevo con valores únicos.

Usando Set

Este método es mi favorito por su simpleza y el poco espacio que necesita. 😁

const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = [...new Set(animals)] 
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]

Un Set es una colección de elemento únicos

Cuando un nuevo Set se crea a través de un Array que contiene elementos duplicados, el constructor se encarga de mantener solo los elementos únicos.

const uniqueAnimals = new Set(animals) // Set(5) {'🐶','🐭','🦊','🐻','🦁', __proto__}

Gracias al spread operator podemos convertir los elementos de nuestro Set a un Array de nuevo.

[...new Set(animals)] // [ '🐶', '🐭', '🦊', '🐻', '🦁' ]

Usando filter e indexOf()

const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = animals.filter(
  (animal, index) => animals.indexOf(animal) === index
) 
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]

El método filter devuelve un nuevo Array con los valores que cumplen con un criterio

const uniqueAnimals = animals.filter(animal => animal === '🦊') 
// [ '🦊' ]

El método indexOf nos devuelve el primer índice en el que se puede encontrar el elemento dado.

const uniqueAnimals = animals.indexOf('🦊') 
// 3

Combinando estos dos métodos, cuando un elemento duplicado es encontrado por primera vez, su índice coincide con la primera ocurrencia y el elemento es agregado a nuestro array. Al contrario de los siguientes índices del mismo elemento que no cumplirán con el índice de la primera ocurrencia, por lo tanto no cumplen con el criterio y no son devueltos.

Usando forEach e includes

const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = []
animals.forEach(animal => !uniqueAnimals.includes(animal) && uniqueAnimals.push(animal))
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]

ForEach nos permite recorrer el arreglo del principio a fin.

El método includes determina si un array incluye un elemento determinado

animals.includes('🐭') // true
animals.includes('🐸') // false

A medida que recorremos nuestro array animals, comprobamos si el elemento existe en nuestro nuevo array para determinar si debemos agregarlo o no. ¡Al final dispondremos de un nuevo array con animales únicos!