Cómo eliminar valores duplicados en un array con JavaScript

Lo mismo que a la hora de contar duplicados en un array, siempre que quiero conseguir un array con valores únicos, eliminando los duplicados con JavaScript, tengo que buscar cómo hacerlo y acabar copiando de SO.

Cómo elimino duplicados de un array usando JS

Dejo aquí recogidas las dos formas que suelo usar y seguro que te sirven:

1. Usando un Set

Introducidos con ES6, los objetos Set almacenan valores únicos, tanto primitivos como objetos. Lo combinamos con un spread y tenemos una forma muy concisa y clara de eliminar duplicados de un array:

const arrayWithRepetition =
  ['a', 'a', 'z', 't', 'm', 'm', 'm', 'm', 't', 'a', 'm', 'm', 'a', 'm' ];

const uniqueValues = [...new Set(arrayWithRepetition)];

// uniqueValues:
// [ 'a', 'z', 't', 'm' ]

Creamos un nuevo Set a partir del array con repeticiones, y esto elimina los duplicados. Luego lo expandimos en un array, y terminado.

El Set respetará el orden inicial de los elementos a medida que los encuentra en el array original. Si quieres otro orden, puedes reordenar tanto el original como el resultado.

2. Usando un array auxiliar

Básicamente mantenemos un array donde almacenamos los valores encontrados, y para cada valor comprobamos si ya lo hemos visto anteriormente. Si no está en el array almacén, lo metemos.

const arrayWithRepetition =
  ['a', 'a', 'z', 't', 'm', 'm', 'm', 'm', 't', 'a', 'm', 'm', 'a', 'm' ];

function getUniqueValues(arr) {
  const existing = [];

  // si ya existía, retorna false y no incluye `value` en el resultado
  // sino, mete el valor en `existing`y retorna su índice (truthy)
  return arr.filter((value) =>
    existing.includes(value) ? false : existing.push(value)
  );
}

// getUniqueValues(arrayWithRepetition):
// [ 'a', 'z', 't', 'm' ]

Tiene sus defectos, seguramente tendrás problemas si los valores de tu array no son primitivos, pero funciona bien para lo demás.

Si programas con TypeScript

Si quieres usar este segundo sistema y programas en TypeScript, tendrás que definir los tipos de tu función getUniqueValues(), o TS se quejará:

Excepto que quieras crear una función muy versátil y reutilizable en diferentes casos (en cuyo caso deberías usar Genéricos), puedes definir el tipo del array que pasarás y con eso lo tienes todo solucionado:

// ...
function getUniqueValues(arr: string[]) {
  // como meterás valores únicos de `arr`, tiene el mismo tipo
  const existing: string[] = [];

  // si ya existía, retorna false y no incluye `value` en el resultado
  // sino, mete el valor en `existing`y retorna su índice (truthy)
  return arr.filter((value) =>
    existing.includes(value) ? false : existing.push(value)
  );
}

Hay probalemente decenas de métodos para conseguir un array con valores únicos usando JS.

Si tienes un array con millones de valores, seguramente te interese buscar el sistema más eficiente.

Ya sabes que estoy encantado de leer cómo lo haces tú, intento aprender cosas nuevas todos los días, así que cuéntame!

actualizado el 24 de mayo, 2022
publicación inicial el 4 de octubre, 2020 #javascript