Arrays y Métodos

Introducción a los arrays

Los arrays son estructuras de datos que permiten almacenar múltiples valores en una sola variable. A diferencia de los objetos, que utilizan propiedades con nombre, los arrays utilizan índices numéricos para acceder a sus elementos.

Creación y acceso a arrays

Crear arrays

Existen varias formas de crear un array:

// Notación literal (recomendada)
const frutas = ["manzana", "banana", "naranja"];

// Constructor Array
const numeros = new Array(1, 2, 3, 4, 5);

// Array vacío
const vacio = [];

// Array con tamaño predefinido (todos los elementos son undefined)
const arrayConTamaño = new Array(5);

Acceder a elementos

Los elementos de un array se acceden mediante su índice (posición), que comienza en 0:

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

console.log(colores[0]); // "rojo"
console.log(colores[1]); // "verde"
console.log(colores[2]); // "azul"
console.log(colores[3]); // undefined (no existe)

// Último elemento
console.log(colores[colores.length - 1]); // "azul"

// En ES2022, también puedes usar at() para índices negativos
console.log(colores.at(-1)); // "azul" (último elemento)
console.log(colores.at(-2)); // "verde" (penúltimo elemento)

Modificar elementos

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

colores[1] = "amarillo";
console.log(colores); // ["rojo", "amarillo", "azul"]

// Añadir un elemento en una posición específica
colores[3] = "morado";
console.log(colores); // ["rojo", "amarillo", "azul", "morado"]

// Crear "agujeros" en el array (no recomendado)
colores[10] = "negro";
console.log(colores); // ["rojo", "amarillo", "azul", "morado", empty × 6, "negro"]
console.log(colores.length); // 11

Propiedades de los arrays

const frutas = ["manzana", "banana", "naranja"];

// Longitud del array
console.log(frutas.length); // 3

// Modificar la longitud
frutas.length = 2;
console.log(frutas); // ["manzana", "banana"] (se elimina "naranja")

frutas.length = 4;
console.log(frutas); // ["manzana", "banana", empty × 2] (se añaden posiciones vacías)

Métodos para añadir y eliminar elementos

Añadir elementos

const frutas = ["manzana", "banana"];

// Añadir al final
frutas.push("naranja");
console.log(frutas); // ["manzana", "banana", "naranja"]

// Añadir al principio
frutas.unshift("fresa");
console.log(frutas); // ["fresa", "manzana", "banana", "naranja"]

Eliminar elementos

const frutas = ["fresa", "manzana", "banana", "naranja"];

// Eliminar el último elemento
const ultimaFruta = frutas.pop();
console.log(ultimaFruta); // "naranja"
console.log(frutas); // ["fresa", "manzana", "banana"]

// Eliminar el primer elemento
const primeraFruta = frutas.shift();
console.log(primeraFruta); // "fresa"
console.log(frutas); // ["manzana", "banana"]

Añadir/eliminar en cualquier posición

El método splice() permite añadir o eliminar elementos en cualquier posición:

const frutas = ["manzana", "banana", "naranja", "kiwi"];

// Eliminar elementos: splice(posición, cantidad)
const elementosEliminados = frutas.splice(1, 2);
console.log(elementosEliminados); // ["banana", "naranja"]
console.log(frutas); // ["manzana", "kiwi"]

// Añadir elementos: splice(posición, 0, ...elementos)
frutas.splice(1, 0, "pera", "uva");
console.log(frutas); // ["manzana", "pera", "uva", "kiwi"]

// Reemplazar elementos: splice(posición, cantidad, ...nuevosElementos)
frutas.splice(2, 1, "melocotón", "cereza");
console.log(frutas); // ["manzana", "pera", "melocotón", "cereza", "kiwi"]

Extraer parte de un array

El método slice() devuelve una copia de una parte del array:

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

// slice(inicio, fin) - fin no incluido
const algunasFrutas = frutas.slice(1, 4);
console.log(algunasFrutas); // ["banana", "naranja", "kiwi"]

// Omitir el segundo parámetro para ir hasta el final
const desdeBanana = frutas.slice(1);
console.log(desdeBanana); // ["banana", "naranja", "kiwi", "pera"]

// Índices negativos (contar desde el final)
const ultimas = frutas.slice(-2);
console.log(ultimas); // ["kiwi", "pera"]

// Crear una copia completa del array
const copia = frutas.slice();
console.log(copia); // ["manzana", "banana", "naranja", "kiwi", "pera"]

Iteración sobre arrays

Existen varias formas de recorrer un array:

Bucle for tradicional

const frutas = ["manzana", "banana", "naranja"];

for (let i = 0; i < frutas.length; i++) {
  console.log(`Fruta ${i + 1}: ${frutas[i]}`);
}

Bucle for...of (ES6)

const frutas = ["manzana", "banana", "naranja"];

for (const fruta of frutas) {
  console.log(`Me gusta la ${fruta}`);
}

Método forEach

const frutas = ["manzana", "banana", "naranja"];

frutas.forEach((fruta, indice) => {
  console.log(`${indice + 1}. ${fruta}`);
});

Métodos de transformación

map()

Crea un nuevo array aplicando una función a cada elemento:

const numeros = [1, 2, 3, 4, 5];

const duplicados = numeros.map(numero => numero * 2);
console.log(duplicados); // [2, 4, 6, 8, 10]

const cuadrados = numeros.map(numero => numero ** 2);
console.log(cuadrados); // [1, 4, 9, 16, 25]

Con objetos:

const personas = [
  { nombre: "Ana", edad: 28 },
  { nombre: "Juan", edad: 32 },
  { nombre: "María", edad: 25 }
];

const nombres = personas.map(persona => persona.nombre);
console.log(nombres); // ["Ana", "Juan", "María"]

filter()

Crea un nuevo array con los elementos que cumplen una condición:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const pares = numeros.filter(numero => numero % 2 === 0);
console.log(pares); // [2, 4, 6, 8, 10]

const mayoresQueCinco = numeros.filter(numero => numero > 5);
console.log(mayoresQueCinco); // [6, 7, 8, 9, 10]

Con objetos:

const personas = [
  { nombre: "Ana", edad: 28 },
  { nombre: "Juan", edad: 32 },
  { nombre: "María", edad: 25 }
];

const mayoresDe30 = personas.filter(persona => persona.edad > 30);
console.log(mayoresDe30); // [{ nombre: "Juan", edad: 32 }]

reduce()

Reduce un array a un único valor:

const numeros = [1, 2, 3, 4, 5];

// Suma de todos los números
const suma = numeros.reduce((acumulador, numero) => acumulador + numero, 0);
console.log(suma); // 15

// Producto de todos los números
const producto = numeros.reduce((acumulador, numero) => acumulador * numero, 1);
console.log(producto); // 120

Usos más avanzados:

// Contar ocurrencias
const frutas = ["manzana", "banana", "manzana", "naranja", "banana", "manzana"];

const conteo = frutas.reduce((acumulador, fruta) => {
  acumulador[fruta] = (acumulador[fruta] || 0) + 1;
  return acumulador;
}, {});

console.log(conteo); // { manzana: 3, banana: 2, naranja: 1 }

// Aplanar arrays anidados
const arrayAnidado = [[1, 2], [3, 4], [5, 6]];
const aplanado = arrayAnidado.reduce((acumulador, array) => acumulador.concat(array), []);
console.log(aplanado); // [1, 2, 3, 4, 5, 6]

flatMap()

Combina map() y flat() en una sola operación:

const oraciones = ["Hola mundo", "JavaScript es genial"];

// Dividir cada oración en palabras y aplanar el resultado
const palabras = oraciones.flatMap(oracion => oracion.split(" "));
console.log(palabras); // ["Hola", "mundo", "JavaScript", "es", "genial"]

Métodos de búsqueda

find()

Devuelve el primer elemento que cumple una condición:

const numeros = [5, 12, 8, 130, 44];

const encontrado = numeros.find(numero => numero > 10);
console.log(encontrado); // 12

const personas = [
  { id: 1, nombre: "Ana" },
  { id: 2, nombre: "Juan" },
  { id: 3, nombre: "María" }
];

const persona = personas.find(p => p.id === 2);
console.log(persona); // { id: 2, nombre: "Juan" }

findIndex()

Devuelve el índice del primer elemento que cumple una condición:

const frutas = ["manzana", "banana", "naranja", "kiwi"];

const indice = frutas.findIndex(fruta => fruta === "naranja");
console.log(indice); // 2

const noEncontrado = frutas.findIndex(fruta => fruta === "uva");
console.log(noEncontrado); // -1 (no encontrado)

includes()

Determina si un array incluye un determinado elemento:

const numeros = [1, 2, 3, 4, 5];

console.log(numeros.includes(3)); // true
console.log(numeros.includes(6)); // false

// Segundo parámetro: posición desde donde empezar a buscar
console.log(numeros.includes(1, 1)); // false (busca desde el índice 1)

indexOf() y lastIndexOf()

Buscan la posición de un elemento:

const frutas = ["manzana", "banana", "naranja", "banana", "kiwi"];

// indexOf() devuelve la primera ocurrencia
console.log(frutas.indexOf("banana")); // 1
console.log(frutas.indexOf("uva")); // -1 (no encontrado)

// lastIndexOf() devuelve la última ocurrencia
console.log(frutas.lastIndexOf("banana")); // 3

some() y every()

Comprueban si algunos o todos los elementos cumplen una condición:

const numeros = [1, 2, 3, 4, 5];

// ¿Hay algún número par?
const hayPares = numeros.some(numero => numero % 2 === 0);
console.log(hayPares); // true

// ¿Son todos mayores que cero?
const todosMayoresQueCero = numeros.every(numero => numero > 0);
console.log(todosMayoresQueCero); // true

// ¿Son todos pares?
const todosPares = numeros.every(numero => numero % 2 === 0);
console.log(todosPares); // false

Ordenación y manipulación de arrays

sort()

Ordena los elementos de un array (modificando el original):

const frutas = ["naranja", "manzana", "banana", "kiwi"];

// Ordenar alfabéticamente (por defecto)
frutas.sort();
console.log(frutas); // ["banana", "kiwi", "manzana", "naranja"]

// Ordenar números (¡cuidado con la ordenación por defecto!)
const numeros = [10, 5, 40, 1, 100];
numeros.sort();
console.log(numeros); // [1, 10, 100, 40, 5] (¡incorrecto! ordena como strings)

// Ordenar números correctamente
numeros.sort((a, b) => a - b);
console.log(numeros); // [1, 5, 10, 40, 100]

// Orden descendente
numeros.sort((a, b) => b - a);
console.log(numeros); // [100, 40, 10, 5, 1]

Ordenar objetos:

const personas = [
  { nombre: "Ana", edad: 28 },
  { nombre: "Juan", edad: 32 },
  { nombre: "María", edad: 25 }
];

// Ordenar por edad (ascendente)
personas.sort((a, b) => a.edad - b.edad);
console.log(personas);
// [
//   { nombre: "María", edad: 25 },
//   { nombre: "Ana", edad: 28 },
//   { nombre: "Juan", edad: 32 }
// ]

// Ordenar por nombre
personas.sort((a, b) => a.nombre.localeCompare(b.nombre));
console.log(personas);
// [
//   { nombre: "Ana", edad: 28 },
//   { nombre: "Juan", edad: 32 },
//   { nombre: "María", edad: 25 }
// ]

reverse()

Invierte el orden de los elementos de un array:

const numeros = [1, 2, 3, 4, 5];

numeros.reverse();
console.log(numeros); // [5, 4, 3, 2, 1]

join()

Une todos los elementos de un array en una cadena:

const frutas = ["manzana", "banana", "naranja"];

const cadena = frutas.join(", ");
console.log(cadena); // "manzana, banana, naranja"

// Sin separador
console.log(frutas.join("")); // "manzanabanananaranaja"

// Con otro separador
console.log(frutas.join(" - ")); // "manzana - banana - naranja"

concat()

Combina dos o más arrays:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const combinado = array1.concat(array2, array3);
console.log(combinado); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// También se puede usar el operador spread (...)
const combinadoSpread = [...array1, ...array2, ...array3];
console.log(combinadoSpread); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

flat()

Aplana arrays anidados:

const arrayAnidado = [1, 2, [3, 4, [5, 6]]];

// Aplanar un nivel
console.log(arrayAnidado.flat()); // [1, 2, 3, 4, [5, 6]]

// Aplanar múltiples niveles
console.log(arrayAnidado.flat(2)); // [1, 2, 3, 4, 5, 6]

// Aplanar todos los niveles
console.log(arrayAnidado.flat(Infinity)); // [1, 2, 3, 4, 5, 6]

Arrays multidimensionales

Los arrays pueden contener otros arrays, creando estructuras multidimensionales:

Arrays bidimensionales (matrices)

// Matriz 3x3
const matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// Acceder a elementos
console.log(matriz[1][2]); // 6 (fila 1, columna 2)

// Recorrer matriz
for (let i = 0; i < matriz.length; i++) {
  for (let j = 0; j < matriz[i].length; j++) {
    console.log(`Elemento en [${i}][${j}]: ${matriz[i][j]}`);
  }
}

Arrays de más dimensiones

// Array tridimensional
const cubo = [
  [
    [1, 2],
    [3, 4]
  ],
  [
    [5, 6],
    [7, 8]
  ]
];

console.log(cubo[1][0][1]); // 6

Desestructuración y operador spread

Desestructuración de arrays

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

// Desestructuración básica
const [primerColor, segundoColor] = colores;
console.log(primerColor); // "rojo"
console.log(segundoColor); // "verde"

// Saltar elementos
const [primero, , tercero] = colores;
console.log(primero); // "rojo"
console.log(tercero); // "azul"

// Resto de elementos
const [primero, ...resto] = colores;
console.log(primero); // "rojo"
console.log(resto); // ["verde", "azul", "amarillo"]

// Valores por defecto
const [a, b, c, d, e = "morado"] = colores;
console.log(e); // "morado"

Operador spread (...)

// Copiar arrays
const original = [1, 2, 3];
const copia = [...original];
copia.push(4);
console.log(original); // [1, 2, 3] (no se modifica)
console.log(copia); // [1, 2, 3, 4]

// Combinar arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinado = [...array1, ...array2];
console.log(combinado); // [1, 2, 3, 4, 5, 6]

// Insertar elementos en medio
const numeros = [1, 2, 5, 6];
const completos = [1, 2, ...[3, 4], 5, 6];
console.log(completos); // [1, 2, 3, 4, 5, 6]

// Convertir string en array de caracteres
const str = "Hola";
const caracteres = [...str];
console.log(caracteres); // ["H", "o", "l", "a"]

Métodos de arrays estáticos

Array.from()

Crea un nuevo array a partir de un objeto iterable:

// A partir de un string
const letras = Array.from("Hola");
console.log(letras); // ["H", "o", "l", "a"]

// Con una función de mapeo
const numeros = Array.from([1, 2, 3], x => x * 2);
console.log(numeros); // [2, 4, 6]

// Crear un array de números
const rango = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(rango); // [1, 2, 3, 4, 5]

Array.of()

Crea un nuevo array con los argumentos proporcionados:

const array = Array.of(1, 2, 3, 4, 5);
console.log(array); // [1, 2, 3, 4, 5]

// Diferencia con el constructor Array
console.log(new Array(3)); // [empty × 3] (un array con 3 posiciones vacías)
console.log(Array.of(3)); // [3] (un array con el número 3)

Array.isArray()

Determina si un valor es un array:

console.log(Array.isArray([])); // true
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray("Hola")); // false

Mejores prácticas

1. Preferir métodos funcionales sobre bucles tradicionales:

   // Preferir
   const duplicados = numeros.map(n => n * 2);
   
   // En lugar de
   const duplicados = [];
   for (let i = 0; i < numeros.length; i++) {
     duplicados.push(numeros[i] * 2);
   }
   

2. Evitar modificar arrays durante la iteración:

   // Evitar
   for (let i = 0; i < array.length; i++) {
     if (condicion) {
       array.splice(i, 1); // Modifica el array y causa problemas
     }
   }
   
   // Preferir
   const resultado = array.filter(item => !condicion);
   

3. Usar métodos de copia en lugar de modificar los originales:

   // Preferir
   const ordenado = [...array].sort();
   
   // En lugar de
   array.sort(); // Modifica el array original
   

4. Comprobar si un array está vacío:

   // Preferir
   if (array.length === 0) {
     // Array vacío
   }
   
   // O más conciso
   if (!array.length) {
     // Array vacío
   }
   

5. Usar desestructuración para extraer elementos:

   // Preferir
   const [primero, segundo] = array;
   
   // En lugar de
   const primero = array[0];
   const segundo = array[1];