Cómo agregar, eliminar y reemplazar elementos usando Array.splice() en JavaScript

En JavaScript, el Array.splice() El método se puede usar para agregar, eliminar y reemplazar elementos de una matriz. Este método modifica el contenido de la matriz original eliminando o reemplazando elementos existentes y/o agregando nuevos elementos en su lugar. Array.splice() devuelve los elementos eliminados (si los hay) como una matriz.

Sintaxis

Esta es la sintaxis de Array.splice() :

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start — El índice inicial para cambiar elementos en la matriz.
• deleteCount — Un número entero que indica el número de elementos en la matriz para eliminar de start . Si deleteCount es 0 o negativo, no se elimina ningún elemento. En este caso, debe especificar al menos un elemento nuevo.
• item1, item2, ... — Los elementos que se agregarán a la matriz, comenzando desde start . Si no se especifica ningún elemento, splice() solo eliminará elementos de la matriz.

Eliminación de elementos

Aquí hay un ejemplo que usa Array.splice() para eliminar los dos primeros elementos del principio de una matriz:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// remove first elements
const removed = fruits.splice(0, 2);

console.log(fruits); // ['Mango', 'Banana']
console.log(removed); // ['Apple', 'Orange']

Si el deleteCount se omite, todos los elementos a partir de start se eliminan de la matriz:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

const removed = fruits.splice(1);

console.log(fruits); // ['Apple']
console.log(removed); // ['Orange', 'Mango', 'Banana']

Reemplazo de elementos

También puede reemplazar los elementos eliminados con uno nuevo usando Array.splice() :

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

const removed = fruits.splice(1, 2, 'Cherry', 'Watermelon');

console.log(fruits); // ['Apple', 'Cherry', 'Watermelon', 'Banana']
console.log(removed); // ['Orange', 'Mango']

Agregar elementos

Para agregar nuevos elementos con Array.splice() , simplemente configure el deleteCount a cero y pasar nuevos elementos:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

const removed = fruits.splice(2, 0, 'Cherry');

console.log(fruits); // ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana']
console.log(removed); // []

Compatibilidad del navegador

El Array.splice() El método funciona en todos los navegadores modernos, IE6 y superiores.

Para obtener más información sobre las matrices de JavaScript y cómo usarlas para almacenar múltiples piezas de información en una sola variable, consulte esta guía.