Splice() de arrays en JavaScript explicado: eliminar, insertar, reemplazar (con ejemplos)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

.

1. Introducción: ¿Qué es el método splice?

JavaScript ofrece un método práctico llamado splice que permite agregar, eliminar y reemplazar elementos en un array de forma eficiente.

Por ejemplo, ¿alguna vez te has encontrado con situaciones como estas?

• Necesitas eliminar algunos elementos de un array.
• Necesitas insertar nuevos elementos en una posición específica.
• Necesitas reemplazar elementos existentes por valores diferentes.

En estos casos, el método splice resulta extremadamente útil.

Objetivo de este artículo

En este artículo explicaremos el método splice de JavaScript en detalle, desde los conceptos básicos hasta casos de uso prácticos. Con numerosos ejemplos de código, podrás adquirir conocimientos aplicables y reales.

A quién va dirigido este artículo

• Principiantes que acaban de comenzar a aprender JavaScript.
• Aprendices intermedios que desean profundizar su comprensión de la manipulación de arrays.
• Programadores que quieren escribir código eficiente para proyectos reales.

Qué aprenderás

Al finalizar el artículo, serás capaz de:

• Entender la sintaxis de splice y cómo usar sus argumentos.
• Realizar operaciones básicas como eliminar, insertar y reemplazar elementos.
• Diferenciar claramente este método de otros métodos de arrays y elegir la herramienta adecuada para cada caso.

En la siguiente sección, comenzaremos con el concepto central y la sintaxis del método splice.

2. Concepto central: visión general y sintaxis de splice

En esta sección explicaremos en detalle el concepto básico y la sintaxis del método splice de JavaScript.

2.1 Visión general del método splice

El método splice es un método destructivo que se utiliza para eliminar, insertar y reemplazar elementos en un array. Un método destructivo significa que modifica el array original directamente.

Al gestionar datos de forma dinámica en JavaScript, poder manipular los elementos de un array con flexibilidad es muy valioso, por lo que splice se usa con frecuencia.

Principales capacidades:

1. Eliminar elementos a partir de una posición especificada.
2. Insertar nuevos elementos en cualquier posición.
3. Reemplazar elementos existentes por valores diferentes.

2.2 Sintaxis del método splice

La sintaxis básica es la siguiente:

array.splice(start, deleteCount, item1, item2, ...);

Detalles de los argumentos:

1. start (obligatorio)

• Indica el índice desde el cual comenzar a modificar el array.
• Si se pasa un valor negativo, se cuenta desde el final del array.

2. deleteCount (opcional)

• Indica cuántos elementos se deben eliminar.
• Si se establece en 0, no se elimina ningún elemento y solo se insertan los nuevos.
• Si se omite, se eliminan todos los elementos desde start hasta el final del array.

3. item1, item2, … (opcional)

• Elementos que se insertarán en el array.
• Si se omite, splice solo realiza la eliminación.

Valor de retorno:

• Devuelve un nuevo array que contiene los elementos eliminados.

2.3 Ejemplos y explicaciones

1. Eliminando elementos

   let fruits = ["apple", "banana", "cherry", "date"];
   // Remove 2 elements starting at index 1
   let removed = fruits.splice(1, 2);
   
   console.log(fruits);   // ["apple", "date"]
   console.log(removed);  // ["banana", "cherry"]
   

2. Insertando elementos

   let colors = ["red", "blue"];
   // Insert 2 elements at index 1
   colors.splice(1, 0, "green", "yellow");
   
   console.log(colors);  // ["red", "green", "yellow", "blue"]
   

3. Reemplazando elementos

   let numbers = [1, 2, 3, 4, 5];
   // Replace 2 elements starting at index 1
   numbers.splice(1, 2, 'a', 'b');
   
   console.log(numbers);  // [1, 'a', 'b', 4, 5]
   

2.4 Puntos clave

• splice es destructivo: muta el array original, por lo que debe usarse con precaución.
• Altamente flexible: un solo método puede manejar eliminación, inserción y reemplazo.
• Versátil según la combinación de argumentos: admite tanto operaciones simples como avanzadas.

En la siguiente sección presentaremos ejemplos de uso más detallados y patrones de código prácticos. Profundicemos en tu comprensión mediante escenarios del mundo real.

3. Ejemplos: Operaciones básicas con splice

En esta sección, recorreremos ejemplos concretos del uso del método splice. Cubriremos eliminación, inserción y reemplazo con código de muestra.

3.1 Eliminación de elementos

Cómo eliminar elementos a partir de una posición específica

Ejemplo de código:

let fruits = ["apple", "banana", "cherry", "date"];
// Remove 2 elements starting at the second index
let removed = fruits.splice(1, 2);

console.log(fruits);   // ["apple", "date"]
console.log(removed);  // ["banana", "cherry"]

Explicación:

• Índice de inicio (1) : comienza en «banana» (índice 1).
• Número de elementos a eliminar (2) : elimina «banana» y «cherry».
• Valor devuelto : devuelve los elementos eliminados como un nuevo arreglo.

Nota:
Observa que el arreglo original fruits se modifica.

3.2 Inserción de elementos

Cómo insertar nuevos elementos en una posición específica

Ejemplo de código:

let colors = ["red", "blue"];
// Insert 2 elements at index 1
colors.splice(1, 0, "green", "yellow");

console.log(colors);  // ["red", "green", "yellow", "blue"]

Explicación:

• Índice de inicio (1) : comienza la inserción en el índice 1.
• Número de elementos a eliminar (0) : no elimina nada.
• Elementos a insertar («green», «yellow») : inserta «green» y «yellow».

Nota:
Si deseas insertar sin eliminar, establece deleteCount en 0.
Puedes insertar varios elementos separándolos con comas.

3.3 Reemplazo de elementos

Cómo reemplazar elementos existentes con nuevos valores

Ejemplo de código:

let numbers = [10, 20, 30, 40];
// Replace 2 elements starting at index 1
numbers.splice(1, 2, 25, 35);

console.log(numbers);  // [10, 25, 35, 40]

Explicación:

• Índice de inicio (1) : comienza en «20».
• Número de elementos a eliminar (2) : elimina «20» y «30».
• Elementos a insertar (25, 35) : inserta «25» y «35».

Nota:
Al eliminar e insertar en una sola llamada, puedes reemplazar elementos.

3.4 Uso de un índice negativo

Con splice, puedes usar un índice negativo para contar desde el final del arreglo.

Ejemplo de código:

let items = ["a", "b", "c", "d"];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(items);  // ["a", "b", "d"]

Explicación:

• Índice de inicio (-2) : apunta a «c» como posición de inicio de la eliminación.
  Los índices negativos permiten operar de forma relativa al final del arreglo.

3.5 Inserción en un arreglo vacío

También puedes usar splice con un arreglo vacío.

Ejemplo de código:

let empty = [];
empty.splice(0, 0, "new item");

console.log(empty);  // ["new item"]

Nota:
Esto es útil cuando deseas inicializar un arreglo vacío mientras insertas elementos.

3.6 Resumen de los ejemplos

• Eliminar elementos : especifica un índice de inicio y un recuento de eliminación.
• Insertar elementos : establece deleteCount en 0 y proporciona los ítems.
• Reemplazar elementos : elimina e inserta en la misma operación.
• Índices negativos : especifica posiciones desde el final.
• Inserción en arreglo vacío : inserta mientras inicializas.

En la siguiente sección, veremos usos más avanzados. Aprenderemos técnicas que ayudan en la manipulación de datos del mundo real y flujos de trabajo prácticos.

4. Ejemplos avanzados: Escenarios prácticos

En esta sección, presentaremos ejemplos avanzados usando el método splice. Basándonos en escenarios reales, explicaremos cómo manejar operaciones de datos más complejas.

4.1 Eliminación de elementos duplicados

Escenario: Quieres eliminar los elementos duplicados de una lista, dejando solo una instancia de cada uno.

Ejemplo de código:

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

// Remove duplicates
for (let i = 0; i < numbers.length; i++) {
  while (numbers.indexOf(numbers[i]) !== numbers.lastIndexOf(numbers[i])) {
    numbers.splice(numbers.lastIndexOf(numbers[i]), 1);
  }
}

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

Explicación:

1. Usa indexOf y lastIndexOf para verificar si el mismo valor aparece varias veces.
2. Si se encuentran duplicados, elimínalos usando splice .

4.2 Insertar un Elemento en una Posición Específica

Escenario: Necesitas insertar un nuevo elemento en una posición específica en un array.

Ejemplo de código:

let tasks = ["Start", "In Progress", "Done"];
tasks.splice(1, 0, "On Hold");

console.log(tasks); // ["Start", "On Hold", "In Progress", "Done"]

Explicación:

• Insertamos «On Hold» en el índice 1 .
• El array original se muta, y los elementos existentes se desplazan hacia la derecha.

4.3 Reemplazar Elementos que Cumplan una Condición

Escenario: Quieres reemplazar elementos que cumplan una condición específica con un valor diferente.

Ejemplo de código:

let scores = [50, 60, 70, 80, 90];

// Replace scores of 70 or lower with "Fail"
for (let i = 0; i < scores.length; i++) {
  if (scores[i] <= 70) {
    scores.splice(i, 1, "Fail");
  }
}

console.log(scores); // ["Fail", "Fail", "Fail", 80, 90]

Explicación:

1. Recorre el array y encuentra elementos que cumplan la condición.
2. Cuando se encuentra una coincidencia, reemplázala usando splice .

4.4 Eliminar Múltiples Elementos de un Array

Escenario: Quieres eliminar todas las ocurrencias de un valor específico de una vez.

Ejemplo de código:

let items = ["apple", "banana", "cherry", "banana", "date"];

// Remove all "banana"
for (let i = items.length - 1; i >= 0; i--) {
  if (items[i] === "banana") {
    items.splice(i, 1);
  }
}

console.log(items); // ["apple", "cherry", "date"]

Explicación:

• Recorrer hacia atrás evita problemas de desplazamiento de índices al eliminar elementos con splice .

4.5 Reordenar Elementos en un Array

Escenario: Quieres reordenar elementos en un array.

Ejemplo de código:

let numbers = [10, 20, 30, 40];

// Swap positions (reorder)
numbers.splice(1, 2, 35, 25);

console.log(numbers); // [10, 35, 25, 40]

Explicación:

• Esto elimina elementos existentes e inserta nuevos en el orden deseado.
• Se puede aplicar a procesamiento de datos más complejo y gestión de listas.

4.6 Resumen de Ejemplos Avanzados

• Eliminación de duplicados: útil para la limpieza de datos.
• Inserción de elementos: permite adiciones flexibles en listas y arrays.
• Reemplazo condicional: útil para filtrado y gestión de estados.
• Eliminación masiva: limpieza eficiente de datos no deseados.
• Reordenación: útil para ajustar el orden de visualización y gestión de listas.

En la siguiente sección, compararemos splice con otros métodos de array y explicaremos cómo elegir el método adecuado para cada situación.

5. Comparación con Otros Métodos

En esta sección, compararemos el método splice con otros métodos de array que cumplen propósitos similares. Entender sus características te ayuda a elegir el mejor enfoque.

5.1 splice vs slice

splice: cambios destructivos

• Muta el array original (destructivo).
• Puede eliminar, insertar y reemplazar elementos.

slice: copia no destructiva

• No muta el array original; devuelve un nuevo array (no destructivo).
• Solo extrae elementos de un rango; no puede insertar ni reemplazar.

Tabla de comparación:

Ejemplo: splice

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove 2 elements starting at index 1
console.log(arr); // [1, 4]

Ejemplo: slice

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // Get elements from index 1 up to (but not including) 3
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Punto clave:

• Si no quieres cambiar el array original, elige slice .
• Si necesitas modificaciones dinámicas en el lugar, usa splice .

5.2 splice vs push/pop

push: agregar al final

• Agrega un elemento al final de un array.
• Muta el array original.

pop: eliminar del final

• Elimina un elemento del final de un array.
• Modifica el array original.

Tabla de comparación:

Ejemplo: push

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

Ejemplo: pop

let arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1, 2]

Punto clave:

• push/pop son los más adecuados para operaciones simples al final de un array.
• splice es mejor para cambios más complejos (como editar una posición específica).

5.3 splice vs shift/unshift

shift: eliminar del principio

• Elimina el primer elemento de un array.
• Modifica el array original.

unshift: agregar al principio

• Añade elementos al principio de un array.
• Modifica el array original.

Tabla de comparación:

Ejemplo: shift

let arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]

Ejemplo: unshift

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

Punto clave:

• shift/unshift se especializan en operaciones al principio del array.
• splice brinda flexibilidad para posiciones intermedias o arbitrarias.

5.4 Resumen de comparaciones de métodos

Cómo elegir:

• Cuando necesitas flexibilidad: usa splice.
• Para operaciones simples: push/pop o shift/unshift son apropiados.
• Cuando deseas preservar el array original: slice es la mejor opción.

En la siguiente sección, discutiremos precauciones y buenas prácticas al usar splice. Cubriremos los puntos clave para escribir código seguro y eficiente.

6. Precauciones y buenas prácticas

En esta sección, explicaremos precauciones importantes y buenas prácticas para usar el método splice de JavaScript de manera eficaz.

6.1 Precauciones

1. Modifica el array original (método destructivo)
El método splice cambia directamente el array original. Si se usa sin cuidado, puede romper la consistencia de los datos.

Ejemplo: el array se modifica

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Solución: copia el array antes de editarlo
Si deseas conservar el array original, crea una copia usando slice primero.

let arr = [1, 2, 3, 4];
let copy = arr.slice(); // Create a copy
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

2. Cuidado con errores de índice
Si especificas un índice incorrecto, puedes obtener un comportamiento inesperado.

Ejemplo: uso incorrecto de un índice negativo

let arr = [1, 2, 3, 4];
arr.splice(-5, 1); // No error, but may not behave as expected
console.log(arr);  // [1, 2, 3, 4]

Solución: valida el rango de índices con anticipación

let arr = [1, 2, 3, 4];
let index = -5;

if (index >= -arr.length && index < arr.length) {
  arr.splice(index, 1);
} else {
  console.log("Index is out of range.");
}

3. Impacto en el rendimiento
Como splice desplaza los elementos después de cada operación, puede ser lento en arrays grandes.

Ejemplo: operar con datos grandes

let arr = Array(1000000).fill(0);
console.time("splice");
arr.splice(500000, 1); // Remove from the middle
console.timeEnd("splice");

Solución: considera dividir el array o usar un enfoque diferente

let arr = Array(1000000).fill(0);
let part1 = arr.slice(0, 500000); // First half
let part2 = arr.slice(500001);   // Second half
let result = part1.concat(part2); // Rebuild without the removed element

6.2 Buenas prácticas

1. Úsalo para la gestión de estado y edición de datos dinámicos
splice es útil al manejar listas dinámicas o actualizaciones impulsadas por el usuario.

Ejemplo: eliminar una tarea en una aplicación de tareas

let tasks = ["Task 1", "Task 2", "Task 3"];
let index = tasks.indexOf("Task 2");
if (index !== -1) {
  tasks.splice(index, 1);
}
console.log(tasks); // ["Task 1", "Task 3"]

Punto: combinar la búsqueda de índices y splice permite una gestión flexible.

2. Aprovecha los elementos eliminados
Porque splice devuelve los elementos eliminados, puedes usarlos para registro o almacenamiento temporal.

Ejemplo: registrar el elemento eliminado

let users = ["Alice", "Bob", "Charlie"];
let removed = users.splice(1, 1); // Remove Bob
console.log(removed[0] + " was removed."); // Bob was removed.

Punto: facilita el seguimiento del historial y las funciones de restauración.

3. Encapsula operaciones comunes en funciones reutilizables
Si utilizas la misma operación con frecuencia, conviértela en una función para mejorar la reutilización y la legibilidad.

Ejemplo: función para eliminar un elemento específico

function removeElement(arr, value) {
  let index = arr.indexOf(value);
  if (index !== -1) {
    arr.splice(index, 1);
  }
  return arr;
}

let items = ["a", "b", "c", "d"];
console.log(removeElement(items, "b")); // ["a", "c", "d"]

Punto: reduce la duplicación y mejora la legibilidad.

6.3 Resumen de Precauciones y Buenas Prácticas

• Recuerda que es destructivo : el array original se modifica.
• Siempre valida los rangos de índices : ten cuidado con índices negativos y accesos fuera de rango.
• Optimiza para arrays grandes : considera dividir o usar enfoques alternativos.
• Combínalo con registro/restauración : usa los elementos eliminados para gestionar el historial.
• Usa funciones para reutilizar : mejora la mantenibilidad con auxiliares reutilizables.

En la siguiente sección, cubriremos preguntas comunes sobre splice en formato de FAQ para ayudarte a resolver confusiones típicas del mundo real.

7. Preguntas Frecuentes (FAQ)

En esta sección, hemos recopilado preguntas y respuestas comunes sobre el método splice. Aclara tus dudas con anticipación y busca una comprensión más profunda.

7.1 Lista de FAQ

P1. ¿Es el método splice destructivo?
R. Sí, splice es un método destructivo.
Porque splice modifica el array original, debes usarlo con cuidado.

Ejemplo: el array original se modifica

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // Remove elements
console.log(arr); // [1, 4]

Solución: conservar el array original
Si deseas preservar el estado original, crea una copia usando slice.

let arr = [1, 2, 3, 4];
let copy = arr.slice();
copy.splice(1, 2);
console.log(arr);  // [1, 2, 3, 4] Original array is not changed
console.log(copy); // [1, 4] Only the copy is changed

P2. ¿Qué ocurre si no hay elementos para eliminar con splice?
R. Si no se elimina nada, se devuelve un array vacío.

Ejemplo: cuando deleteCount es 0

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 0, "new");
console.log(arr);     // [1, "new", 2, 3, 4]
console.log(removed); // [] (nothing was removed)

Punto:

• Si deleteCount se establece en 0, no ocurre eliminación y solo se realiza inserción.

P3. ¿Puedo usar splice en un array vacío?
R. Sí, puedes usarlo incluso en un array vacío.

Ejemplo: insertar en un array vacío

let arr = [];
arr.splice(0, 0, "item");
console.log(arr); // ["item"]

Punto:
Esto es útil al insertar nuevos elementos.

P4. ¿Cómo se manejan los índices negativos?
R. Los índices negativos indican posiciones desde el final del array.

Ejemplo: usar un índice negativo

let arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // Remove the second-to-last element
console.log(arr); // [1, 2, 3, 5]

Punto:

• Los índices negativos permiten una edición flexible desde el final.
• Son útiles cuando deseas operar cerca del final del array.

P5. ¿Cuál es la diferencia entre splice y slice?
R. La principal diferencia es si el array original se modifica.

Ejemplo: comportamiento de splice

let arr = [1, 2, 3, 4];
arr.splice(1, 2); 
console.log(arr); // [1, 4]

Ejemplo: comportamiento de slice

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] Original array is not changed

Q6. ¿Puedo agregar varios elementos con splice?
A. Sí, puedes agregar varios elementos enumerándolos separados por comas.

Ejemplo: insertar varios elementos

let arr = [1, 4];
arr.splice(1, 0, 2, 3);
console.log(arr); // [1, 2, 3, 4]

Punto:

• Proporciona varios elementos a partir del tercer argumento en adelante.
• Esto es útil para una gestión flexible de datos.

7.2 Resumen de Preguntas Frecuentes

1. Ten en cuenta que es destructivo: el array original se modifica.
2. No eliminar no genera errores: devuelve un array vacío.
3. Los índices negativos permiten editar desde el final: un enfoque conveniente.
4. Elegir entre splice y slice importa: usa slice si deseas preservar el array original.
5. Las inserciones múltiples son fáciles: útil para la gestión práctica de datos.

En la siguiente sección, recapitularemos los puntos principales del artículo y presentaremos recursos adicionales para seguir aprendiendo.

8. Conclusión

En este artículo, explicamos el método JavaScript splice desde lo básico hasta aplicaciones prácticas. Revisemos los puntos clave y ofrezcamos sugerencias para los próximos pasos.

8.1 Puntos Clave

1. Capacidades principales

• splice es un método potente para eliminar, insertar y reemplazar elementos de un array.
• Es un método destructivo, lo que significa que muta el array original.

1. Sintaxis y argumentos

• Utiliza la forma splice(start, deleteCount, item1, item2, ...).
• Combina el índice de inicio, la cantidad a eliminar y los elementos a insertar para realizar operaciones flexibles.

1. Uso básico y avanzado

• Además de la eliminación, inserción y reemplazo básicos, cubrimos patrones avanzados como la eliminación de duplicados y el reemplazo condicional.

1. Comparación con otros métodos

• splice muta el array, mientras que slice extrae sub‑arrays sin mutación.
• Para adiciones/eliminaciones simples, push / pop y shift / unshift también son útiles.

1. Precauciones y buenas prácticas

• Debido a que muta el array, crea una copia cuando necesites seguridad.
• Ten cuidado con los rangos de índices y el rendimiento, y considera optimizaciones cuando sea necesario.

1. Cobertura de preguntas frecuentes

• Respondimos preguntas comunes como índices negativos e inserción de varios elementos.

8.2 Próximos Pasos

Aunque splice es esencial para aprender la manipulación de arrays, JavaScript ofrece muchos otros métodos útiles. Aprender los siguientes métodos te permitirá realizar operaciones más avanzadas:

• Método map: transforma los elementos y devuelve un nuevo array.
• Método filter: extrae los elementos que cumplen una condición en un nuevo array.
• Método reduce: agrega los elementos en un único resultado.

Orden de aprendizaje recomendado:

1. Practica transformaciones de datos usando map y filter.
2. Prueba agregaciones más avanzadas con reduce.
3. Compara los métodos destructivos (push, pop, etc.) con los no destructivos (slice, concat, etc.) y usa cada uno de forma adecuada.

8.3 Recursos de Referencia

Para profundizar tu comprensión, considera usar estos recursos:

• Documentación oficial MDN Web Docs – splice
• Sitios de aprendizaje en línea
• JavaScript.info – cubre JavaScript desde lo básico hasta temas avanzados.
• Codecademy – ofrece experiencias de aprendizaje interactivas.
• Construye proyectos prácticos
• CodePen – ideal para crear y compartir demostraciones de código.
• JSFiddle – perfecto para probar y depurar JavaScript.

8.4 Notas Finales

El método splice es una habilidad clave para entender la manipulación de arrays en JavaScript. A través de este artículo, deberías haber aprendido todo, desde el uso básico hasta técnicas prácticas.

De ahora en adelante, intenta aplicar lo que aprendiste aquí a proyectos reales y explora combinar splice con otros métodos de arrays y optimizaciones de rendimiento.

¡Sigue profundizando en JavaScript y crea código más eficiente y potente!