Eliminar duplicados de un arreglo en JavaScript

Eliminar elementos duplicados de arreglos en JavaScript

En este post veremos cómo eliminar elementos repetidos o duplicados de un arreglo en JavaScript. Para esto, no nos limitaremos a arreglos con tipos de datos simples; sino también arreglos de objetos.

Eliminar duplicados de un arreglo en JavaScript
Eliminar duplicados de un arreglo en JavaScript

Explicado de otra forma, lo que haremos será:

  • Ver cómo eliminar datos primitivos (cadena, entero, booleano, etcétera) repetidos de arreglos en JavaScript
  • Eliminar objetos repetidos, ya sea basados en una propiedad o comparándolos en profundidad.

Vamos allá.

Lecturas recomendadas

Te invito a que veas cómo funciona indexOf y findIndex en JavaScript, pues es necesario para que entiendas lo que haremos aquí.

Quitar duplicados de arreglo, con datos simples

Primero veamos cómo eliminar duplicados de un arreglo pero cuando no son objetos. Hay muchas formas, puedes usar la que tú desees pero te recomiendo la que utiliza conjuntos.

Estos métodos funcionan para strings o cadenas, números y booleanos.

Método 1: filtrando el arreglo

Nota: este método tiene mayor compatibilidad con navegadores viejos.

La primera forma es haciendo un filter; el cual filtra un arreglo y regresa uno nuevo con los elementos que hayan pasado el filtro.

Sabiendo esto, podemos filtrar un arreglo, con la condición de que ese valor no se repita en el mismo. ¿Y cómo sabemos si ese valor ya existe? utilizamos indexOf, que devuelve el índice del primer elemento que coincida con la búsqueda en un arreglo.

En este caso, únicamente si el índice actual (en el filter) es igual al índice que devuelve la función dejamos pasar el valor.

Explicado con otras palabras, solamente dejamos pasar el valor si es la primera vez que aparece, en caso de que no, lo descartamos, porque ya existía anteriormente.

El código queda así:

Estamos usando funciones flecha, además de simplificar el código, pero lo importante es la función que definimos en el filter. Escrito en otras versiones antiguas (aunque usamos let en JS), y con un poco más de código, se ve así:

Sea cual sea que uses, al final eliminará los valores duplicados en un arreglo. Puedes probarlo aquí.

Método 2: convirtiéndolo a un conjunto y luego en arreglo

Este método es el que prefiero a la hora de eliminar duplicados de un arreglo. Primero, convertimos el arreglo a conjunto, así:

let conjunto = new Set(arreglo);

Un conjunto o set en JavaScript no puede tener repetidos; así que al crear un conjunto con un arreglo de valores repetidos, los mismos se eliminarán y quedarán elementos sin repetirse.

Ahora, para convertir ese conjunto a un arreglo de nuevo, usamos el operador de propagación que nos permite, en términos simples, convertir el conjunto en un arreglo.

El código completo que puedes probar queda así:

La variable sinRepetidos tendrá el arreglo limpio. Pruébalo aquí.

Por cierto, igualmente funciona para cadenas (distingue mayúsculas y minúsculas), booleanos y flotantes.

Eliminar duplicados de arreglo que tiene objetos

El motivo de este post es ese: cómo limpiar un arreglo de objetos, de manera que no queden duplicados o repetidos. Nuevamente te digo que leas cómo buscar el índice de un objeto en un arreglo, pues es esencial para que entiendas esto.

Dejo el código y lo explico más abajo:

Un poco largo, pero es por la definición del arreglo para el ejemplo. Todo es exactamente igual a cuando filtrábamos arriba, lo que cambia es la búsqueda del índice.

Aquí viene la parte compleja en donde buscamos el índice, para ello usamos findIndex en donde convertimos a JSON tanto el valor que nos da filter como el valor que nos da findIndex.

Puedes probarlo aquí.

Funciona para otros objetos, y compara todas las propiedades.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

2 comentarios en “Eliminar elementos duplicados de arreglos en JavaScript”

Dejar un comentario