Lección 19: Métodos de Arrays (Parte 1)

🧠 Concepto

Los arrays tienen métodos incorporados que nos permiten manipularlos de formas muy variadas. En esta lección veremos los métodos para añadir, eliminar, extraer y buscar elementos.

Añadir elementos

.push() — Añade uno o más elementos al final del array. Modifica el array original.

let frutas = ['manzana', 'pera'];
frutas.push('uva');
console.log(frutas); // ['manzana', 'pera', 'uva']

frutas.push('naranja', 'kiwi');
console.log(frutas); // ['manzana', 'pera', 'uva', 'naranja', 'kiwi']

.unshift() — Añade elementos al principio.

let numeros = [2, 3];
numeros.unshift(1);
console.log(numeros); // [1, 2, 3]

Eliminar elementos

.pop() — Elimina el último elemento y lo devuelve.

let letras = ['a', 'b', 'c'];
let eliminado = letras.pop();
console.log(eliminado); // 'c'
console.log(letras);    // ['a', 'b']

.shift() — Elimina el primer elemento y lo devuelve.

let letras = ['a', 'b', 'c'];
let primero = letras.shift();
console.log(primero); // 'a'
console.log(letras);  // ['b', 'c']

Extraer sin modificar: .slice()

.slice(inicio, fin) devuelve una copia de una porción del array sin modificar el original.

let numeros = [10, 20, 30, 40, 50];
console.log(numeros.slice(1, 3)); // [20, 30] (índices 1 al 2)
console.log(numeros.slice(2));    // [30, 40, 50] (del 2 en adelante)
console.log(numeros.slice(-2));   // [40, 50] (últimos 2)
console.log(numeros);             // [10, 20, 30, 40, 50] (sin cambios)

Extraer modificando: .splice()

.splice(inicio, cantidadAEliminar, elementosAAgregar...) modifica el array original.

let colores = ['rojo', 'verde', 'azul', 'amarillo'];
let eliminados = colores.splice(1, 2); // elimina desde índice 1, 2 elementos
console.log(eliminados); // ['verde', 'azul']
console.log(colores);    // ['rojo', 'amarillo']

// También puede insertar
colores.splice(1, 0, 'negro', 'blanco');
console.log(colores); // ['rojo', 'negro', 'blanco', 'amarillo']

Unir y convertir

.concat() — Combina arrays sin modificar los originales.

let a = [1, 2];
let b = [3, 4];
let c = a.concat(b);
console.log(c); // [1, 2, 3, 4]

.join() — Une todos los elementos en un string.

let palabras = ['Hola', 'Mundo', 'JS'];
console.log(palabras.join(' '));  // "Hola Mundo JS"
console.log(palabras.join('-'));  // "Hola-Mundo-JS"
console.log(palabras.join(''));   // "HolaMundoJS"

Buscar en arrays

.indexOf() — Busca un elemento y devuelve su índice (o -1 si no existe).

let numeros = [10, 20, 30, 20, 40];
console.log(numeros.indexOf(20));   // 1 (primera ocurrencia)
console.log(numeros.indexOf(50));   // -1 (no existe)
console.log(numeros.lastIndexOf(20)); // 3 (última ocurrencia)

.includes() — Devuelve true o false si existe el elemento.

let frutas = ['manzana', 'pera', 'uva'];
console.log(frutas.includes('pera'));   // true
console.log(frutas.includes('kiwi'));   // false

💻 Ejemplo

let tareas = [];

// Añadir tareas
tareas.push('Estudiar JavaScript');
tareas.push('Hacer ejercicio');
tareas.unshift('Despertarse temprano');

console.log('Tareas:', tareas); // ['Despertarse...', 'Estudiar...', 'Hacer...']

// Completar primera tarea
let completada = tareas.shift();
console.log('Completada:', completada);
console.log('Pendientes:', tareas);

// Completar última tarea
let ultima = tareas.pop();
console.log('Última completada:', ultima);

// Añadir más y extraer con slice
tareas.push('Leer', 'Escribir', 'Meditar');
let primerasDos = tareas.slice(0, 2);
console.log('Primeras dos pendientes:', primerasDos);

// Buscar tarea
console.log('¿Está "Leer" en la lista?', tareas.includes('Leer'));
console.log('Posición de "Escribir":', tareas.indexOf('Escribir'));

// Unir en string
console.log('Lista: ' + tareas.join(', '));

📝 Ejercicio

1. Crea un archivo metodos-arrays-1.js.
2. Crea un array vacío listaCompra.
3. Añade 3 productos con .push().
4. Añade 1 producto al inicio con .unshift().
5. Elimina el último producto con .pop() y muéstralo.
6. Elimina el primer producto con .shift() y muéstralo.
7. Usa .join() para mostrar la lista como un string.
8. Usa .includes() para verificar si “leche” está en la lista.

let listaCompra = [];

listaCompra.push('pan', 'huevos', 'leche');
console.log('Después de push:', listaCompra);

listaCompra.unshift('fruta');
console.log('Después de unshift:', listaCompra);

let eliminado = listaCompra.pop();
console.log('Eliminado del final:', eliminado);
console.log('Lista actual:', listaCompra);

let primero = listaCompra.shift();
console.log('Eliminado del inicio:', primero);
console.log('Lista final:', listaCompra);

console.log('Lista como texto:', listaCompra.join(' - '));
console.log('¿Hay leche?', listaCompra.includes('leche'));

⚠️ Nota

Recuerda la diferencia clave:

• .slice() → NO modifica el array original (crea una copia).
• .splice() → SÍ modifica el array original.

Es uno de los errores más comunes entre principiantes. Practica hasta que te quede claro.

🎯 Tip

.push() devuelve la nueva longitud del array. Úsalo si necesitas saber cuántos elementos quedaron después de añadir:

let numeros = [1, 2, 3];
let nuevaLongitud = numeros.push(4);
console.log(nuevaLongitud); // 4