Mi Blog
Cómo eliminar un elemento específico de un array en JavaScript

Cómo eliminar un elemento específico de un array en JavaScript

 

Cuando trabajamos con arrays en JavaScript, es común encontrarnos con la necesidad de eliminar un elemento específico, ya sea por su valor o su posición. Afortunadamente, JavaScript proporciona diversas formas de lograrlo, desde métodos integrados como splice o filter, hasta combinaciones de funciones que permiten manejar este proceso de manera eficiente.

Seguid leyendo y os enseñaré a eliminar un elemento en concreto de un array en Javascript...

 

 

¿QUÉ ES UN ARRAY?

Un array es una estructura de datos que permite almacenar múltiples valores en una sola variable. Es similar a una lista, y se utiliza para organizar datos que están relacionados entre sí, como una colección de números, cadenas o incluso otros arrays y objetos.

Características principales:

  • Ordenado: Los elementos del array están organizados por índices, que comienzan en 0.
  • Dinámico: En JavaScript, los arrays pueden cambiar de tamaño y tipo de contenido dinámicamente.
  • Heterogéneo: Puede contener diferentes tipos de datos, como números, cadenas, objetos, e incluso otros arrays.

 

Con loa arrays mantenemos el código mucho más ordenado y legible.

 

 

Web Oficial: https://www.javascript.com/

 

 

Eliminar un elemento de un array con JS es sencillo y existen muchas formas de hacerlo

 

 

1.- ELEMENTOS NECESARIOS PARA ESTE TUTORIAL

  • Un editor de texto + navegador web
  • Un IDE compatible con JS

 

 

2.- BORRAR UN ELEMENTO CON SPLICE()

Splice() nos permite elimina elementos de un array a partir de un índice específico. En el siguiente ejemplo tenemos un array de 5 elementos. Borraremos del array el elemento de la posición 2 (índice 1). Recordad que los índices empiezan en 0 y no en 1.

let arr = [1, 2, 3, 4, 5];
// Eliminar el elemento en la posición 2 (índice 1)
arr.splice(1, 1);
console.log(arr); // [1, 3, 4, 5]

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando splice():

Eliminar un elemento en un array en JavascriptEliminar elemento con splice()

 

 

3.- BORRAR UN ELEMENTO CON FILTER()

Filter() nos permite crear un nuevo array (o sobrescribir el actual) excluyendo los elementos que no cumplen una condición.

let arr = [1, 2, 3, 4, 5];
// Eliminar todos los elementos que sean iguales a 3
arr = arr.filter(item => item !== 3);
console.log(arr); // [1, 2, 4, 5]

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando filter():

Eliminar un elemento en un array en JavascriptEliminar elemento con filter()

 

 

 

4.- BORRAR UN ELEMENTO CON POP()

Pop() sirve para eliminar el último elemento del array.

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

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando pop():

Eliminar un elemento en un array en JavascriptEliminar elemento con pop()

 

 

5.- BORRAR UN ELEMENTO CON SHIFT()

Shift() sirve al contrario que pop(), para el eliminar el primer elemento del array.

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

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando shift():

Eliminar un elemento en un array en JavascriptEliminar elemento con shift()

 

 

6.- BORRAR UN ELEMENTO CON DELETE()

Delete() elimina un elemento del array, pero deja un espacio vacío (undefined).

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

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando slice():

Eliminar un elemento en un array en JavascriptEliminar elemento con delete()

 

 

7.- BORRAR UN ELEMENTO CON ÍNDICE Y SLICE()

Slice() más índices nos sirve para crear un nuevo array excluyendo el elemento por índice.

let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2;
arr = [...arr.slice(0, indexToRemove), ...arr.slice(indexToRemove + 1)];
console.log(arr); // [1, 2, 4, 5]

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando índices y slice():

Eliminar un elemento en un array en JavascriptEliminar elemento con índice y slice()

 

 

8.- BORRAR UN ELEMENTO CON REDUCE()

Con reduce(), podremos recrear un nuevo array excluyendo el elemento no deseado.

let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2;
arr = arr.reduce((acc, item, index) => {
if (index !== indexToRemove) acc.push(item);
return acc;
}, []);
console.log(arr); // [1, 2, 4, 5]

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando reduce():

Eliminar un elemento en un array en JavascriptEliminar elemento con reduce()

 

 

9.- BORRAR UN ELEMENTO CON UN BUCLE FOR()

Con este método for(), aunque no está muy optimizado, es eficaz.

let arr = [1, 2, 3, 4, 5];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 3) {
newArr.push(arr[i]);
}
}
console.log(newArr); // [1, 2, 4, 5]

 

En la siguiente imagen podéis ver la ejecución del javascript del ejemplo anterior utilizando un bucle for:

Eliminar un elemento en un array en JavascriptEliminar elemento con bucle for()

 

 

10.- RESUMEN

Como resumen, si queremos eliminar un elemento en concreto de un array, nos guiaremos por estas sencillas reglas:

  • Usaremos splice() para modificar el array directamente.
  • Usaremos filter() para crear un nuevo array excluyendo elementos según una condición.
  • Usaremos métodos como pop() o shift() son útiles para eliminar el primer o último elemento.
  • usaremos métodos avanzados como reduce() o bucles son útiles para personalizar más la operación.

 

 

ENJOY!


Raúl Prieto Fernández

Sitio Web: raulprietofernandez.net

Si quieres ir rápido, ve solo. Si quieres llegar lejos, ve acompañado.