CursosEmpresasBlogLiveConfPrecios

Aplanar arrays anidados con flat y flatMap

Clase 15 de 24 • Curso de Manipulación Avanzada de Datos con JavaScript

Resumen

Trabaja más rápido y con menos código al aplanar arrays anidados, transformar colecciones y eliminar duplicados en JavaScript. Aquí verás cómo combinar flat, map, flatMap, filter, indexOf, Set y Array.from para resolver casos comunes como matrices, duplicación de elementos y extracción de tags únicos.

¿Cómo aplanar arrays anidados con flat en JavaScript?

Cuando hay arrays anidados (matrices representadas como arrays de arrays), iterar y transformar se complica. Con el método flat(n) puedes aplanar hasta una profundidad específica. Si no sabes cuántos niveles hay, usa profundidad Infinity para obtener un solo nivel siempre.

  • flat con niveles: controla cuántos niveles aplanar.
  • flat con Infinity: aísla todos los valores en un único array.
  • reduce vs flat: con reduce también se puede, pero es más complejo de mantener.
// Aplanar por niveles o sin conocer la profundidad
const nested = [1, [2, [3, [4]]], 5];

nested.flat(1);       // aplanar un nivel
nested.flat(2);       // aplanar dos niveles
nested.flat(Infinity); // aplanar todos los niveles

¿Cómo multiplicar y aplanar con map, flat y flatMap?

El reto: dado [1, 2, 3], construir un nuevo array que intercale el original y su duplicado por 2: 1, 2, 2, 4, 3, 6. Con map puedes generar subarrays [n, n*2], pero el resultado queda anidado. Después, aplana con flat(1) o usa directamente flatMap.

  • map conserva la longitud: devuelve el mismo número de elementos que entra.
  • map + flat: transforma y luego aplanas un nivel.
  • flatMap: es como hacer map seguido de flat por defecto.
const nums = [1, 2, 3];

// map que genera subarrays y luego flat a un nivel
const resultWithFlat = nums.map(n => [n, n * 2]).flat();
// [1, 2, 2, 4, 3, 6]

// flatMap: map + flat(1)
const resultWithFlatMap = nums.flatMap(n => [n, n * 2]);
// [1, 2, 2, 4, 3, 6]

¿Qué patrón de transformación conviene concatenando métodos?

Encadena métodos en secuencia: transforma con map y aplana con flat. Este patrón es muy común para procesar datos. Similarmente, reduce suele usarse para agrupar o acumular resultados.

¿Qué reto debes resolver con flatloop?

Tienes un array de textos como: "Hola, mundo", "JavaScript es genial", "Aprende programación". Debes transformarlo en un solo array de un nivel con cada una de las palabras separadas y en orden. La salida debe ser todas las palabras en un único array. Comparte tu solución en comentarios.

¿Cómo obtener tags únicos con flatMap y set?

Supón un listado de posts con títulos y tags (p. ej., "Introducción a JavaScript", "CSS Grid", "APIs con Node.js"). Objetivo: obtener todos los tags únicos.

  • Extraer tags: usa flatMap para llevarlos a un solo nivel.
  • Eliminar duplicados con filter + indexOf: técnica directa con algo de lógica.
  • Eliminar duplicados con Set: aplica teoría de conjuntos; un Set no admite repetidos.
  • Volver a array: usa Array.from para recuperar un array.
const posts = [
  { title: 'Introducción a JavaScript', tags: ['JavaScript', 'API'] },
  { title: 'CSS Grid', tags: ['CSS', 'JavaScript'] },
  { title: 'APIs con Node.js', tags: ['API', 'Node.js'] }
];

// 1) extraer todos los tags en un solo nivel
const allTags = posts.flatMap(post => post.tags);

// 2a) únicos con filter + indexOf
const uniqueTagsFilter = allTags.filter((tag, i, arr) => arr.indexOf(tag) === i);

// 2b) únicos con Set y volver a array
const uniqueTagsSet = Array.from(new Set(allTags));

Ideas clave:

  • flat y flatMap reducen anidación y simplifican recorridos.
  • map transforma, pero no cambia la longitud del array.
  • filter + indexOf elimina repetidos sin estructuras extra.
  • Set remueve duplicados por definición; Array.from lo convierte a array operable.

¿Tienes otra forma de resolver estos casos o quieres compartir tu reto con palabras? Deja tu comentario y cuéntanos tu enfoque.