Arrays

Remover valores duplicados de un arreglo en JavaScript

En el caso que necesite remover los valores duplicados de un arreglo en JavaScript puedes hacer uso del metodo reduce o el tipo de datos Set


Remover valores duplicados de un arreglo en JavaScript

Digamos que tienes un array que contiene multiples elementos de tipos primitivos como numeros o cadenas de caracteres y que algunos de estos elementos se encuentran repetidos como en el siguiente ejemplo:

const personas = ["Luis","Maria","Andres","Ana","Maria"]; //Maria esta repetida

Existen diversas formas para remover los nombres duplicados y aqui primero te mostrare una forma complicada pero que puede llegar a ser muy flexible y útil.

Arra.prototype.reduce()

El metodo reduce puede ser un poco dificil de entender al principio pero es un metodo muy poderoso.

Todo arreglo en JavaScript tiene acceso a este método el cual funciona muy similar al metodo map() con una distintiva diferencia. El primer argumento de este metodo es una funcion la cual a su vez recibe dos argumentos el primero conocido como el "acumulador" y sera el resultado que el metodo regresa al final de la ejecución y el segundo argumento de la funcion "callback" es el valor actual de cada elemento del arreglo dentro del ciclo.

El segundo argumento del método reduce() es es el valor inicial del acumulador. En nuestro caso como queremos construir un nuevo array con elementos únicos el valor inicial del método sera un arreglo vacío [ ].

Para este propósito podemos utilizar este metodo para generar un array con elementos unicos de la siguiente manera:

const personas = ["Luis","Maria","Andres","Ana","Maria"]; //Maria esta repetida

const personasUnicas = personas.reduce((acumulador,persona)=>{
    return !acumulador.includes(persona) ? acumulador.concat(persona) : acumulador;
        
},[]);

console.log(personasUnicas);// ["Luis","Maria","Andres","Ana"];

El código anterior parece más complicado de lo que es, pero si lo analizamos le encontraras la lógica.

Invocamos el método reduce sobre el arreglo original "personas" el método toma una función y el valor inicial de nuestro acumulador que es un array vacio donde pondremos a las personas únicas.

Dentro del callback en esta linea con la ayuda de un operador ternario verificamos si el nombre ya existe en el array regresamos el mismo array y no actualizamos el valor del acumulador pero si el nombre no existe en la nueva lista, regresamos una copia del acumulador y le agregamos el nombre.

//........

return !acumulador.includes(persona) ? acumulador.concat(persona) : acumulador;

//.........

Y al final obtendras una copia del arreglo con nombres únicos.

Esta forma te parecera algo complicada, pero puede llegar a ser  muy flexible ya que la puedes usar para comparar propiedades de objetos.

Clase Set

Y ahora te muestro una manera muy facil:

const personas = ["Luis","Maria","Andres","Ana","Maria"]; //Maria esta repetida
const personasUnicas = [...new Set(personas)];

Asi de sencillo! La clase set es un nuevo tipo de dato introducido en ES6, y se parece mucho a un array pero su principal característica es que no puede tener elementos repetidos.

Al inicializar set con un arreglo como parametro, este automaticamente remueve los valores duplicados. Y regresa un valor del tipo Set el cual podemos destructurar con el operador ... para crear un nuevo array con valores únicos. Este método funciona con cualquier tipo de arreglo de valores primitivos.

Profile

Suscríbete

Si quieres mantenerte al dia con las ultimas novedades del blog, participar en concursos y tener acceso a contenido exclusivo, no olvides suscribirte.

Leer más


Desarrollo Web con VS Code 📝
Promesas en JavaScript
© Copyright 2020, Kervin Vasquez