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.

No te vayas sin seguirme en Twitter, Facebook y GitHub, así me motivas a escribir más posts.
Igualmente te invito a suscribirte en la parte superior derecha escribiendo tu correo en el formulario.
Si tienes dudas déjalas en un comentario


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: