Cuando trabajamos con arrays en JavaScript, es común encontrarnos con valores duplicados. Ya sea que estés procesando datos de una API, analizando formularios o manipulando información de bases de datos, necesitarás una forma eficiente de limpiar tu array y dejar solo valores únicos.
En esta guía, exploraremos diferentes maneras de eliminar duplicados en JavaScript utilizando métodos nativos y técnicas avanzadas.
1. Usando Set: La forma más sencilla
El objeto Set de JavaScript nos permite almacenar valores únicos, por lo que es una de las formas más rápidas y simples para eliminar duplicados.
<!-- Bloque de código eliminado por incompatibilidad -->¿Cómo funciona?
- Set almacena solo valores únicos.
- Convertimos el Set de nuevo en un array usando el operador spread (...).
2. Usando filter: Más flexibilidad
Si necesitas un poco más de control sobre cómo eliminar los duplicados, filter puede ser una excelente opción.
<!-- Bloque de código eliminado por incompatibilidad -->¿Cómo funciona?
- indexOf(valor) devuelve la primera posición del valor en el array.
- Si el índice actual (indice) coincide con indexOf(valor), significa que es la primera vez que aparece en el array.
3. Usando reduce: Para un control total
El método reduce nos permite construir un nuevo array desde cero, verificando cada elemento antes de agregarlo.
<!-- Bloque de código eliminado por incompatibilidad -->¿Cómo funciona?
- Inicializamos un array vacío (acumulador).
- Verificamos si el valor ya está en el acumulador antes de agregarlo.
4. Eliminando duplicados en arrays de objetos
Si tienes un array de objetos, necesitarás una estrategia diferente para eliminar duplicados basados en una propiedad específica.
<!-- Bloque de código eliminado por incompatibilidad -->¿Cómo funciona?
- findIndex() busca la primera ocurrencia de cada nombre en el array.
- filter() deja solo la primera ocurrencia y descarta el resto.
Eliminar duplicados en JavaScript es una tarea sencilla cuando conoces las herramientas adecuadas. Para un rendimiento óptimo, elige la mejor técnica según tu caso:
Set() si buscas simplicidad y rendimiento.
filter() si quieres más flexibilidad.
reduce() si necesitas un control total sobre el proceso.
findIndex() si trabajas con arrays de objetos.
Ahora que conoces estas estrategias, ¿cuál de ellas usarás en tu próximo proyecto?