4 formas de remover elementos duplicados de un arreglo con Javascript

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

Remove elementos duplicados de un arreglo es una tarea de manipulación de arreglos bastante común, y para ello Javascript ofrece diferentes alternativas. Puedes utilizar una mezcla de métodos como Array.filter y Array.indexOf o un método más complejo y más flexible como Array.reduce o un simple Array.foreEach que te permite iterar sobre tu arreglo de manera imperativa. O incluso utilizar estructuras de datos más complejas como Set

Matías Hernández: [0:00] Eliminar duplicado con arreglo es una tarea común. Puedes utilizar el elemento Array.filter junto con Array.indexOf para crear un nuevo arreglo sin elementos duplicados. Y Array.filter crea un nuevo arreglo con los elementos que compran la condición dada. Es decir, si el elemento pasa a la condición se retorna true, indicando que este será agregado al nuevo arreglo.

[0:19] Array.indexOf retorna al primer índice del arreglo en donde se encuentre un elemento dado. En este caso, podemos identificar un duplicado cuando el índice no es igual al resultado de indexOf. Así obtenemos un nuevo arreglo que podemos ver en pantalla sin duplicados.

[0:33] Entonces bien, puedes utilizar el objeto Set. Set es una estructura de datos que almacena valores únicos. Para esto simplemente creamos una offset basada en nuestro arreglo original y después compartimos dicho Set a un arreglo nuevamente utilizando la sintaxis spread. Esto nos da como resultado un nuevo arreglo sin valores duplicados.

[0:52] El método Array.reduce también puede ser utilizado con el mismo propósito. Array.reduce ejecuta una función sobre cada elemento y retorna un valor como método del resultado. Array.reduce recibe dos parámetros, una función llamada reductora que tiene al menos dos argumentos, el acumulador y el ítem actual de la iteración, y como segundo parámetro el valor inicial, en este caso un arreglo vacío.

[1:15] Para este ejemplo, la función utilizada simplemente revisa si el ítem actual se encuentra dentro del resultado identificado por la variable acc. De no estarlo, simplemente agrega el valor al acumulador. Como resultado tenemos un nuevo arreglo sin valores duplicados.

[1:30] Array.forEach es otra forma de iterar sobre el arreglo, y como tal también permite remover duplicados, pero de una forma más imperativa. Aquí utilizamos un arreglo auxiliar para almacenar los elementos no duplicados. Y al iterar sobre el arreglo se utiliza un bloque condicional que verifica que el ítem no exista ya en el elemento de valores únicos utilizando Array.includes.

[1:50] En resumen, las opciones para eliminar duplicados son variadas, pero se sustentan en la misma premisa. El uso de iteraciones para corroborar si un elemento ya existe o no y el uso de estructura de datos más complejas como Set.

egghead
egghead
~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today