JavaScriptLección 10 de 16

Métodos de arrays: map, filter, reduce

En lugar de escribir bucles a mano, los arrays tienen métodos que reciben una función y hacen el trabajo. El código queda más corto y se lee como una frase: quédate con lo que hay en stock y toma los nombres.

Lo esencial

  • map(fn) crea un array nuevo con cada elemento transformado por la función
  • filter(fn) crea un array nuevo solo con los elementos para los que fn devuelve true
  • reduce((acc, x) => acc + x, 0) resume el array en un solo valor, empezando en 0
  • find(fn) devuelve el primero que encaja y some(fn) dice si hay al menos uno
  • Los métodos se encadenan: list.filter(…).map(…)

Ejemplo

const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((n) => n * 2);const even = numbers.filter((n) => n % 2 === 0);const sum = numbers.reduce((acc, n) => acc + n, 0); console.log(doubled, even, sum);console.log(numbers.find((n) => n > 3), numbers.some((n) => n > 4));console.log(numbers.filter((n) => n > 2).map((n) => n * 10));

numbers no cambió: map y filter devuelven arrays nuevos. En la última línea primero se eligieron los números mayores que 2 y luego cada uno se multiplicó por 10.

Tarea

Cómo usar el editor⌘ Enter o Ctrl Enter ejecuta el código, ⇧ ⌘ Enter comprueba la tarea.Tab y Mayús Tab sangran la línea o la selección; Esc y luego Tab sale del editor.La comprobación compara lo que imprimió el programa con la tarea; los espacios al final de línea no cuentan.Tras dos comprobaciones fallidas puedes ver la solución. Tu código se guarda en este navegador.

Una tienda online tiene cuatro productos. Quédate con los que hay en stock (filter), saca sus nombres (map), suma sus precios (reduce) y busca el primer producto en stock que cueste más de 20 (find). Salida: Mug, Notebook, Hoodie, luego Total: 65 y First over 20: Hoodie.

Salida

Aquí aparecerá lo que imprima el programa.