Métodos de Arrays

Métodos de transformación

Los métodos de transformación permiten crear nuevos arrays a partir de arrays existentes aplicando operaciones específicas a sus elementos. Estos métodos no modifican el array original, sino que devuelven un nuevo array con los cambios aplicados, siguiendo el principio de inmutabilidad en JavaScript moderno.

map() - Transformar cada elemento

El método map() es fundamental para transformar todos los elementos de un array aplicando una función a cada uno. Devuelve un nuevo array con el mismo número de elementos que el original.

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

// Multiplicar cada número por 2
const duplicados = numeros.map(numero => numero * 2);
console.log(duplicados); // [2, 4, 6, 8, 10]

// Convertir números a strings con formato
const formateados = numeros.map(numero => `Número: ${numero}`);
console.log(formateados); // ["Número: 1", "Número: 2", ...]

Un caso práctico común es transformar objetos dentro de un array:

const productos = [
  { nombre: "Laptop", precio: 800 },
  { nombre: "Mouse", precio: 25 },
  { nombre: "Teclado", precio: 60 }
];

// Aplicar descuento del 10% a todos los productos
const conDescuento = productos.map(producto => ({
  nombre: producto.nombre,
  precio: producto.precio * 0.9,
  precioOriginal: producto.precio
}));

console.log(conDescuento);
// [{ nombre: "Laptop", precio: 720, precioOriginal: 800 }, ...]

filter() - Seleccionar elementos

El método filter() crea un nuevo array con todos los elementos que cumplan una condición específica. A diferencia de map(), el array resultante puede tener menos elementos que el original.

const edades = [15, 22, 18, 30, 16, 25];

// Filtrar solo mayores de edad
const mayoresDeEdad = edades.filter(edad => edad >= 18);
console.log(mayoresDeEdad); // [22, 18, 30, 25]

// Filtrar números pares
const pares = edades.filter(edad => edad % 2 === 0);
console.log(pares); // [22, 18, 30, 16]

Ejemplo práctico con objetos complejos:

const empleados = [
  { nombre: "Ana", departamento: "IT", salario: 3000 },
  { nombre: "Carlos", departamento: "Ventas", salario: 2500 },
  { nombre: "Luis", departamento: "IT", salario: 3500 },
  { nombre: "María", departamento: "RRHH", salario: 2800 }
];

// Filtrar empleados de IT con salario mayor a 3000
const empleadosIT = empleados.filter(empleado => 
  empleado.departamento === "IT" && empleado.salario > 3000
);

console.log(empleadosIT);
// [{ nombre: "Luis", departamento: "IT", salario: 3500 }]

reduce() - Reducir a un solo valor

El método reduce() es el más versátil de los métodos de transformación. Reduce todo el array a un único valor aplicando una función acumuladora.

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

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

// Encontrar el número mayor
const mayor = numeros.reduce((max, numero) => numero > max ? numero : max);
console.log(mayor); // 5

Ejemplo más complejo contando elementos:

const frutas = ["manzana", "naranja", "manzana", "plátano", "naranja", "manzana"];

// Contar occurrencias de cada fruta
const conteo = frutas.reduce((contador, fruta) => {
  contador[fruta] = (contador[fruta] || 0) + 1;
  return contador;
}, {});

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

Combinando métodos de transformación

La verdadera fortaleza surge al combinar varios métodos en una cadena de transformaciones:

const ventas = [
  { producto: "Laptop", cantidad: 2, precio: 800 },
  { producto: "Mouse", cantidad: 5, precio: 25 },
  { producto: "Teclado", cantidad: 3, precio: 60 },
  { producto: "Monitor", cantidad: 1, precio: 300 }
];

// Calcular el total de ventas para productos con más de 1 unidad vendida
const totalVentasMultiples = ventas
  .filter(venta => venta.cantidad > 1)           // Solo ventas múltiples
  .map(venta => venta.cantidad * venta.precio)   // Calcular subtotal
  .reduce((total, subtotal) => total + subtotal, 0); // Sumar todo

console.log(totalVentasMultiples); // 1860

sort() - Ordenar elementos

El método sort() ordena los elementos del array según el criterio especificado. Por defecto convierte los elementos a strings y los ordena alfabéticamente.

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

// Ordenar números de menor a mayor
const ordenadosAsc = [...numeros].sort((a, b) => a - b);
console.log(ordenadosAsc); // [1, 1, 2, 3, 4, 5, 9]

// Ordenar números de mayor a menor
const ordenadosDesc = [...numeros].sort((a, b) => b - a);
console.log(ordenadosDesc); // [9, 5, 4, 3, 2, 1, 1]

Para ordenar objetos por una propiedad específica:

const estudiantes = [
  { nombre: "Ana", nota: 8.5 },
  { nombre: "Carlos", nota: 7.2 },
  { nombre: "Luis", nota: 9.1 },
  { nombre: "María", nota: 6.8 }
];

// Ordenar por nota de mayor a menor
const porNota = [...estudiantes].sort((a, b) => b.nota - a.nota);
console.log(porNota);
// [{ nombre: "Luis", nota: 9.1 }, { nombre: "Ana", nota: 8.5 }, ...]

flatMap() - Aplanar y transformar

El método flatMap() combina map() y flat() en una sola operación, útil cuando cada elemento puede generar múltiples elementos en el resultado:

const frases = ["Hola mundo", "JavaScript es genial", "Programar es divertido"];

// Obtener todas las palabras de todas las frases
const palabras = frases.flatMap(frase => frase.split(" "));
console.log(palabras);
// ["Hola", "mundo", "JavaScript", "es", "genial", "Programar", "es", "divertido"]

// Ejemplo con números: generar rangos
const rangos = [2, 3, 1];
const numeros = rangos.flatMap(cantidad => 
  Array.from({length: cantidad}, (_, i) => i + 1)
);
console.log(numeros); // [1, 2, 1, 2, 3, 1]

Los métodos de transformación son esenciales en JavaScript moderno porque permiten escribir código más legible y funcional, evitando bucles tradicionales y mutaciones directas de arrays. Cada método tiene su propósito específico y su verdadera potencia se manifiesta cuando se combinan para resolver problemas complejos de manera elegante.

Métodos de búsqueda

Los métodos de búsqueda permiten localizar elementos específicos dentro de un array sin necesidad de modificarlo. Estos métodos son esenciales para encontrar información, verificar la existencia de elementos y determinar posiciones dentro de la estructura de datos.

find() - Encontrar el primer elemento

El método find() devuelve el primer elemento que cumple con una condición específica. Si ningún elemento satisface la condición, retorna undefined.

const usuarios = [
  { id: 1, nombre: "Ana", activo: true },
  { id: 2, nombre: "Carlos", activo: false },
  { id: 3, nombre: "Luis", activo: true }
];

// Encontrar el primer usuario activo
const usuarioActivo = usuarios.find(usuario => usuario.activo);
console.log(usuarioActivo); // { id: 1, nombre: "Ana", activo: true }

// Buscar usuario por ID
const usuarioPorId = usuarios.find(usuario => usuario.id === 2);
console.log(usuarioPorId); // { id: 2, nombre: "Carlos", activo: false }

Ejemplo práctico con validación de existencia:

const productos = [
  { codigo: "LAP001", nombre: "Laptop Gaming", stock: 5 },
  { codigo: "MOU001", nombre: "Mouse Inalámbrico", stock: 0 },
  { codigo: "TEC001", nombre: "Teclado Mecánico", stock: 12 }
];

// Verificar si existe un producto en stock
const productoDisponible = productos.find(producto => 
  producto.codigo === "LAP001" && producto.stock > 0
);

if (productoDisponible) {
  console.log(`${productoDisponible.nombre} disponible: ${productoDisponible.stock} unidades`);
} else {
  console.log("Producto no disponible");
}

findIndex() - Encontrar la posición

El método findIndex() devuelve el índice del primer elemento que cumple la condición. Si no encuentra ningún elemento, retorna -1.

const temperaturas = [18, 22, 25, 19, 30, 15, 28];

// Encontrar la posición de la primera temperatura alta
const indiceAlta = temperaturas.findIndex(temp => temp > 25);
console.log(indiceAlta); // 4

// Encontrar posición de temperatura específica
const indiceBuscada = temperaturas.findIndex(temp => temp === 22);
console.log(indiceBuscada); // 1

Uso práctico para actualizar elementos:

const tareas = [
  { id: 1, titulo: "Estudiar JavaScript", completada: false },
  { id: 2, titulo: "Hacer ejercicios", completada: false },
  { id: 3, titulo: "Revisar código", completada: true }
];

// Encontrar índice de tarea para marcarla como completada
const indiceACompletar = tareas.findIndex(tarea => tarea.id === 2);

if (indiceACompletar !== -1) {
  tareas[indiceACompletar].completada = true;
  console.log("Tarea completada:", tareas[indiceACompletar]);
}

includes() - Verificar existencia

El método includes() determina si un array contiene un elemento específico, devolviendo true o false.

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

// Verificar si existe un color
console.log(colores.includes("verde")); // true
console.log(colores.includes("naranja")); // false

// Búsqueda desde una posición específica
console.log(colores.includes("azul", 2)); // true
console.log(colores.includes("rojo", 1)); // false

Ejemplo con validación de datos:

const rolesPermitidos = ["admin", "editor", "usuario"];
const usuariosConectados = ["admin", "usuario", "invitado"];

// Validar permisos
function verificarAcceso(rol) {
  if (rolesPermitidos.includes(rol)) {
    return `Acceso concedido para ${rol}`;
  } else {
    return `Acceso denegado para ${rol}`;
  }
}

console.log(verificarAcceso("editor")); // "Acceso concedido para editor"
console.log(verificarAcceso("invitado")); // "Acceso denegado para invitado"

indexOf() y lastIndexOf() - Posiciones específicas

Estos métodos devuelven la posición de un elemento en el array. indexOf() encuentra la primera ocurrencia, mientras que lastIndexOf() encuentra la última.

const letras = ["a", "b", "c", "b", "d", "b"];

// Encontrar primera y última ocurrencia
console.log(letras.indexOf("b")); // 1
console.log(letras.lastIndexOf("b")); // 5

// Elemento no encontrado
console.log(letras.indexOf("x")); // -1

Uso práctico para eliminar elementos duplicados:

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

// Eliminar duplicados manteniendo la primera ocurrencia
const sinDuplicados = numeros.filter((numero, indice) => 
  numeros.indexOf(numero) === indice
);

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

some() - Verificar si alguno cumple

El método some() verifica si al menos un elemento del array cumple con una condición específica.

const edades = [16, 18, 20, 15, 22];

// Verificar si hay algún mayor de edad
const hayMayorDeEdad = edades.some(edad => edad >= 18);
console.log(hayMayorDeEdad); // true

// Verificar si hay números pares
const hayPares = edades.some(edad => edad % 2 === 0);
console.log(hayPares); // true

Ejemplo práctico con objetos complejos:

const pedidos = [
  { id: 1, total: 150, urgente: false },
  { id: 2, total: 80, urgente: true },
  { id: 3, total: 200, urgente: false }
];

// Verificar si hay pedidos urgentes
const hayUrgentes = pedidos.some(pedido => pedido.urgente);
console.log(hayUrgentes); // true

// Verificar si hay pedidos grandes
const hayGrandes = pedidos.some(pedido => pedido.total > 180);
console.log(hayGrandes); // true

every() - Verificar si todos cumplen

El método every() verifica si todos los elementos del array cumplen con una condición específica.

const calificaciones = [8, 7, 9, 8, 7];

// Verificar si todas las calificaciones son aprobatorias
const todasAprobadas = calificaciones.every(nota => nota >= 6);
console.log(todasAprobadas); // true

// Verificar si todas son excelentes
const todasExcelentes = calificaciones.every(nota => nota >= 9);
console.log(todasExcelentes); // false

Caso práctico de validación completa:

const formulario = [
  { campo: "email", valor: "user@email.com", valido: true },
  { campo: "password", valor: "123456", valido: true },
  { campo: "nombre", valor: "Juan", valido: true }
];

// Verificar si todo el formulario es válido
const formularioCompleto = formulario.every(campo => 
  campo.valor.trim() !== "" && campo.valido
);

if (formularioCompleto) {
  console.log("Formulario listo para enviar");
} else {
  console.log("Completar campos requeridos");
}

Combinar métodos de búsqueda

Los métodos de búsqueda se pueden combinar eficazmente para realizar validaciones complejas:

const estudiantes = [
  { nombre: "Ana", materias: [8, 7, 9], beca: true },
  { nombre: "Carlos", materias: [6, 5, 7], beca: false },
  { nombre: "Luis", materias: [9, 8, 10], beca: true }
];

// Encontrar estudiante con beca y todas las materias aprobadas
const estudianteBecario = estudiantes.find(estudiante => 
  estudiante.beca && estudiante.materias.every(nota => nota >= 6)
);

console.log(estudianteBecario); // { nombre: "Ana", ... }

// Verificar si hay estudiantes en riesgo académico
const hayEnRiesgo = estudiantes.some(estudiante => 
  estudiante.materias.some(nota => nota < 6)
);

console.log(hayEnRiesgo); // true (Carlos tiene un 5)

Los métodos de búsqueda proporcionan una base sólida para localizar y verificar información dentro de arrays de manera eficiente y legible, evitando la necesidad de bucles manuales y simplificando la lógica de búsqueda en aplicaciones JavaScript modernas.

Métodos de manipulación

Los métodos de manipulación permiten modificar la estructura y el contenido de los arrays, ya sea alterando el array original o creando nuevos arrays con cambios específicos. Estos métodos son fundamentales para gestionar datos dinámicos y construir interfaces interactivas.

push() y pop() - Manipular el final

El método push() añade elementos al final del array y devuelve la nueva longitud, mientras que pop() elimina el último elemento y lo devuelve.

const tareas = ["Estudiar", "Ejercitar"];

// Añadir nuevas tareas
const nuevaLongitud = tareas.push("Cocinar", "Leer");
console.log(tareas); // ["Estudiar", "Ejercitar", "Cocinar", "Leer"]
console.log(nuevaLongitud); // 4

// Eliminar la última tarea
const tareaEliminada = tareas.pop();
console.log(tareaEliminada); // "Leer"
console.log(tareas); // ["Estudiar", "Ejercitar", "Cocinar"]

Ejemplo práctico con gestión de historial:

const historialNavegacion = [];

// Simular navegación
function visitarPagina(url) {
  historialNavegacion.push({
    url: url,
    timestamp: new Date(),
    visitNumber: historialNavegacion.length + 1
  });
}

visitarPagina("index.html");
visitarPagina("productos.html");
visitarPagina("contacto.html");

// Volver atrás
const paginaAnterior = historialNavegacion.pop();
console.log(`Saliendo de: ${paginaAnterior.url}`);
console.log("Historial actual:", historialNavegacion.length, "páginas");

unshift() y shift() - Manipular el inicio

El método unshift() añade elementos al inicio del array, mientras que shift() elimina el primer elemento.

const cola = ["Carlos", "Ana"];

// Añadir al inicio de la cola
cola.unshift("Luis", "María");
console.log(cola); // ["Luis", "María", "Carlos", "Ana"]

// Atender al primero de la cola
const atendido = cola.shift();
console.log(`Atendiendo a: ${atendido}`); // "Atendiendo a: Luis"
console.log(cola); // ["María", "Carlos", "Ana"]

Implementación de una cola de prioridades:

const colaPrioridad = [
  { nombre: "Ticket Normal", prioridad: 1 },
  { nombre: "Consulta", prioridad: 1 }
];

function añadirTicket(ticket) {
  if (ticket.prioridad === 3) {
    // Prioridad alta al inicio
    colaPrioridad.unshift(ticket);
  } else {
    // Prioridad normal al final
    colaPrioridad.push(ticket);
  }
}

añadirTicket({ nombre: "Emergencia", prioridad: 3 });
console.log(colaPrioridad);
// [{ nombre: "Emergencia", prioridad: 3 }, ...]

splice() - Modificar en cualquier posición

El método splice() es el más versátil para manipular arrays. Puede eliminar elementos, añadir nuevos elementos, o ambas cosas simultáneamente en cualquier posición.

const meses = ["Enero", "Febrero", "Abril", "Mayo"];

// Insertar "Marzo" en la posición 2
meses.splice(2, 0, "Marzo");
console.log(meses); // ["Enero", "Febrero", "Marzo", "Abril", "Mayo"]

// Reemplazar "Abril" por "Abril Actualizado"
const eliminados = meses.splice(3, 1, "Abril Actualizado");
console.log(eliminados); // ["Abril"]
console.log(meses); // ["Enero", "Febrero", "Marzo", "Abril Actualizado", "Mayo"]

Ejemplo práctico con lista de compras:

const listaCompras = [
  { item: "Leche", cantidad: 1, comprado: false },
  { item: "Pan", cantidad: 2, comprado: false },
  { item: "Huevos", cantidad: 12, comprado: true }
];

// Eliminar items comprados
function eliminarComprados() {
  for (let i = listaCompras.length - 1; i >= 0; i--) {
    if (listaCompras[i].comprado) {
      const eliminado = listaCompras.splice(i, 1);
      console.log(`Eliminado: ${eliminado[0].item}`);
    }
  }
}

// Añadir item en posición específica
function insertarItem(posicion, nuevoItem) {
  listaCompras.splice(posicion, 0, nuevoItem);
}

insertarItem(1, { item: "Queso", cantidad: 1, comprado: false });
console.log(listaCompras);

slice() - Crear copias parciales

El método slice() crea una copia superficial de una porción del array sin modificar el original.

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

// Obtener elementos desde el índice 2 hasta el 5 (no incluido)
const porcion = numeros.slice(2, 5);
console.log(porcion); // [3, 4, 5]
console.log(numeros); // Array original sin cambios

// Obtener los últimos 3 elementos
const ultimos = numeros.slice(-3);
console.log(ultimos); // [6, 7, 8]

// Crear copia completa
const copia = numeros.slice();
console.log(copia); // [1, 2, 3, 4, 5, 6, 7, 8]

Implementación de paginación:

const productos = [
  "Laptop", "Mouse", "Teclado", "Monitor", "Speakers", 
  "Webcam", "Micrófono", "Tablet", "Smartphone", "Auriculares"
];

function paginar(array, pagina, elementosPorPagina) {
  const inicio = (pagina - 1) * elementosPorPagina;
  const fin = inicio + elementosPorPagina;
  
  return {
    datos: array.slice(inicio, fin),
    paginaActual: pagina,
    totalPaginas: Math.ceil(array.length / elementosPorPagina),
    total: array.length
  };
}

const pagina1 = paginar(productos, 1, 4);
console.log(pagina1);
// { datos: ["Laptop", "Mouse", "Teclado", "Monitor"], paginaActual: 1, ... }

concat() - Unir arrays

El método concat() combina dos o más arrays creando un nuevo array sin modificar los originales.

const frutas = ["manzana", "naranja"];
const verduras = ["lechuga", "tomate"];
const lacteos = ["leche", "queso"];

// Combinar arrays
const compra = frutas.concat(verduras, lacteos);
console.log(compra); 
// ["manzana", "naranja", "lechuga", "tomate", "leche", "queso"]

// Los arrays originales no cambian
console.log(frutas); // ["manzana", "naranja"]

Alternativa moderna con spread operator:

const equipoA = ["Ana", "Carlos"];
const equipoB = ["Luis", "María"];
const nuevoMiembro = "Pedro";

// Usando concat tradicional
const equipoCompleto1 = equipoA.concat(equipoB, [nuevoMiembro]);

// Usando spread operator (recomendado en JavaScript moderno)
const equipoCompleto2 = [...equipoA, ...equipoB, nuevoMiembro];

console.log(equipoCompleto2); 
// ["Ana", "Carlos", "Luis", "María", "Pedro"]

join() - Convertir a string

El método join() convierte todos los elementos del array en un string único, separados por un delimitador específico.

const palabras = ["JavaScript", "es", "increíble"];

// Unir con espacios
const frase = palabras.join(" ");
console.log(frase); // "JavaScript es increíble"

// Unir con diferentes separadores
console.log(palabras.join("-")); // "JavaScript-es-increíble"
console.log(palabras.join("")); // "JavaScriptesincreíble"
console.log(palabras.join(", ")); // "JavaScript, es, increíble"

Uso práctico para generar rutas:

const rutaSegmentos = ["api", "v1", "usuarios", "123"];

// Generar URL
const url = "/" + rutaSegmentos.join("/");
console.log(url); // "/api/v1/usuarios/123"

// Generar breadcrumb
function generarBreadcrumb(segmentos) {
  return segmentos
    .map((segmento, indice) => {
      const ruta = "/" + segmentos.slice(0, indice + 1).join("/");
      return `<a href="${ruta}">${segmento}</a>`;
    })
    .join(" > ");
}

const breadcrumb = generarBreadcrumb(["inicio", "productos", "laptops"]);
console.log(breadcrumb);

reverse() - Invertir orden

El método reverse() invierte el orden de los elementos del array, modificando el array original.

const letras = ["a", "b", "c", "d"];

// Invertir el array original
letras.reverse();
console.log(letras); // ["d", "c", "b", "a"]

// Para no modificar el original, crear copia primero
const numeros = [1, 2, 3, 4, 5];
const numerosInvertidos = [...numeros].reverse();
console.log(numeros); // [1, 2, 3, 4, 5] (sin cambios)
console.log(numerosInvertidos); // [5, 4, 3, 2, 1]

fill() - Llenar con valores

El método fill() rellena elementos del array con un valor específico desde una posición inicial hasta una final.

// Crear array lleno de ceros
const ceros = new Array(5).fill(0);
console.log(ceros); // [0, 0, 0, 0, 0]

// Llenar parcialmente
const array = [1, 2, 3, 4, 5];
array.fill("X", 1, 4); // Desde índice 1 hasta 4 (no incluido)
console.log(array); // [1, "X", "X", "X", 5]

Ejemplo práctico con inicialización de datos:

// Crear tabla de multiplicar
function crearTablaMultiplicar(numero, limite) {
  return Array.from({length: limite}, (_, i) => i + 1)
    .map(i => `${numero} x ${i} = ${numero * i}`);
}

const tabla5 = crearTablaMultiplicar(5, 10);
console.log(tabla5);
// ["5 x 1 = 5", "5 x 2 = 10", ...]

// Crear array de estados iniciales
const formularios = Array.from({length: 3}, (_, i) => ({
  id: i + 1,
  campos: new Array(5).fill(""),
  valido: false
}));

Combinando métodos de manipulación

Los métodos de manipulación se combinan eficazmente para operaciones complejas:

const inventario = [
  { producto: "Laptop", stock: 5, precio: 800 },
  { producto: "Mouse", stock: 0, precio: 25 },
  { producto: "Teclado", stock: 3, precio: 60 }
];

// Reorganizar inventario: productos sin stock al final
function reorganizarInventario(inv) {
  const conStock = [];
  const sinStock = [];
  
  // Separar productos
  inv.forEach(producto => {
    if (producto.stock > 0) {
      conStock.push(producto);
    } else {
      sinStock.push(producto);
    }
  });
  
  // Combinar: primero con stock, luego sin stock
  return conStock.concat(sinStock);
}

const inventarioOrganizado = reorganizarInventario(inventario);
console.log(inventarioOrganizado);

// Actualizar stock de un producto específico
function actualizarStock(inventario, nombreProducto, nuevoStock) {
  const indice = inventario.findIndex(p => p.producto === nombreProducto);
  
  if (indice !== -1) {
    // Crear copia del producto con nuevo stock
    const productoActualizado = {...inventario[indice], stock: nuevoStock};
    
    // Reemplazar en el array
    inventario.splice(indice, 1, productoActualizado);
  }
  
  return inventario;
}