Extraer y Modificar Partes de Arreglos: slice() y splice()

javascript

🔪 slice(): Extrayendo una Porción (Sin Modificar)

El método slice() (“rebanar”) nos permite crear una copia superficial de una porción de un arreglo existente, sin modificar el arreglo original. Es como cortar una rebanada de un pastel sin afectar el resto.

Funciona con dos argumentos opcionales:

  1. inicio: El índice donde comienza la extracción (incluido).
  2. fin: El índice donde termina la extracción (excluido).
let animales = ["Perro", "Gato", "Conejo", "Hamster", "Pez"];


// Extraer desde el índice 1 hasta el 3 (sin incluir el 3)
let mamiferosPequeños = animales.slice(1, 3);
console.log(mamiferosPequeños); // Muestra ["Gato", "Conejo"]


// Extraer desde el índice 2 hasta el final
let roedoresYPecez = animales.slice(2);
console.log(roedoresYPecez); // Muestra ["Conejo", "Hamster", "Pez"]


// Extraer los últimos 2 elementos (usando índice negativo)
let ultimosDos = animales.slice(-2);
console.log(ultimosDos); // Muestra ["Hamster", "Pez"]


// Crear una copia completa del arreglo
let copiaAnimales = animales.slice();
console.log(copiaAnimales); // Muestra ["Perro", "Gato", "Conejo", "Hamster", "Pez"]


// IMPORTANTE: El arreglo original NO cambia
console.log(animales); // Muestra ["Perro", "Gato", "Conejo", "Hamster", "Pez"]
INFO

💡 slice() es ideal cuando necesitas una parte de un arreglo para trabajar con ella sin riesgo de alterar el original.

✨ splice(): Modificando el Arreglo Original

El método splice() (“empalmar” o “insertar”) es mucho más poderoso (¡y potencialmente destructivo!). Modifica el contenido de un arreglo eliminando, reemplazando o agregando elementos nuevos directamente en el original.

También devuelve un arreglo con los elementos eliminados, si los hubiera.

Funciona con al menos un argumento, y opcionalmente más:

  1. inicio: El índice donde comenzar a cambiar el arreglo.
  2. cantidadAEliminar (opcional): El número de elementos a eliminar desde inicio.
  3. elemento1, elemento2, ... (opcional): Los elementos a agregar al arreglo, comenzando desde inicio.

Eliminar Elementos

let letras = ["a", "b", "c", "d", "e"];


// Eliminar 1 elemento desde el índice 2 ('c')
let letrasEliminadas = letras.splice(2, 1);


console.log(letras); // Muestra ['a', 'b', 'd', 'e'] (¡Original modificado!)
console.log(letrasEliminadas); // Muestra ['c']


// Eliminar 2 elementos desde el índice 1 ('b', 'd')
let masEliminadas = letras.splice(1, 2);
console.log(letras); // Muestra ['a', 'e']
console.log(masEliminadas); // Muestra ['b', 'd']

Reemplazar Elementos

Simplemente proporciona los nuevos elementos después de la cantidad a eliminar.

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


// Reemplazar 1 elemento en el índice 1 (el 2) por 99
let reemplazados = numeros.splice(1, 1, 99);


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

Agregar Elementos (sin eliminar)

Establece cantidadAEliminar en 0.

let colores = ["Rojo", "Verde", "Azul"];


// Agregar "Amarillo" y "Naranja" en el índice 1 (sin eliminar nada)
colores.splice(1, 0, "Amarillo", "Naranja");


console.log(colores); // Muestra ["Rojo", "Amarillo", "Naranja", "Verde", "Azul"]
CUIDADO

🔥 ¡Recuerda! splice() SIEMPRE modifica el arreglo original. Úsalo con cuidado, especialmente si otras partes de tu código dependen de ese arreglo.

🤔 ¿Cuándo Usar Cuál?

  • Usa slice() cuando necesites obtener una copia de una parte (o todo) del arreglo sin afectar el original.
  • Usa splice() cuando necesites modificar el arreglo original eliminando, agregando o reemplazando elementos en una posición específica.
☝️🤓
🏋️‍♂️ Ejercicio

Dado el arreglo: let codigo = ["React", "Vue", "Angular", "Svelte", "Solid"];

  1. Usa slice() para crear un nuevo arreglo frameworksPopulares que contenga solo “React”, “Vue” y “Angular”.
  2. Usa slice() para crear un nuevo arreglo ultimosFrameworks que contenga los últimos dos elementos del arreglo codigo.
  3. Verifica que el arreglo codigo original no haya cambiado después de las operaciones anteriores.
🏋️‍♂️ Ejercicio

Dado el arreglo: let tareas = ["Estudiar", "Comer", "Dormir"];

  1. Usa splice() para insertar la tarea "Trabajar" después de "Estudiar".
  2. Usa splice() para reemplazar "Dormir" con "Jugar" y "Relajarse".
  3. Usa splice() para eliminar "Comer" del arreglo.
  4. Muestra el arreglo tareas final después de todas las modificaciones.
🚀 Extra

Investiga sobre:

  1. ¿Qué significa que slice() crea una “copia superficial” (shallow copy)? ¿Qué implicaciones tiene si el arreglo contiene objetos u otros arreglos?
  2. ¿Cómo podrías usar splice() para vaciar completamente un arreglo? Compara esta forma con miArreglo.length = 0.
  3. Los métodos más nuevos toSpliced(). ¿Qué problema resuelve comparado con splice()?

Comentarios

Artículos relacionados

javascript

Arreglos - Métodos para agregar y quitar elementos

2 mins
javascript

Formas de Copiar Arreglos en JavaScript

5 mins