Arrays en JavaScript

Un array es una lista ordenada de valores guardada en una sola variable.

const frutas = ["manzana", "pera", "kiwi"];

Acceder a los elementos

Cada elemento tiene una posición (índice) que empieza en 0:

frutas[0]   // "manzana"
frutas[1]   // "pera"
frutas[2]   // "kiwi"
frutas[3]   // undefined: no existe

frutas.length                 // 3: cuántos elementos hay
frutas[frutas.length - 1]     // "kiwi": el último
frutas.at(-1)                 // "kiwi": otra forma de pedir el último

Para cambiar un elemento: frutas[1] = "uva";

Aunque el array esté declarado con const, puedes cambiar su contenido. Lo que no puedes es asignar un array nuevo a la variable.

Añadir y quitar

const tareas = ["estudiar"];

tareas.push("comprar");     // añade al final → ["estudiar", "comprar"]
tareas.unshift("desayunar"); // añade al principio
tareas.pop();               // quita el último
tareas.shift();             // quita el primero

Buscar

const colores = ["rojo", "verde", "azul"];

colores.includes("verde")  // true
colores.indexOf("azul")    // 2  (-1 si no está)

Trocear y unir

slice(inicio, fin) devuelve un trozo del array, desde inicio (incluido) hasta fin (excluido). No modifica el original:

const cartas = ["as", "dos", "tres", "cuatro", "cinco"];
cartas.slice(1, 3)   // ["dos", "tres"]
cartas.slice(2)      // ["tres", "cuatro", "cinco"] (hasta el final)
cartas.slice(-2)     // ["cuatro", "cinco"] (los negativos cuentan desde el final)

splice(inicio, cuántos) quita elementos del array original (y los devuelve). También puede insertar:

const letras = ["a", "b", "c", "d"];
letras.splice(1, 2);        // devuelve ["b", "c"]; letras queda ["a", "d"]
letras.splice(1, 0, "x");   // inserta "x" en la posición 1: ["a", "x", "d"]

slice y splice se parecen mucho en el nombre y es fácil confundirlos: recuerda que splice modifica.

Unir arrays, con concat o con el operador spread (...):

const a = [1, 2];
const b = [3, 4];
a.concat(b)     // [1, 2, 3, 4]
[...a, ...b, 5] // [1, 2, 3, 4, 5]

De array a texto y al revés:

["HTML", "CSS", "JS"].join(", ")   // "HTML, CSS, JS"
"a,b,c".split(",")                 // ["a", "b", "c"]

Ordenar

const nombres = ["Luis", "ana", "Eva"];
nombres.sort();   // ["Eva", "Luis", "ana"] (las mayúsculas van antes)

const numeros = [10, 1, 5, 100];
numeros.sort();                   // [1, 10, 100, 5] (!) ordena como texto
numeros.sort((a, b) => a - b);    // [1, 5, 10, 100] ✓ de menor a mayor
numeros.sort((a, b) => b - a);    // [100, 10, 5, 1] de mayor a menor

Por defecto, sort convierte todo a texto. Con números, pasa siempre una función de comparación. Para textos con tildes, usa nombres.sort((a, b) => a.localeCompare(b, "es")).

Ojo: sort y reverse modifican el array original. Si no quieres eso, ordena una copia: [...numeros].sort(...) o numeros.toSorted(...) en navegadores modernos.

Los métodos que más vas a usar

Estos métodos reciben una función que se aplica a cada elemento. Son la forma moderna de trabajar con listas, sin escribir bucles:

forEach: hacer algo con cada elemento.

colores.forEach((color) => console.log(color));

map: crear un array nuevo transformando cada elemento.

const precios = [10, 20, 30];
const conIva = precios.map((p) => p * 1.21); // [12.1, 24.2, 36.3]

filter: crear un array nuevo solo con los elementos que cumplen una condición.

const edades = [12, 25, 17, 40];
const mayores = edades.filter((e) => e >= 18); // [25, 40]

find: devuelve el primer elemento que cumple la condición.

const primerMayor = edades.find((e) => e >= 18); // 25

reduce: reduce todo el array a un solo valor, por ejemplo una suma.

const total = precios.reduce((acumulado, p) => acumulado + p, 0); // 60

map y filter no modifican el array original: devuelven uno nuevo. push, pop y sort sí lo modifican.

Otros que te encontrarás: some (¿alguno cumple la condición?), every (¿todos la cumplen?) y findIndex (la posición del primero que la cumple).

Formas de recorrer un array

const colores = ["rojo", "verde", "azul"];

for (const color of colores) { }                  // ✓ la más legible
colores.forEach((color, i) => { });               // ✓ con la posición
for (let i = 0; i < colores.length; i++) { }      // cuando necesitas controlar el índice

No uses for...in con arrays. Está pensado para objetos: recorre las claves (como texto: "0", "1"…) y también cualquier otra propiedad que se haya añadido al array.

Comprobar si algo es un array

typeof [] devuelve "object", así que no sirve. Usa Array.isArray(valor).

const numeros = [1, 2, 3];
console.log(numeros.map((n) => n * 2));

console.log([10, 1, 5, 100].sort());