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.
Explicado de otra forma, lo que haremos será:
Vamos allá.
Te invito a que veas cómo funciona indexOf y findIndex en JavaScript, pues es necesario para que entiendas lo que haremos aquí.
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.
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í.
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.
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.
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.
Ver comentarios
Salvado por la campana.
Muchas gracias amigo.
Buen aporte.
¡Gracias!, me ha servido de ayuda. ; - )