Método splice() de JavaScript explicado: eliminar, insertar y reemplazar elementos (con ejemplos prácticos)

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

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

3. Formas prácticas de usar splice() (con ejemplos de código)

En esta sección, repasaremos ejemplos prácticos del método splice() de JavaScript. Cubriremos tres patrones comunes—eliminación, inserción y reemplazo—y revisaremos notas clave para cada uno.

3.1 Cómo eliminar elementos

Con splice(), puedes eliminar fácilmente elementos específicos de un arreglo.

Ejemplo 1: Eliminar un solo elemento

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 1); // Deletes "banana"
console.log(fruits); // ["apple", "cherry", "date"]

Explicación:

• Elimina 1 elemento a partir del índice 1 (“banana”).

Ejemplo 2: Eliminar varios elementos

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2); // Deletes "banana" and "cherry"
console.log(fruits); // ["apple", "date"]

Explicación:

• Elimina 2 elementos a partir del índice 1 (“banana” y “cherry”).

Nota:
Como los elementos eliminados se excluyen del arreglo, el arreglo original se modifica (este es un método destructivo).

3.2 Cómo insertar elementos

Con splice(), puedes insertar nuevos elementos en una posición específica.

Ejemplo 1: Insertar un elemento

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

Explicación:

• Establecer el segundo argumento en 0 permite insertar sin eliminar nada.

Ejemplo 2: Insertar varios elementos

let colors = ["red", "blue"];
colors.splice(1, 0, "green", "yellow"); // Inserts multiple elements
console.log(colors); // ["red", "green", "yellow", "blue"]

Nota:
No hay un límite estricto para la posición de inserción ni para la cantidad de elementos—puedes insertar tantos como necesites.

3.3 Cómo reemplazar elementos

También puedes reemplazar elementos existentes usando splice().

Ejemplo 1: Reemplazar un solo elemento

let numbers = [1, 2, 3, 4];
numbers.splice(1, 1, 5); // Replaces "2" at index 1 with "5"
console.log(numbers); // [1, 5, 3, 4]

Explicación:

• Elimina 1 elemento a partir del índice 1 y luego inserta 5 en la misma posición.

Ejemplo 2: Reemplazar varios elementos

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 5, 6); // Replaces "2" and "3" with "5" and "6"
console.log(numbers); // [1, 5, 6, 4]

Explicación:

• Elimina 2 elementos a partir del índice 1 y luego inserta 5 y 6.

4. Casos de uso avanzados de splice(): escenarios prácticos

A continuación, se presentan escenarios prácticos donde splice() puede ser especialmente útil—por ejemplo, al gestionar datos de formularios, editar filas de tablas y preprocesar conjuntos de datos.

4.1 Ejemplo: Manipular datos de formulario

Gestión de campos de formulario dinámicos

Al crear un formulario dinámico donde los usuarios pueden agregar o eliminar campos, splice() resulta extremadamente útil.

Ejemplo: Añadir y eliminar campos

let formData = ["Name", "Email", "Phone"];

// Insert a field
formData.splice(2, 0, "Address");
console.log(formData); // ["Name", "Email", "Address", "Phone"]

// Remove a field
formData.splice(1, 1);
console.log(formData); // ["Name", "Address", "Phone"]

Explicación:

• Para insertar, añadimos “Address” en el índice 2.
• Para eliminar, quitamos “Email” en el índice 1 y los elementos restantes se desplazan automáticamente.

Esto es útil cuando necesitas modificar dinámicamente los campos según las acciones del usuario.

4.2 Añadir y eliminar filas de tabla dinámicas

En aplicaciones web, la gestión de datos en forma de tabla es frecuente. Aquí tienes un ejemplo de inserción y eliminación de filas de tabla.

Ejemplo: Añadir y eliminar filas

let tableData = [
  ["ID", "Name", "Age"],
  [1, "Tanaka", 25],
  [2, "Sato", 30]
];

// Insert a new row
tableData.splice(2, 0, [3, "Takahashi", 28]);
console.log(tableData);
// [["ID", "Name", "Age"], [1, "Tanaka", 25], [3, "Takahashi", 28], [2, "Sato", 30]]

// Eliminar una fila
tableData.splice(1, 1);
console.log(tableData);
// [["ID", "Name", "Age"], [3, "Takahashi", 28], [2, "Sato", 30]]

Explanation:

• For inserting , we add a new data row at index 2.
• For deleting , we remove the row at index 1 (Tanaka).

This demonstrates flexible manipulation of table-like data structures.

4.3 Dataset Preprocessing and Editing

When handling large datasets, you may need to edit or replace specific records. Here’s an example of replacing part of a dataset.

Example: Updating a dataset

let users = [
  { id: 1, name: "Tanaka", age: 25 },
  { id: 2, name: "Sato", age: 30 },
  { id: 3, name: "Takahashi", age: 28 }
];

// Actualizar una entrada
users.splice(1, 1, { id: 2, name: "Yamada", age: 32 });
console.log(users);
// [{ id: 1, name: "Tanaka", age: 25 }, { id: 2, name: "Yamada", age: 32 }, { id: 3, name: "Takahashi", age: 28 }]

Explanation:

• Deletes the record at index 1 and replaces it with a new object.
• Even object-based data can be edited smoothly with splice() .

5. splice() vs slice(): Key Differences and When to Use Each (With a Comparison Table)

In JavaScript, splice and slice are commonly used methods for working with arrays. Because their names look similar, it’s easy to confuse them—but their behavior and use cases are very different. In this section, we’ll compare splice() and slice() and explain how to choose the right one.

5.1 The Core Difference Between splice() and slice()

5.2 splice() Examples and Characteristics

Characteristics:

• It mutates the original array (a destructive method).
• You can insert, delete, and replace elements.

Example 1: Editing elements with splice()

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2, "orange", "grape"); // Elimina "banana" y "cherry", luego inserta nuevos elementos
console.log(fruits); // ["apple", "orange", "grape", "date"]

Explanation:

• Deletes 2 elements starting at index 1, then inserts «orange» and «grape».
• The key point is that the original array is modified directly.

5.3 slice() Examples and Characteristics

Characteristics:

• The original array does not change (a non-destructive method).
• Used to extract elements into a new array.

Example 1: Extracting a portion with slice()

let fruits = ["apple", "banana", "cherry", "date"];
let result = fruits.slice(1, 3); // Extrae elementos del índice 1 hasta (pero sin incluir) 3
console.log(result); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "date"]

Explanation:

• Elements in the range [1, 3) are returned as a new array.
• The original array remains unchanged.

5.4 How to Choose Between splice() and slice()

1. Use splice() when you want to modify the array

Example: Removing an unnecessary item from a list

let tasks = ["task1", "task2", "task3"];
tasks.splice(1, 1); // Elimina el elemento en el índice 1
console.log(tasks); // ["task1", "task3"]

2. Use slice() when you want a subset without changing the original array

Example: Saving only part of an array separately

let data = [10, 20, 30, 40, 50];
let subset = data.slice(1, 4); // Extrae elementos del índice 1 hasta 4 (exclusivo)
console.log(subset); // [20, 30, 40]
console.log(data); // [10, 20, 30, 40, 50] (sin cambios)

5.5 Practical Code Example: splice() vs slice()

The following code helps you see the difference between splice and slice more clearly.

let items = ["A", "B", "C", "D", "E"];

// splice: destructivo (muta el array original)
let removed = items.splice(1, 2); // Elimina "B" y "C"
console.log(items); // ["A", "D", "E"]
console.log(removed); // ["B", "C"]

// slice: no destructivo (no muta el array original)
let extracted = items.slice(0, 2); // Extrae los elementos desde el índice 0 hasta 2 (exclusivo)
console.log(items); // ["A", "D", "E"] (sin cambios)
console.log(extracted); // ["A", "D"]

Key points:

• splice directly edits the original array, and returns the removed elements.
• slice keeps the original array intact and returns a new array.

6. splice() vs split(): Avoid Confusing Array Editing with String Splitting

JavaScript provides many methods for working with arrays and strings. Among them, split() looks similar to splice(), so they’re often confused—but they do completely different things. In this section, we’ll clarify the differences between split() and splice() to help you avoid common mistakes.

6.1 What Is split()?

split() is a string method that splits a string using a delimiter and returns an array.

Basic Syntax

string.split(separator, limit);

Parameter Details

1. separator (Required):

• A delimiter string or a regular expression used to split the string.

1. limit (Optional):

• The maximum number of elements to include in the returned array.

6.2 split() Examples

Example 1: Split a comma-separated string

let text = "apple,banana,cherry,date";
let result = text.split(","); // delimiter is ","
console.log(result); // ["apple", "banana", "cherry", "date"]

Example 2: Split a string by spaces

let sentence = "Hello World JavaScript";
let words = sentence.split(" "); // delimiter is a space
console.log(words); // ["Hello", "World", "JavaScript"]

Example 3: Split using a regular expression

let data = "2024/12/31";
let parts = data.split(/[-/]/); // split by "-" or "/"
console.log(parts); // ["2024", "12", "31"]

6.3 Key Differences Between splice() and split()

Here’s a table comparing splice and split side by side.

6.4 When to Use splice() vs split()

1. Use splice() when you want to edit an array

Example: Remove an unnecessary item from an array

let colors = ["red", "blue", "green"];
colors.splice(1, 1); // Removes the element at index 1
console.log(colors); // ["red", "green"]

2. Use split() when you want to convert a string into an array

Example: Split a sentence into words

let sentence = "I love JavaScript";
let words = sentence.split(" ");
console.log(words); // ["I", "love", "JavaScript"]

6.5 Combining split() and splice(): A Practical Example

Here’s a useful pattern: split a string into an array, then edit the array with splice().

Example: Split string data and then edit it

let data = "apple,banana,cherry,date";

// 1. Use split() to convert the string into an array
let fruits = data.split(","); // ["apple", "banana", "cherry", "date"]

// 2. Use splice() to edit the array
fruits.splice(2, 1, "grape"); // Replaces "cherry" with "grape"
console.log(fruits); // ["apple", "banana", "grape", "date"]

Key points:

• split converts a string into an array so it’s easier to work with.
• splice performs the needed edits (insert / delete / replace) on the array.

7. Important Notes When Using splice()

JavaScript’s splice() method is powerful, but depending on how you use it, it can cause unexpected behavior, errors, or performance issues. In this section, we’ll cover key cautions and best practices to help you use splice() safely and effectively.

7.1 Be Careful: splice() Mutates the Original Array

Problem: Risk of data loss due to destructive behavior

splice() modifies the original array directly. If you want to preserve the original data, you may accidentally lose it.

Example: The original array gets changed

let numbers = [1, 2, 3, 4];
let removed = numbers.splice(1, 2); // Removes 2 elements starting at index 1
console.log(numbers); // [1, 4] (original array is changed)
console.log(removed); // [2, 3] (removed elements)

Solución: Copiar el arreglo antes de editar

let numbers = [1, 2, 3, 4];
let copy = [...numbers]; // Copy the array
copy.splice(1, 2); // Edit the copy
console.log(numbers); // [1, 2, 3, 4] (original array is unchanged)
console.log(copy); // [1, 4]

7.2 Cuidado con los Problemas de Rendimiento

Problema: Alto costo al editar arreglos grandes

splice() puede provocar el desplazamiento de elementos y el re‑indexado al insertar o eliminar ítems. Con arreglos grandes, esto puede volverse lento.

Ejemplo: Editar un arreglo grande

let bigArray = Array(1000000).fill(0);
console.time("splice");
bigArray.splice(500000, 1); // Removes one element in the middle
console.timeEnd("splice"); // Measure execution time

Solución: Utilizar procesamiento por lotes o enfoques alternativos

• Dividir el arreglo y procesar fragmentos más pequeños.
• Considerar métodos no destructivos como slice() o concat() cuando sea apropiado.

7.3 Prevenir Errores Causados por Valores de Índice Incorrectos

Problema: Los índices fuera de rango pueden generar comportamientos inesperados

Con splice(), especificar un índice fuera de rango no lanza un error. Eso puede dificultar la detección de bugs.

Ejemplo: Índice fuera de rango

let items = ["A", "B", "C"];
items.splice(5, 1); // Out-of-range index
console.log(items); // ["A", "B", "C"] (no error occurs)

Solución: Validar el índice antes de llamar a splice()

let items = ["A", "B", "C"];
let index = 5;

if (index < items.length) {
  items.splice(index, 1);
} else {
  console.log("The specified index is out of range.");
}

7.4 Utilizar el Valor de Retorno (Elementos Eliminados)

Punto clave: Los elementos eliminados se devuelven como un arreglo

splice() devuelve los elementos eliminados en forma de arreglo. Al usar este valor de retorno, puedes crear lógica más flexible.

Ejemplo: Guardar los elementos eliminados en otro arreglo

let tasks = ["task1", "task2", "task3"];
let removed = tasks.splice(1, 1); // Removes the element at index 1
console.log(removed); // ["task2"]

Uso práctico: Guardar el historial de eliminaciones

let history = [];
let tasks = ["task1", "task2", "task3"];

let removed = tasks.splice(1, 1);
history.push(...removed);

console.log(history); // ["task2"]

7.5 Evitar Errores al Combinar splice() con Otros Métodos

• Usando map(): Si deseas transformar cada elemento, usa map() en lugar de splice().
• Usando filter(): Si deseas extraer elementos según una condición, usa filter() en lugar de splice().

Ejemplo: Extraer solo los elementos que cumplen una condición

let numbers = [10, 20, 30, 40, 50];
let filtered = numbers.filter(num => num > 20);
console.log(filtered); // [30, 40, 50]

8. Resumen: Puntos Clave para Dominar splice()

Hasta ahora, hemos cubierto el método splice() de JavaScript desde lo básico hasta casos de uso avanzados y advertencias importantes. En esta sección, repasaremos lo aprendido y organizaremos los conceptos clave que puedes aplicar en proyectos reales.

8.1 Repaso Rápido de los Conceptos Básicos de splice()

• Propósito: Un método que puede eliminar, insertar y reemplazar elementos en un arreglo.
• Sintaxis:

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

• Características principales:

1. Eliminar elementos → Quitar datos innecesarios.
2. Insertar elementos → Añadir nuevos datos en una posición específica.
3. Reemplazar elementos → Cambiar datos existentes por valores diferentes.

Ejemplo: Operaciones básicas (eliminar / insertar / reemplazar)

let data = ["A", "B", "C", "D"];

// Delete
data.splice(1, 2); // ["A", "D"]

// Insert
data.splice(1, 0, "X", "Y"); // ["A", "X", "Y", "D"]

// Replace
data.splice(2, 1, "Z"); // ["A", "X", "Z", "D"]

Por eso splice() es tan útil: permite escribir ediciones de arreglos de forma compacta y legible.

8.2 Revisando Diferencias con Otros Métodos

1. splice() vs slice()

• splice(): Modifica el array original (destructivo) → lo mejor para editar.
• slice(): No modifica el array original (no destructivo) → lo mejor para extraer.

1. splice() vs split()

• splice(): Un método para editar arrays.
• split(): Un método para dividir cadenas en arrays.

8.3 Resumen de Casos de Uso Prácticos

• Gestión de datos de formularios: Añadir o eliminar campos para crear formularios dinámicos.
• Edición de datos de tablas: Insertar o eliminar filas para actualizaciones flexibles de la tabla.
• Procesamiento de datos: Editar eficientemente conjuntos de datos JSON o basados en objetos.

8.4 Mejores Prácticas y Precauciones Clave

• Ten cuidado con ediciones destructivas: Dado que splice() modifica el array original, crea una copia cuando sea necesario.
• Conciencia de rendimiento: Para conjuntos de datos grandes, considera operaciones más pequeñas o métodos alternativos.
• Prevención de errores: Valida los rangos de índices y añade verificaciones cuando sea necesario.
• Utiliza el valor de retorno: Rastrea los elementos eliminados para registros o historial.
• Considera otros métodos: Usa filter() o map() cuando se ajusten mejor a tu objetivo.

8.5 Cómo Seguir Mejorando tus Habilidades con splice()

1. Aprende escribiendo código real

• Intenta usar splice() en escenarios cotidianos para ganar confianza mediante la práctica.

2. Aprende los métodos de arrays relacionados juntos

• filter: Extrae elementos que coinciden con una condición.
• map: Transforma cada elemento de un array.
• reduce: Agrega valores en un único resultado.

3. Usa la documentación oficial y recursos confiables

• Consulta MDN Web Docs para las últimas actualizaciones.
• Explora más ejemplos y comparaciones con otros métodos de arrays.

Resumen y Próximos Pasos

En este artículo, explicamos los siguientes temas sobre el método splice() de JavaScript:

1. Sintaxis básica y cómo funcionan los parámetros
2. Ejemplos concretos para eliminar, insertar y reemplazar elementos
3. Diferencias con otros métodos (slice, split) y cómo elegir
4. Precauciones importantes, prevención de errores y consejos de rendimiento

splice() es una herramienta extremadamente poderosa para la manipulación de arrays en JavaScript. Una vez que la uses correctamente, tu código será mucho más eficiente y flexible.

A continuación, intenta ejecutar los ejemplos de código de este artículo en tu propio entorno. Cuanto más practiques, más cómodo te sentirás editando arrays, y eso mejorará directamente tus habilidades en JavaScript.

9. Preguntas Frecuentes (FAQ): Preguntas Comunes Sobre splice()

Aquí tienes algunas de las preguntas y respuestas más comunes sobre el método splice() de JavaScript. Estas FAQ ayudan a principiantes y desarrolladores intermedios a aclarar dudas y profundizar su comprensión.

Q1. ¿splice() modifica el array original?

R. Sí. splice() modifica el array original directamente.
El método splice() se considera destructivo porque cambia el contenido del array después de la operación.

Ejemplo:

let colors = ["red", "blue", "green"];
colors.splice(1, 1); // Removes the element at index 1
console.log(colors); // ["red", "green"]

Q2. ¿Cuál es la diferencia entre splice() y slice()?

R. splice() muta el array original, mientras que slice() no lo hace.

Ejemplo: slice() es no destructivo

let colors = ["red", "blue", "green"];
let newColors = colors.slice(1, 2);
console.log(colors);    // ["red", "blue", "green"]
console.log(newColors); // ["blue"]

Q3. ¿Cómo añado elementos usando splice()?

R. Establece el segundo argumento (deleteCount) en 0 para insertar elementos.

Ejemplo: Insertar elementos

let fruits = ["apple", "banana"];
fruits.splice(1, 0, "grape", "orange");
console.log(fruits); // ["apple", "grape", "orange", "banana"]

Q4. ¿Cómo puedo eliminar el último elemento usando splice()?

A. Usa -1 como índice de inicio, o calcula el último índice usando la longitud del array.

Ejemplo:

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

Q5. ¿Puedo buscar un elemento y eliminarlo con splice()?

A. Sí. Encuentra primero el índice y luego elimínalo con splice().

Ejemplo: Buscar por valor y eliminar

let fruits = ["apple", "banana", "cherry"];
let index = fruits.indexOf("banana");
if (index !== -1) {
  fruits.splice(index, 1);
}
console.log(fruits); // ["apple", "cherry"]

Q6. ¿A qué debo prestar atención al usar splice() con conjuntos de datos grandes?

A. Ten en cuenta el costo de rendimiento y considera procesar en bloques más pequeños.

Ejemplo: Medir el rendimiento

let bigArray = Array(100000).fill(0);
console.time("splice");
bigArray.splice(50000, 1000);
console.timeEnd("splice");

Q7. ¿Cómo reemplazo varios elementos usando splice()?

A. Pasa varios elementos nuevos a partir del tercer argumento.

Ejemplo: Reemplazar varios elementos

let numbers = [1, 2, 3, 4];
numbers.splice(1, 2, 5, 6, 7);
console.log(numbers); // [1, 5, 6, 7, 4]

Resumen

Esta sección de preguntas frecuentes cubrió tanto preguntas básicas como avanzadas sobre splice().

Principales conclusiones:

• splice() muta el array original, así que úsalo con cuidado.
• Entender las diferencias entre slice() y split() ayuda a evitar confusiones.
• Considera el rendimiento y la prevención de errores para escribir código más seguro.

Usa estas preguntas frecuentes como referencia mientras pruebas los ejemplos de código y profundizas tu comprensión de splice().

10. Resumen final: Principales conclusiones y próximos pasos de aprendizaje

En este artículo, proporcionamos una explicación completa del método splice() de JavaScript. Cubrimos todo, desde los conceptos básicos hasta casos de uso del mundo real y preguntas frecuentes, para que los lectores comprendan plenamente cómo funciona splice(). Esta sección final repasa todo el artículo y sugiere qué aprender a continuación.

10.1 Puntos clave de splice()

• splice() es un método usado para eliminar, insertar y reemplazar elementos en un array.
• Sintaxis :

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

• Principales casos de uso :
• Eliminación de elementos
• Inserción de elementos
• Reemplazo de elementos

10.2 Escenarios comunes donde se usa splice()

• Gestión de datos de formularios: Ideal para agregar o eliminar campos.
• Operaciones en tablas dinámicas: Útil para insertar o eliminar filas.
• Preprocesamiento de datos: Ayuda a editar conjuntos de datos JSON y registros basados en objetos.

10.3 splice() comparado con otros métodos de arrays

• splice() vs slice(): splice() muta el array original, mientras que slice() no lo hace.
• splice() vs split(): split() es para cadenas y crea arrays al dividir texto.
• splice() vs map() / filter(): Usa map() y filter() para transformaciones y filtrado, y usa splice() para ediciones directas del array.

10.4 Próximos pasos de aprendizaje

1. Escribe código práctico: Prueba los ejemplos de este artículo y crea el hábito de programar regularmente.
2. Aprende otros métodos de arrays: Estudia map(), filter(), reduce() y practica combinarlos con splice().
3. Aplica splice() en proyectos reales: Úsalo para manipulaciones de arrays más avanzadas en tus propias aplicaciones.
4. Mantente al día con actualizaciones: Sigue a MDN y otros recursos oficiales para aprender nuevas funcionalidades y mejoras.

10.5 Palabras finales

splice() es uno de los métodos de arrays más potentes y usados frecuentemente en JavaScript. Al aplicar lo que aprendiste en este artículo a proyectos reales, fortalecerás tus habilidades y serás más eficiente manejando datos en JavaScript.

Dominar operaciones flexibles de arrays mejorará significativamente tu productividad y confianza en el desarrollo con JavaScript.