Métodos de array

12 min lectura

TextoCap. 2 — Datos y estructuras

Métodos que no mutan (inmutables)

Estos métodos retornan un nuevo array o valor sin modificar el original. Son los más usados en JavaScript moderno:

map()

Transforma cada elemento del array aplicando una función. Retorna un nuevo array del mismo tamanio:

const precios = [10, 20, 30];
const conIVA = precios.map(p => p * 1.13);
// [11.3, 22.6, 33.9]

filter()

Retorna un nuevo array solo con los elementos que cumplen la condición:

const mayores = [12, 25, 8, 30, 15].filter(e => e >= 18);
// [25, 30]

reduce()

Acumula todos los elementos en un único valor. Es el método más versatil:

const carrito = [{ precio: 10 }, { precio: 20 }, { precio: 30 }];
const total = carrito.reduce((acc, item) => acc + item.precio, 0);
// 60

El segundo argumento de reduce es el valor inicial del acumulador. Siempre proporcionalo para evitar errores con arrays vacios.

find() y findIndex()

find() retorna el primer elemento que cumple la condición, o undefined
findIndex() retorna el índice del primer elemento, o -1

some() y every()

some() retorna true si al menos un elemento cumple la condición
every() retorna true si todos los elementos la cumplen

Encadenamiento de métodos

La verdadera potencia aparece al combinar multiples métodos en una cadena:

const resultado = datos
  .filter(d => d.activo)
  .map(d => d.nombre.toUpperCase())
  .sort();

Cada paso transforma los datos de forma declarativa, haciendo el código fácil de leer y mantener.

Métodos modernos (ES2022+)

Método	Descripcion	Muta?
`at(index)`	Acceso con indices negativos	No
`toSorted()`	Sort sin mutar	No
`toReversed()`	Reverse sin mutar	No
`toSpliced()`	Splice sin mutar	No
`findLast()`	Busca desde el final	No
`groupBy()`	Agrupa por clave	No

flat() y flatMap()

flat() aplana arrays anidados. flatMap() combina map + flat(1) en una sola operación, útil cuando tu función de mapeo retorna arrays.

Array.from()

Crea un array a partir de cualquier iterable o de un objeto con length:

const rango = Array.from({ length: 5 }, (_, i) => i + 1);
// [1, 2, 3, 4, 5]

Práctica

Encadena filter, map y reduce: Dado un array de productos [{ nombre, precio, categoria }], filtra los de categoria 'tech', extrae sus precios con map y calcula el total con reduce.
Busca con find y verifica con some/every: Crea un array de numeros. Usa find para obtener el primer numero mayor a 50, some para verificar si hay negativos, y every para comprobar si todos son menores a 1000.
Ordena sin mutar: Dado un array de strings, crea una copia ordenada alfabeticamente usando [...array].sort() y verifica que el array original no fue modificado.

En la siguiente leccion aprenderemos sobre manipulación de strings y expresiones regulares.

Encadenar métodos

Puedes encadenar filter, map y reduce para crear pipelines de transformación expresivos. Cada método retorna un nuevo array (excepto reduce que retorna un valor).

sort() muta el original

A diferencia de map y filter, sort() modifica el array original. Usa [...array].sort() o array.toSorted() (ES2023) para ordenar sin mutar.

const productos = [
  { nombre: 'Laptop', precio: 999, categoria: 'tech' },
  { nombre: 'Libro', precio: 25, categoria: 'educacion' },
  { nombre: 'Monitor', precio: 450, categoria: 'tech' },
  { nombre: 'Curso', precio: 50, categoria: 'educacion' },
  { nombre: 'Teclado', precio: 80, categoria: 'tech' },
];

// filter - filtra elementos que cumplan la condición
const tech = productos.filter(p => p.categoria === 'tech');
// [{Laptop}, {Monitor}, {Teclado}]

// map - transforma cada elemento
const nombres = productos.map(p => p.nombre);
// ['Laptop', 'Libro', 'Monitor', 'Curso', 'Teclado']

// reduce - acumula en un solo valor
const total = productos.reduce((suma, p) => suma + p.precio, 0);
// 1604

// find / findIndex
const caro = productos.find(p => p.precio > 500);
// {nombre: 'Laptop', ...}
const indiceCaro = productos.findIndex(p => p.precio > 500);
// 0

// some / every
const hayCaros = productos.some(p => p.precio > 900);    // true
const todosBaratos = productos.every(p => p.precio < 100); // false

// Encadenamiento
const totalTech = productos
  .filter(p => p.categoria === 'tech')
  .reduce((suma, p) => suma + p.precio, 0);
// 1529

const números = [3, 1, 4, 1, 5, 9, 2, 6];

// sort (muta el array original - cuidado!)
const ordenados = [...números].sort((a, b) => a - b);
// [1, 1, 2, 3, 4, 5, 6, 9]

// flat - aplana arrays anidados
const anidado = [[1, 2], [3, [4, 5]]];
const plano = anidado.flat(Infinity);
// [1, 2, 3, 4, 5]

// flatMap - map + flat en uno
const frases = ['hola mundo', 'buenos dias'];
const palabras = frases.flatMap(f => f.split(' '));
// ['hola', 'mundo', 'buenos', 'dias']

// includes
console.log(números.includes(5)); // true

// Array.from - crear arrays desde iterables
const letras = Array.from('Hola');
// ['H', 'o', 'l', 'a']

// structuredClone - copia profunda (ES2022)
const original = [{ a: 1 }, { b: 2 }];
const copia = structuredClone(original);
copia[0].a = 99;
console.log(original[0].a); // 1 (no afectado)