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á:

• 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í:

/*
	Usar filter
	Visita: parzibyte.me
*/
let arregloConRepetidos = [1, 2, 3, 4, 1, 2, 2, 2, 10];
console.log("Con repetidos es:", arregloConRepetidos);
let sinRepetidos = arregloConRepetidos.filter((valor, indiceActual, arreglo) => arreglo.indexOf(valor) === indiceActual);

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í:

let sinRepetidos = arregloConRepetidos.filter(function(valor, indiceActual, arreglo) {
    let indiceAlBuscar = arreglo.indexOf(valor);
    if (indiceActual === indiceAlBuscar) {
        return true;
    } else {
        return false;
    }
});

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

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í:

/*
	Convertirlo a conjunto y después a arreglo
	Visita: parzibyte.me
*/
let arregloConRepetidos = [1, 2, 3, 4, 1, 2, 2, 2, 10];
console.log("Con repetidos es:", arregloConRepetidos);
let sinRepetidos = [...new Set(arregloConRepetidos)];
console.log("Sin repetidos es:", sinRepetidos);

La variable sinRepetidos tendrá el arreglo limpio.

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:

/*
Usar filter para eliminar objetos repetidos
Visita: parzibyte.me
*/
let arregloConRepetidos = [
    //Este está repetido:
    {
        nombre: "Snowball",
        tipo: "Gato",
        edad: 1,
    },
    {
        nombre: "Maggie",
        tipo: "Perro",
        edad: 3,
    },
    // También este:
    {
        nombre: "Guayaba",
        tipo: "Perro",
        edad: 1,
    },
    {
        nombre: "Guayaba",
        tipo: "Perro",
        edad: 1,
    },
    {
        nombre: "Snowball",
        tipo: "Gato",
        edad: 1,
    },
];
console.log("Con repetidos es:", arregloConRepetidos);
let sinRepetidos = arregloConRepetidos.filter((valorActual, indiceActual, arreglo) => {
    //Podríamos omitir el return y hacerlo en una línea, pero se vería menos legible
    return arreglo.findIndex(valorDelArreglo => JSON.stringify(valorDelArreglo) === JSON.stringify(valorActual)) === indiceActual
});
console.log("Sin repetidos es:", sinRepetidos);

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.

Funciona para otros objetos, y compara todas las propiedades.