¿Cómo eliminar un elemento en un arreglo (array) en JavaScript?

Métodos de los arreglos

Los arreglos o array en JavaScript proporcionan muchos métodos que son muy útiles a la hora de trabajar con ellos. En este es la continuación de ¿Cómo agregar un elemento a un array en JavaScript? Donde explico cómo se gregan elementos a un array y ahora toca como eliminar elementos de un array en JavaScript.

Eliminar elementos

Estos son los métodos que agregan y eliminan elementos desde al principio o al final de un array:

     arr.push (... items): agrega elementos al final,
     arr.pop (): extrae un elemento del final,
     arr.shift () - extrae un elemento desde el principio,
     arr.unshift (... items): agrega elementos al principio.

Todos estos métodos los iremos explicando en siguientes artículos, ahora entraremos en materia.

¿Cómo eliminar un elemento de un arreglo en JavaScript?

Los array o matrices son objetos, por lo que podemos intentar usar delete:

let arr = ["I", "go", "home"];

delete arr[1]; // remove "go"

alert( arr[1] ); // undefined

// now arr = ["I",  , "home"];
alert( arr.length ); // 3

El elemento se eliminó, pero la matriz todavía tiene 3 elementos, podemos ver que arr.length == 3.

Eso es natural, porque eliminar un elemento de un objeto como lo estamos haciendo en el ejemplo, solo elimina un valor por la clave. Es todo lo que hace. Esto funciona para los objetos. Pero para los arreglos, generalmente queremos que el resto de los elementos se desplace y ocupe el lugar liberado. Esperamos tener un arreglo más corto ahora.

Por lo tanto, se deben utilizar métodos especiales.

SPLICE

El método array.splice (inicio) es una navaja suiza para los array. Puede hacer todo: insertar, eliminar y reemplazar elementos.

La sintaxis es:

arr.splice(index[, deleteCount, elem1, ..., elemN])

Comienza desde el índice (la posición que queremos afectar) que se le pasa por parámetro: elimina los elementos deleteCount y luego inserta elem1, ..., elemN en su lugar. Devuelve la matriz de elementos eliminados.

Este método es fácil de entender con ejemplos.

Comencemos con la eliminación:

let arr = ["Estrada", "Web", "Group"];
arr.splice(1, 1); // Para la posición  1 elimina 1 elemento
alert( arr ); //Resultado:  ["Estrada ", " Group "]

Fácil, ¿verdad? A partir del índice 1, eliminó 1 elemento.

En el siguiente ejemplo eliminamos 4 elementos y los reemplazamos con los otros dos:

let arr = ["Yo", "estudio", "JavaScript", "en", "Estrada Web", "Group"];

// elimina los primeros 4 elementos y los remplaza con otros dos
arr.splice(0, 4, "Comparte ", "en tus redes sociales ");

alert( arr ) // Resultado: ["Comparte ", " en tus redes sociales ", "Estrada Web ", " Group"]

Aquí podemos ver los elementos que devuelve el array son los elementos eliminados:

let arr = ["Yo", "estudio", "JavaScript", "en", "Estrada Web", "Group"];

// eliminar los primeros 2 elementos del array
let removed = arr.splice(0, 2);

alert( removed ); // Resultado: "Yo", "estudio",  <-- elementos eliminados del array

El método splice también puede insertar los elementos sin ninguna eliminación. Para eso necesitamos establecer el parámetro de eliminación en 0:

let arr = ["Yo", "estudio", "JavaScript"]
// from index 2
// delete 0
// then insert "complex" and "language"
arr.splice(2, 0, "en Estrada Web ", "Group");

alert( arr ); // Resultado: "Yo", "estudio", "JavaScript", "en Estrada Web ", "Group"

Como podemos ver el método splice de array en Javascript nos ayuda a eliminar, remplazar o insertar nuevos elementos en un arreglo.

Espero que les sirva esta explicación y sus ejemplos. Si tienen comentarios u observaciones escríbanme en el apartado de comentarios o contacto y en breve les responderé.