Map + array de IDs para acelerar búsquedas

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:14

Map + array de IDs para acelerar búsquedas

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 23 de 24

Clase 23 / 24

Recursos

Adopta una estrategia clara para acelerar búsquedas y simplificar el CRUD en JavaScript: usar Map en lugar de array dentro de un repositorio basado en localStorage. Este enfoque prioriza consultas instantáneas, reduce código repetitivo y, con un array de IDs, conserva el orden para features como drag and drop.

¿Por qué cambiar de array a map en localStorage?

Usar map acelera las búsquedas y simplifica la lógica. Un array obliga a hacer find, findIndex o recorrer posiciones. Con map, un set agrega o actualiza, get recupera al instante y delete elimina sin calcular índices. Sin embargo, para la persistencia en localStorage, hay que transformar el map a array para serializarlo, y rehidratarlo luego en memoria.

Ventaja clave: consultas O(1) con get y has.
Persistencia: serializar con un array y deserializar reconstruyendo el map.
Sin duplicados: map evita claves repetidas por naturaleza.
Trade-off: se pierde el orden del array; se recupera con un array de IDs.

¿Cómo se serializa y rehidrata el map?

Guardar en localStorage como array de values del map.
Al recargar, rehidratar: recorrer el array y hacer set(id, entidad) en el map.

// Guardar (saveStorage)
const saveStorage = () => {
  const payload = Array.from(habitsMap.values());
  localStorage.setItem('habits', JSON.stringify(payload));
};

// Cargar (rehidratar)
const habitsMap = new Map();
const saved = JSON.parse(localStorage.getItem('habits') ?? '[]');
saved.forEach(habit => {
  habitsMap.set(habit.id, habit);
});

¿Cómo se simplifica el CRUD con map?

Crear/actualizar: set(id, entidad) actualiza o inserta.
Leer: get(id) retorna la entidad o null/undefined.
Verificar existencia: has(id).
Eliminar: delete(id). Sin cálculos de posición.
Limpiar todo: clear().

// Create/Update
habitsMap.set(habit.id, habit);
saveStorage();

// Read
const habit = habitsMap.get(id) ?? null;

// Delete
if (habitsMap.has(id)) {
  habitsMap.delete(id);
  saveStorage();
}

¿Cómo mantener el orden y soportar reordenamiento?

Como map no garantiza orden, un array de IDs conserva posiciones para listar, filtrar y reordenar. Este patrón permite features como drag and drop sin perder la velocidad del map.

Mantén solo IDs en un array, no objetos.
Al crear: push(id) para registrar la posición.
Al eliminar: filter para sacar el id.
Al listar: recorre orderIds y resuelve con map.get(id).

// Estado adicional para el orden
let orderIds = [];

// Crear
habitsMap.set(habit.id, habit);
orderIds.push(habit.id);
saveStorage();

// Eliminar
if (habitsMap.delete(id)) {
  orderIds = orderIds.filter(x => x !== id);
  saveStorage();
}

// Listar (ordenado)
const list = orderIds
  .map(id => habitsMap.get(id))
  .filter(Boolean);

¿Qué implica en list, filtros y map?

list ahora parte de orderIds para respetar posiciones.
Puedes reordenar moviendo IDs dentro de orderIds.
Luego aplicas filter, map o reduce sobre el array resultante.
Ventaja: orden estable y consultas rápidas.
Costo: sincronizar orderIds en create/delete y reordenamientos.

¿Cuándo usar map y cuándo es sobre ingeniería?

La técnica map + array de IDs es potente, pero su valor aparece con volúmenes grandes. Con pocos datos (menos de ~200), el beneficio puede ser imperceptible y añadir complejidad innecesaria. En contextos con muchísimos eventos o métricas, lo adecuado suele ser una base de datos con indexamiento o de series de tiempo.

Úsalo si manejas datos intensivos en frontend tipo dashboards con muchas interacciones.
En casos pequeños (hábitos de usuario): puede ser sobre ingeniería.
Para grandes volúmenes: opciones como ClickHouse o TigerData están pensadas para consultas rápidas y análisis de eventos o finanzas.
En manejo de estado, verás el patrón map + array de IDs en librerías como Redux o NgRx.

¿Te gustaría comentar cómo mantienes el orden y la persistencia en tus listas, o qué patrón usas para acelerar búsquedas en producción?

Resumen

¿Por qué cambiar de array a map en localStorage?

Ventaja clave: consultas O(1) con get y has.
Persistencia: serializar con un array y deserializar reconstruyendo el map.
Sin duplicados: map evita claves repetidas por naturaleza.
Trade-off: se pierde el orden del array; se recupera con un array de IDs.

¿Cómo se serializa y rehidrata el map?

Guardar en localStorage como array de values del map.
Al recargar, rehidratar: recorrer el array y hacer set(id, entidad) en el map.

// Guardar (saveStorage)
const saveStorage = () => {
  const payload = Array.from(habitsMap.values());
  localStorage.setItem('habits', JSON.stringify(payload));
};

// Cargar (rehidratar)
const habitsMap = new Map();
const saved = JSON.parse(localStorage.getItem('habits') ?? '[]');
saved.forEach(habit => {
  habitsMap.set(habit.id, habit);
});

¿Cómo se simplifica el CRUD con map?

Crear/actualizar: set(id, entidad) actualiza o inserta.
Leer: get(id) retorna la entidad o null/undefined.
Verificar existencia: has(id).
Eliminar: delete(id). Sin cálculos de posición.
Limpiar todo: clear().

// Create/Update
habitsMap.set(habit.id, habit);
saveStorage();

// Read
const habit = habitsMap.get(id) ?? null;

// Delete
if (habitsMap.has(id)) {
  habitsMap.delete(id);
  saveStorage();
}

¿Cómo mantener el orden y soportar reordenamiento?

Como map no garantiza orden, un array de IDs conserva posiciones para listar, filtrar y reordenar. Este patrón permite features como drag and drop sin perder la velocidad del map.

Mantén solo IDs en un array, no objetos.
Al crear: push(id) para registrar la posición.
Al eliminar: filter para sacar el id.
Al listar: recorre orderIds y resuelve con map.get(id).

// Estado adicional para el orden
let orderIds = [];

// Crear
habitsMap.set(habit.id, habit);
orderIds.push(habit.id);
saveStorage();

// Eliminar
if (habitsMap.delete(id)) {
  orderIds = orderIds.filter(x => x !== id);
  saveStorage();
}

// Listar (ordenado)
const list = orderIds
  .map(id => habitsMap.get(id))
  .filter(Boolean);

¿Qué implica en list, filtros y map?

list ahora parte de orderIds para respetar posiciones.
Puedes reordenar moviendo IDs dentro de orderIds.
Luego aplicas filter, map o reduce sobre el array resultante.
Ventaja: orden estable y consultas rápidas.
Costo: sincronizar orderIds en create/delete y reordenamientos.

¿Cuándo usar map y cuándo es sobre ingeniería?

Úsalo si manejas datos intensivos en frontend tipo dashboards con muchas interacciones.
En casos pequeños (hábitos de usuario): puede ser sobre ingeniería.
Para grandes volúmenes: opciones como ClickHouse o TigerData están pensadas para consultas rápidas y análisis de eventos o finanzas.
En manejo de estado, verás el patrón map + array de IDs en librerías como Redux o NgRx.

¿Te gustaría comentar cómo mantienes el orden y la persistencia en tus listas, o qué patrón usas para acelerar búsquedas en producción?

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Map + array de IDs para acelerar búsquedas

Progreso del curso

Grabacion

Recursos

Recursos