Sergio Serrano
Sergio Serrano's Blog

Sergio Serrano's Blog

Remover elementos duplicados en un array

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

Sergio Serrano's photo
Sergio Serrano
·Aug 25, 2021·

2 min read

Remover elementos duplicados en un array

Subscribe to my newsletter and never miss my upcoming articles

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!

 
Share this