Los arreglos son una estructura de datos fundamental en cualquier lenguaje de programación. En JavaScript, los arreglos son objetos que permiten almacenar una colección de elementos ordenados. Los elementos pueden ser de cualquier tipo, incluyendo números, cadenas, objetos y funciones. Los métodos de arreglos son funciones predefinidas que se utilizan para manipular y transformar los arreglos. Estos métodos son el pilar fundamental para trabajar de manera libre y eficiente con JavaScript, te los explico a continuación.
1. forEach()
El método forEach() es una forma sencilla de recorrer todos los elementos de un arreglo y realizar una acción en cada uno de ellos. Este método ejecuta una función para cada elemento del arreglo.
La función proporcionada como argumento a forEach() recibe tres argumentos:
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// Salida: a, b, c*
// Con índice*
array1.forEach((element, index) => {
console.log(`${index}: ${element}`);
});
// Salida: 0: a, 1: b, 2: c*Casos de uso comunes
const usuarios = [
{ nombre: 'Juan', edad: 25 },
{ nombre: 'María', edad: 30 },
{ nombre: 'Pedro', edad: 35 }
];
*// Mostrar información de usuarios*
usuarios.forEach(*usuario* => {
console.log(`${usuario.nombre} tiene ${usuario.edad} años`);
});
*// Actualizar propiedades*
usuarios.forEach(*usuario* => {
usuario.activo = true;
});2. map()
El método map() es una forma eficiente de transformar los elementos de un arreglo en otros elementos. Este método crea un nuevo arreglo con los resultados de la llamada a una función para cada elemento del arreglo.
La función proporcionada como argumento a map() recibe tres argumentos:
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const array1 = [1, 4, 9, 16];
const map1 = array1.map(*x* => x * 2);
console.log(map1); *// [2, 8, 18, 32]*
*// Transformar objetos*
const personas = [
{ nombre: 'Juan', edad: 25 },
{ nombre: 'María', edad: 30 }
];
const nombres = personas.map(*persona* => persona.nombre);
console.log(nombres); *// ['Juan', 'María']*Ejemplos avanzados
*// Transformar datos de API*
const productos = [
{ id: 1, nombre: 'Laptop', precio: 1000 },
{ id: 2, nombre: 'Mouse', precio: 25 }
];
const productosConDescuento = productos.map(*producto* => ({
...producto,
precioConDescuento: producto.precio * 0.9,
descuento: producto.precio * 0.1
}));
*// Mapear con índice*
const numeros = [1, 2, 3, 4, 5];
const numerosConIndice = numeros.map((*numero*, *index*) => ({
valor: numero,
posicion: index
}));3. filter()
El método filter() es una forma útil de filtrar los elementos de un arreglo y obtener solo aquellos que cumplen ciertas condiciones. Este método crea un nuevo arreglo con todos los elementos que cumplan la condición implementada en la función proporcionada.
La función proporcionada como argumento a filter() recibe tres argumentos:
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(*word* => word.length > 6);
console.log(result); *// ['exuberant', 'destruction', 'present']*
*// Filtrar objetos*
const usuarios = [
{ nombre: 'Juan', edad: 25, activo: true },
{ nombre: 'María', edad: 30, activo: false },
{ nombre: 'Pedro', edad: 35, activo: true }
];
const usuariosActivos = usuarios.filter(*usuario* => usuario.activo);
console.log(usuariosActivos); *// [{ nombre: 'Juan', edad: 25, activo: true }, { nombre: 'Pedro', edad: 35, activo: true }]*Filtros complejos
*// Filtrar por múltiples condiciones*
const productos = [
{ nombre: 'Laptop', precio: 1000, categoria: 'Electrónicos', stock: 5 },
{ nombre: 'Mouse', precio: 25, categoria: 'Electrónicos', stock: 0 },
{ nombre: 'Libro', precio: 15, categoria: 'Libros', stock: 10 }
];
const productosDisponibles = productos.filter(*producto* =>
producto.stock > 0 && producto.precio < 100
);
*// Filtrar elementos únicos*
const numeros = [1, 2, 2, 3, 3, 3, 4, 5];
const numerosUnicos = numeros.filter((*numero*, *index*, *array*) =>
array.indexOf(numero) === index
);4. reduce()
El método reduce() es una forma poderosa de reducir un arreglo a un solo valor. Este método aplica una función acumuladora que procesa cada elemento de un arreglo y devuelve un único valor.
La función proporcionada como argumento a reduce() recibe cuatro argumentos:
- El acumulador
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const array1 = [1, 2, 3, 4];
const reducer = (*accumulator*, *currentValue*) => accumulator + currentValue;
console.log(array1.reduce(reducer)); *// 10*
*// Con valor inicial*
console.log(array1.reduce(reducer, 5)); *// 15*Casos de uso avanzados
*// Agrupar elementos*
const personas = [
{ nombre: 'Juan', edad: 25, ciudad: 'Madrid' },
{ nombre: 'María', edad: 30, ciudad: 'Barcelona' },
{ nombre: 'Pedro', edad: 25, ciudad: 'Madrid' }
];
const agrupadosPorCiudad = personas.reduce((*acc*, *persona*) => {
if (!acc[persona.ciudad]) {
acc[persona.ciudad] = [];
}
acc[persona.ciudad].push(persona);
return acc;
}, {});
*// Encontrar el elemento con mayor valor*
const productos = [
{ nombre: 'Laptop', precio: 1000 },
{ nombre: 'Mouse', precio: 25 },
{ nombre: 'Teclado', precio: 75 }
];
const productoMasCaro = productos.reduce((*max*, *producto*) =>
producto.precio > max.precio ? producto : max
);5. find()
El método find() es una forma sencilla de encontrar el primer elemento que cumple cierta condición. Este método devuelve el valor del primer elemento del arreglo que cumple con la función de prueba proporcionada.
La función proporcionada como argumento a find() recibe tres argumentos:
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(*element* => element > 10);
console.log(found); *// 12*
*// Buscar en objetos*
const usuarios = [
{ id: 1, nombre: 'Juan', activo: true },
{ id: 2, nombre: 'María', activo: false },
{ id: 3, nombre: 'Pedro', activo: true }
];
const usuario = usuarios.find(*u* => u.id === 2);
console.log(usuario); *// { id: 2, nombre: 'María', activo: false }*Búsquedas complejas
*// Buscar por múltiples propiedades*
const empleados = [
{ nombre: 'Juan', departamento: 'IT', salario: 50000 },
{ nombre: 'María', departamento: 'HR', salario: 45000 },
{ nombre: 'Pedro', departamento: 'IT', salario: 55000 }
];
const empleadoIT = empleados.find(*emp* =>
emp.departamento === 'IT' && emp.salario > 50000
);
*// Buscar con función personalizada*
const buscarPorNombre = (*array*, *nombre*) => {
return array.find(*item* =>
item.nombre.toLowerCase().includes(nombre.toLowerCase())
);
};6. findIndex()
El método findIndex() es una forma sencilla de encontrar el índice del primer elemento que cumple cierta condición. Este método devuelve el índice del primer elemento del arreglo que cumple con la función de prueba proporcionada.
La función proporcionada como argumento a findIndex() recibe tres argumentos:
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = *element* => element > 13;
console.log(array1.findIndex(isLargeNumber)); *// 3*
*// Buscar índice en objetos*
const usuarios = [
{ id: 1, nombre: 'Juan' },
{ id: 2, nombre: 'María' },
{ id: 3, nombre: 'Pedro' }
];
const indiceUsuario = usuarios.findIndex(*u* => u.nombre === 'María');
console.log(indiceUsuario); *// 1*Casos de uso prácticos
*// Actualizar elemento específico*
const productos = [
{ id: 1, nombre: 'Laptop', precio: 1000 },
{ id: 2, nombre: 'Mouse', precio: 25 }
];
const indice = productos.findIndex(*p* => p.id === 2);
if (indice !== -1) {
productos[indice].precio = 30;
}
*// Eliminar elemento*
const eliminarPorId = (*array*, *id*) => {
const indice = array.findIndex(*item* => item.id === id);
if (indice !== -1) {
array.splice(indice, 1);
}
return array;
};7. every()
El método every() es una forma sencilla de comprobar si todos los elementos de un arreglo cumplen cierta condición. Este método comprueba si todos los elementos del arreglo pasan la prueba implementada por la función proporcionada.
La función proporcionada como argumento a every() recibe tres argumentos:
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const array1 = [1, 30, 39, 29, 10, 13];
const isBelowThreshold = *currentValue* => currentValue < 40;
console.log(array1.every(isBelowThreshold)); *// true*
*// Validar formulario*
const formulario = {
nombre: 'Juan',
email: '[email protected]',
edad: 25
};
const camposRequeridos = ['nombre', 'email', 'edad'];
const formularioValido = camposRequeridos.every(*campo* =>
formulario[campo] && formulario[campo].toString().trim() !== ''
);Validaciones complejas
*// Validar que todos los usuarios sean adultos*
const usuarios = [
{ nombre: 'Juan', edad: 25 },
{ nombre: 'María', edad: 30 },
{ nombre: 'Pedro', edad: 17 }
];
const todosAdultos = usuarios.every(*usuario* => usuario.edad >= 18);
console.log(todosAdultos); *// false*
*// Validar estructura de datos*
const productos = [
{ id: 1, nombre: 'Laptop', precio: 1000 },
{ nombre: 'Mouse', precio: 25 }, *// Falta id*
{ id: 3, nombre: 'Teclado', precio: 75 }
];
const estructuraValida = productos.every(*producto* =>
producto.id && producto.nombre && producto.precio
);8. some()
El método some() es una forma sencilla de comprobar si al menos un elemento de un arreglo cumple cierta condición. Este método comprueba si al menos un elemento del arreglo cumple con la prueba implementada por la función proporcionada.
La función proporcionada como argumento a some() recibe tres argumentos:
- El valor del elemento actual
- El índice del elemento actual
- El arreglo que se está recorriendo
const array1 = [1, 2, 3, 4, 5];
const even = *element* => element % 2 === 0;
console.log(array1.some(even)); *// true*
*// Verificar permisos*
const permisos = ['read', 'write', 'admin'];
const tienePermisoAdmin = permisos.some(*permiso* => permiso === 'admin');
console.log(tienePermisoAdmin); *// true*Casos de uso avanzados
*// Verificar si hay productos en stock*
const productos = [
{ nombre: 'Laptop', stock: 0 },
{ nombre: 'Mouse', stock: 5 },
{ nombre: 'Teclado', stock: 0 }
];
const hayStock = productos.some(*producto* => producto.stock > 0);
console.log(hayStock); *// true*
*// Verificar si hay errores*
const resultados = [
{ operacion: 'suma', resultado: 5, error: null },
{ operacion: 'resta', resultado: null, error: 'División por cero' },
{ operacion: 'multiplicacion', resultado: 10, error: null }
];
const hayErrores = resultados.some(*resultado* => resultado.error !== null);
console.log(hayErrores); *// true*9. concat()
El método concat() se utiliza para fusionar dos o más arreglos en un solo arreglo. Este método no modifica los arreglos originales, sino que devuelve un nuevo arreglo que contiene los elementos de los arreglos originales.
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const newArray = array1.concat(array2, array3);
console.log(newArray); *// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']*
*// Con spread operator (más moderno)*
const newArray2 = [...array1, ...array2, ...array3];
console.log(newArray2); *// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']*Casos de uso prácticos
*// Combinar listas de usuarios*
const usuariosActivos = [
{ id: 1, nombre: 'Juan', activo: true },
{ id: 2, nombre: 'María', activo: true }
];
const usuariosInactivos = [
{ id: 3, nombre: 'Pedro', activo: false }
];
const todosLosUsuarios = usuariosActivos.concat(usuariosInactivos);
*// Agregar elementos individuales*
const numeros = [1, 2, 3];
const numerosConNuevos = numeros.concat(4, 5, 6);
console.log(numerosConNuevos); *// [1, 2, 3, 4, 5, 6]*10. slice()
El método slice() se utiliza para extraer una sección de un arreglo y devolver un nuevo arreglo con los elementos seleccionados. Este método no modifica el arreglo original.
El método slice() toma dos argumentos opcionales:
- El índice de inicio (incluido)
- El índice de fin (excluido)
const array1 = ['a', 'b', 'c', 'd', 'e'];
const newArray = array1.slice(1, 4);
console.log(newArray); *// ['b', 'c', 'd']*
*// Solo índice de inicio*
const desdeIndice2 = array1.slice(2);
console.log(desdeIndice2); *// ['c', 'd', 'e']*
*// Copiar todo el arreglo*
const copia = array1.slice();
console.log(copia); *// ['a', 'b', 'c', 'd', 'e']*Casos de uso avanzados
*// Paginación*
const productos = Array.from({ length: 100 }, (*_*, *i*) => ({ id: i + 1, nombre: `Producto ${i + 1}` }));
const obtenerPagina = (*array*, *pagina*, *elementosPorPagina*) => {
const inicio = (pagina - 1) * elementosPorPagina;
const fin = inicio + elementosPorPagina;
return array.slice(inicio, fin);
};
const pagina1 = obtenerPagina(productos, 1, 10);
console.log(pagina1.length); *// 10*
*// Obtener los últimos elementos*
const ultimosElementos = (*array*, *cantidad*) => {
return array.slice(-cantidad);
};
const ultimos3 = ultimosElementos([1, 2, 3, 4, 5], 3);
console.log(ultimos3); *// [3, 4, 5]*Métodos adicionales importantes
includes()
Verifica si un arreglo incluye un elemento específico:
const frutas = ['manzana', 'banana', 'naranja'];
console.log(frutas.includes('banana')); *// true*
console.log(frutas.includes('uva')); *// false*indexOf() y lastIndexOf()
Encuentra la posición de un elemento:
const numeros = [1, 2, 3, 2, 4];
console.log(numeros.indexOf(2)); *// 1*
console.log(numeros.lastIndexOf(2)); *// 3*join()
Convierte un arreglo en una cadena:
const palabras = ['Hola', 'mundo', 'JavaScript'];
console.log(palabras.join(' ')); *// "Hola mundo JavaScript"*
console.log(palabras.join('-')); *// "Hola-mundo-JavaScript"*Combinando métodos
Cadena de transformaciones
const productos = [
{ nombre: 'Laptop', precio: 1000, categoria: 'Electrónicos' },
{ nombre: 'Mouse', precio: 25, categoria: 'Electrónicos' },
{ nombre: 'Libro', precio: 15, categoria: 'Libros' }
];
*// Filtrar, transformar y ordenar*
const resultado = productos
.filter(*producto* => producto.categoria === 'Electrónicos')
.map(*producto* => ({
...producto,
precioConIVA: producto.precio * 1.21
}))
.sort((*a*, *b*) => a.precio - b.precio);
console.log(resultado);Análisis de datos
const ventas = [
{ producto: 'Laptop', cantidad: 5, precio: 1000 },
{ producto: 'Mouse', cantidad: 20, precio: 25 },
{ producto: 'Teclado', cantidad: 10, precio: 75 }
];
*// Calcular estadísticas*
const estadisticas = {
totalVentas: ventas.reduce((*sum*, *venta*) => sum + (venta.cantidad * venta.precio), 0),
productosVendidos: ventas.reduce((*sum*, *venta*) => sum + venta.cantidad, 0),
productoMasVendido: ventas.reduce((*max*, *venta*) =>
venta.cantidad > max.cantidad ? venta : max
),
promedioPrecio: ventas.reduce((*sum*, *venta*) => sum + venta.precio, 0) / ventas.length
};
console.log(estadisticas);Mejores prácticas
1. Usar métodos inmutables
*// ❌ Mutar el arreglo original*
const numeros = [1, 2, 3, 4, 5];
numeros.push(6); *// Modifica el arreglo original*
*// ✅ Crear un nuevo arreglo*
const numerosNuevos = [...numeros, 6];2. Preferir métodos funcionales
*// ❌ Bucle for tradicional*
const cuadrados = [];
for (let i = 0; i < numeros.length; i++) {
cuadrados.push(numeros[i] * numeros[i]);
}
*// ✅ Método funcional*
const cuadrados = numeros.map(*n* => n * n);3. Encadenar métodos cuando sea apropiado
*// ✅ Cadena clara y legible*
const resultado = datos
.filter(*item* => item.activo)
.map(*item* => ({ ...item, procesado: true }))
.sort((*a*, *b*) => a.nombre.localeCompare(b.nombre));Conclusión
Los métodos de arreglo en JavaScript son herramientas poderosas que permiten:
- Manipular datos de manera eficiente
- Escribir código más legible y mantenible
- Aplicar programación funcional en JavaScript
- Reducir la complejidad del código
Los 10 métodos esenciales:
- forEach() - Iterar sobre elementos
- map() - Transformar elementos
- filter() - Filtrar elementos
- reduce() - Reducir a un valor
- find() - Encontrar primer elemento
- findIndex() - Encontrar índice
- every() - Verificar todos los elementos
- some() - Verificar al menos uno
- concat() - Combinar arreglos
- slice() - Extraer secciones
Dominar estos métodos te permitirá escribir código más elegante, eficiente y fácil de mantener. Recuerda que la práctica es clave para internalizar estos conceptos.
