Volver al inicio
Arrays

Arrays: Métodos y Manipulación

Aprende a trabajar con arrays (listas de datos) y sus métodos más importantes para manipular colecciones de información.

1. ¿Qué es un Array?

Un array (o arreglo) es una estructura que permite almacenar múltiples valores en una sola variable. Es como una lista ordenada donde cada elemento tiene una posición (índice).

Los índices empiezan en 0, no en 1.

Crear arrays

Crear arraysjavascript
1// Forma más común: usando corchetes []
2const frutas = ["manzana", "banana", "naranja"];
3const numeros = [1, 2, 3, 4, 5];
4const mixto = ["texto", 42, true, null];
5 
6console.log(frutas); // ["manzana", "banana", "naranja"]
7console.log(numeros); // [1, 2, 3, 4, 5]
8 
9// Array vacío
10const vacio = [];
11 
12// Arrays pueden contener cualquier tipo de dato
13const datos = [
14  "Juan",
15  25,
16  true,
17  { nombre: "Maria", edad: 30 },
18  [1, 2, 3]
19];

Acceder y modificar elementos

Acceso a arraysjavascript
1const colores = ["rojo", "verde", "azul", "amarillo"];
2 
3// Acceder por índice (comienza en 0)
4console.log(colores[0]); // "rojo"
5console.log(colores[1]); // "verde"
6console.log(colores[2]); // "azul"
7 
8// Último elemento
9console.log(colores[colores.length - 1]); // "amarillo"
10 
11// Modificar un elemento
12colores[1] = "violeta";
13console.log(colores); // ["rojo", "violeta", "azul", "amarillo"]
14 
15// Longitud del array
16console.log(colores.length); // 4

2. Métodos Básicos: Añadir y Eliminar

push() y pop() - Al final

push() y pop()javascript
1const numeros = [1, 2, 3];
2 
3// push() - Añade elemento(s) al final
4numeros.push(4);
5console.log(numeros); // [1, 2, 3, 4]
6 
7numeros.push(5, 6);
8console.log(numeros); // [1, 2, 3, 4, 5, 6]
9 
10// pop() - Elimina el último elemento y lo devuelve
11const ultimo = numeros.pop();
12console.log(ultimo); // 6
13console.log(numeros); // [1, 2, 3, 4, 5]

unshift() y shift() - Al principio

unshift() y shift()javascript
1const letras = ["b", "c", "d"];
2 
3// unshift() - Añade elemento(s) al principio
4letras.unshift("a");
5console.log(letras); // ["a", "b", "c", "d"]
6 
7// shift() - Elimina el primer elemento y lo devuelve
8const primero = letras.shift();
9console.log(primero); // "a"
10console.log(letras); // ["b", "c", "d"]

💡 Resumen visual

  • • push() → Añade al final
  • • pop() → Elimina del final
  • • unshift() → Añade al principio
  • • shift() → Elimina del principio

3. slice() vs splice()

slice() - Extrae sin modificar

slice()javascript
1const animales = ["perro", "gato", "pájaro", "pez", "conejo"];
2 
3// slice(inicio, fin) - Extrae una porción (NO modifica el original)
4const algunos = animales.slice(1, 4);
5console.log(algunos); // ["gato", "pájaro", "pez"]
6console.log(animales); // ["perro", "gato", "pájaro", "pez", "conejo"] (sin cambios)
7 
8// Solo inicio (hasta el final)
9const desde2 = animales.slice(2);
10console.log(desde2); // ["pájaro", "pez", "conejo"]
11 
12// Índices negativos (desde el final)
13const ultimos2 = animales.slice(-2);
14console.log(ultimos2); // ["pez", "conejo"]
15 
16// Copiar un array
17const copia = animales.slice();
18console.log(copia); // ["perro", "gato", "pájaro", "pez", "conejo"]

💡 Cómo funciona el rango en slice()

slice(inicio, fin) → El índice inicio es INCLUSIVO (se incluye), pero el índice fin es EXCLUSIVO (se detiene antes).

Ejemplo: slice(1, 4) extrae desde el índice 1 hasta el índice 3 (no incluye el 4).

⚠️ Si usamos solo animales.slice() sin guardarlo en una variable, devuelve un NUEVO ARRAY pero este se pierde ya que no tiene persistencia.

splice() - Modifica el array

splice()javascript
1const frutas = ["manzana", "banana", "naranja", "kiwi", "uva"];
2console.log(frutas.length); // 5 elementos
3 
4// splice(inicio, cantidadEliminar, elementos...) - Modifica el array original
5 
6// Eliminar elementos
7const eliminados = frutas.splice(1, 2); // Desde índice 1, elimina 2 elementos
8console.log(eliminados); // ["banana", "naranja"]
9console.log(frutas); // ["manzana", "kiwi", "uva"]
10console.log(frutas.length); // 3 elementos (era 5, eliminó 2)
11 
12// Añadir elementos sin eliminar
13frutas.splice(1, 0, "pera", "melón"); // Añade 2 elementos en posición 1
14console.log(frutas); // ["manzana", "pera", "melón", "kiwi", "uva"]
15console.log(frutas.length); // 5 elementos (era 3, añadió 2)
16 
17// Reemplazar elementos
18frutas.splice(2, 1, "sandía"); // Elimina 1, añade 1 (mismo tamaño)
19console.log(frutas); // ["manzana", "pera", "sandía", "kiwi", "uva"]
20console.log(frutas.length); // 5 elementos (sin cambio)
21 
22// Ejemplo: eliminar 1, añadir 3
23frutas.splice(1, 1, "fresa", "mango", "papaya");
24console.log(frutas); // ["manzana", "fresa", "mango", "papaya", "sandía", "kiwi", "uva"]
25console.log(frutas.length); // 7 elementos (eliminó 1, añadió 3 = +2)

💡 Cómo funciona splice()

splice(inicio, cantidadEliminar, elementos...)

  • • inicio: índice desde donde empieza (inclusivo)
  • • cantidadEliminar: cuántos elementos eliminar desde ese índice
  • • elementos: (opcional) nuevos elementos a insertar en esa posición

Ejemplo: splice(1, 2) elimina 2 elementos empezando desde el índice 1 (elimina índices 1 y 2).

⚠️ Diferencia clave

  • • slice() → NO modifica el array original (devuelve uno nuevo)
  • • splice() → SÍ modifica el array original (devuelve lo eliminado)

4. Métodos de Iteración

forEach() - Ejecutar código para cada elemento

forEach()javascript
1const numeros = [1, 2, 3, 4, 5];
2 
3// forEach() - Ejecuta una función para cada elemento
4numeros.forEach(function(numero) {
5  console.log(numero * 2);
6});
7// Salida:
8// 2
9// 4
10// 6
11// 8
12// 10
13 
14// Con arrow function (más moderno)
15numeros.forEach(numero => {
16  console.log(numero * 2);
17});
18 
19// Con índice
20const frutas = ["manzana", "banana", "naranja"];
21frutas.forEach((fruta, indice) => {
22  console.log(`${indice}: ${fruta}`);
23});
24// Salida:
25// 0: manzana
26// 1: banana
27// 2: naranja

map() - Transformar cada elemento

map()javascript
1const numeros = [1, 2, 3, 4, 5];
2 
3// map() - Crea un NUEVO array transformando cada elemento
4const dobles = numeros.map(numero => numero * 2);
5console.log(dobles); // [2, 4, 6, 8, 10]
6console.log(numeros); // [1, 2, 3, 4, 5] (sin cambios)
7 
8// Transformar objetos
9const usuarios = [
10  { nombre: "Ana", edad: 25 },
11  { nombre: "Juan", edad: 30 },
12  { nombre: "María", edad: 28 }
13];
14 
15const nombres = usuarios.map(usuario => usuario.nombre);
16console.log(nombres); // ["Ana", "Juan", "María"]
17 
18// Crear elementos HTML
19const frutas = ["manzana", "banana", "naranja"];
20const listItems = frutas.map(fruta => `<li>${fruta}</li>`);
21console.log(listItems);
22// ["<li>manzana</li>", "<li>banana</li>", "<li>naranja</li>"]

filter() - Filtrar elementos

filter()javascript
1const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2 
3// filter() - Crea un NUEVO array solo con los elementos que cumplan la condición
4const pares = numeros.filter(numero => numero % 2 === 0);
5console.log(pares); // [2, 4, 6, 8, 10]
6 
7const mayoresQue5 = numeros.filter(numero => numero > 5);
8console.log(mayoresQue5); // [6, 7, 8, 9, 10]
9 
10// Filtrar objetos
11const productos = [
12  { nombre: "Laptop", precio: 800 },
13  { nombre: "Mouse", precio: 20 },
14  { nombre: "Teclado", precio: 50 },
15  { nombre: "Monitor", precio: 300 }
16];
17 
18const caros = productos.filter(producto => producto.precio > 100);
19console.log(caros);
20// [{ nombre: "Laptop", precio: 800 }, { nombre: "Monitor", precio: 300 }]

5. Búsqueda en Arrays

find() y findIndex()

find() y findIndex()javascript
1const usuarios = [
2  { id: 1, nombre: "Ana" },
3  { id: 2, nombre: "Juan" },
4  { id: 3, nombre: "María" }
5];
6 
7// find() - Devuelve el PRIMER elemento que cumple la condición
8const usuario = usuarios.find(u => u.id === 2);
9console.log(usuario); // { id: 2, nombre: "Juan" }
10 
11// Si no encuentra nada, devuelve undefined
12const noExiste = usuarios.find(u => u.id === 99);
13console.log(noExiste); // undefined
14 
15// findIndex() - Devuelve el ÍNDICE del primer elemento
16const indice = usuarios.findIndex(u => u.nombre === "María");
17console.log(indice); // 2

includes(), some() y every()

Verificar existenciajavascript
1const frutas = ["manzana", "banana", "naranja"];
2 
3// includes() - Verifica si existe un elemento
4console.log(frutas.includes("banana")); // true
5console.log(frutas.includes("kiwi")); // false
6 
7// indexOf() - Devuelve el índice del elemento (o -1 si no existe)
8console.log(frutas.indexOf("naranja")); // 2
9console.log(frutas.indexOf("kiwi")); // -1
10 
11// some() - Verifica si AL MENOS UNO cumple la condición
12const numeros = [1, 2, 3, 4, 5];
13console.log(numeros.some(num => num > 4)); // true
14console.log(numeros.some(num => num > 10)); // false
15 
16// every() - Verifica si TODOS cumplen la condición
17console.log(numeros.every(num => num > 0)); // true
18console.log(numeros.every(num => num > 3)); // false

6. reduce() - El Método Más Poderoso

reduce() es el método más versátil: puede reducir un array a un solo valor (suma, promedio, objeto, etc.).

reduce()javascript
1const numeros = [1, 2, 3, 4, 5];
2 
3// reduce() - Reduce el array a un solo valor
4// Suma total
5const suma = numeros.reduce((acumulador, numero) => {
6  return acumulador + numero;
7}, 0); // 0 es el valor inicial
8console.log(suma); // 15
9 
10// Más corto
11const sumaCorta = numeros.reduce((acc, num) => acc + num, 0);
12console.log(sumaCorta); // 15
13 
14// Encontrar el máximo
15const maximo = numeros.reduce((max, num) => num > max ? num : max, 0);
16console.log(maximo); // 5
17 
18// Contar ocurrencias
19const frutas = ["manzana", "banana", "manzana", "naranja", "banana", "manzana"];
20const contador = frutas.reduce((acc, fruta) => {
21  acc[fruta] = (acc[fruta] || 0) + 1;
22  return acc;
23}, {});
24console.log(contador);
25// { manzana: 3, banana: 2, naranja: 1 }

7. Otros Métodos Útiles

sort(), reverse(), join(), concat()javascript
1const numeros = [3, 1, 4, 1, 5, 9, 2, 6];
2 
3// sort() - Ordena el array (MODIFICA el original)
4numeros.sort((a, b) => a - b); // Orden ascendente
5console.log(numeros); // [1, 1, 2, 3, 4, 5, 6, 9]
6 
7// Orden descendente
8numeros.sort((a, b) => b - a);
9console.log(numeros); // [9, 6, 5, 4, 3, 2, 1, 1]
10 
11// reverse() - Invierte el array (MODIFICA el original)
12const letras = ["a", "b", "c", "d"];
13letras.reverse();
14console.log(letras); // ["d", "c", "b", "a"]
15 
16// join() - Convierte el array a string
17const palabras = ["Hola", "mundo", "desde", "JavaScript"];
18const frase = palabras.join(" ");
19console.log(frase); // "Hola mundo desde JavaScript"
20 
21// concat() - Une arrays (NO modifica originales)
22const arr1 = [1, 2, 3];
23const arr2 = [4, 5, 6];
24const unido = arr1.concat(arr2);
25console.log(unido); // [1, 2, 3, 4, 5, 6]
26 
27// Con spread operator (más moderno)
28const unido2 = [...arr1, ...arr2];
29console.log(unido2); // [1, 2, 3, 4, 5, 6]

8. Ejercicios Prácticos

Ejercicio 1: Filtrar números pares y calcular su suma

Dado un array de números, filtra solo los pares y calcula su suma usando filter() y reduce().

Planteamientojavascript
1const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2 
3// Tu código aquí
4 
5 
6 
7 
8console.log(pares); // [2, 4, 6, 8, 10]
9console.log(suma); // 30
Ver solución
Soluciónjavascript
1const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2 
3// Filtrar números pares
4const pares = numeros.filter(num => num % 2 === 0);
5 
6// Calcular suma de los pares
7const suma = pares.reduce((acc, num) => acc + num, 0);
8 
9console.log(pares); // [2, 4, 6, 8, 10]
10console.log(suma); // 30

Ejercicio 2: Transformar nombres a mayúsculas

Convierte un array de nombres a mayúsculas usando map().

Planteamientojavascript
1const nombres = ["ana", "juan", "maría", "pedro"];
2 
3// Tu código aquí
4 
5 
6console.log(mayusculas); // ["ANA", "JUAN", "MARÍA", "PEDRO"]
Ver solución
Soluciónjavascript
1const nombres = ["ana", "juan", "maría", "pedro"];
2 
3// Transformar a mayúsculas
4const mayusculas = nombres.map(nombre => nombre.toUpperCase());
5 
6console.log(mayusculas); // ["ANA", "JUAN", "MARÍA", "PEDRO"]

Ejercicio 3: Encontrar productos caros

Filtra productos con precio mayor a 50 y devuelve solo sus nombres.

Planteamientojavascript
1const productos = [
2  { nombre: "Laptop", precio: 800 },
3  { nombre: "Mouse", precio: 20 },
4  { nombre: "Teclado", precio: 50 },
5  { nombre: "Monitor", precio: 300 }
6];
7 
8// Tu código aquí
9 
10 
11 
12console.log(caros); // ["Laptop", "Monitor"]
Ver solución
Soluciónjavascript
1const productos = [
2  { nombre: "Laptop", precio: 800 },
3  { nombre: "Mouse", precio: 20 },
4  { nombre: "Teclado", precio: 50 },
5  { nombre: "Monitor", precio: 300 }
6];
7 
8// Filtrar productos caros y obtener solo nombres
9const caros = productos
10  .filter(p => p.precio > 50)
11  .map(p => p.nombre);
12 
13console.log(caros); // ["Laptop", "Monitor"]

Ejercicio 4: Calcular promedio de edades

Calcula el promedio de edad de un grupo de personas usando reduce().

Planteamientojavascript
1const personas = [
2  { nombre: "Ana", edad: 25 },
3  { nombre: "Juan", edad: 30 },
4  { nombre: "María", edad: 28 },
5  { nombre: "Pedro", edad: 35 }
6];
7 
8// Tu código aquí
9 
10 
11 
12console.log(promedio); // 29.5
Ver solución
Soluciónjavascript
1const personas = [
2  { nombre: "Ana", edad: 25 },
3  { nombre: "Juan", edad: 30 },
4  { nombre: "María", edad: 28 },
5  { nombre: "Pedro", edad: 35 }
6];
7 
8// Sumar todas las edades con reduce()
9const sumaEdades = personas.reduce((acc, persona) => acc + persona.edad, 0);
10 
11// Calcular el promedio
12const promedio = sumaEdades / personas.length;
13 
14console.log(promedio); // 29.5
Anterior: Estructuras de Control Siguiente: Funciones →