Remover valores duplicados de un arreglo en JavaScript

Desarrollador web con pasión por crear soluciones, experimentar y aprender cosas nuevas. Fan de las buenas películas y documentales.

Array.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.

Remover valores duplicados de un arreglo en JavaScript

Comments

More from this blog

De PSeInt al navegador: construyendo Codoritmo en público

Cómo integrar LangChain con GPT para tareas personalizadas

Cómo reducir el tamaño de un modelo LLM usando quantization

Crear tu primer Chatbot con LangChain y OpenAI

Por qué `NaN` no es igual a `NaN` y otras rarezas de JavaScript 🚩

Array.prototype.reduce()

Clase Set

Command Palette

Comments

More from this blog

Array.prototype.reduce()

Clase Set