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

Mateo G. - July 19, 2024

Problema: Eliminar un valor específico de un array

Los arrays en JavaScript a menudo requieren modificaciones, incluyendo la eliminación de valores específicos. Esta tarea puede ser necesaria al actualizar datos, filtrar elementos no deseados o limpiar entradas de usuario. Saber cómo eliminar un valor específico de un array es una habilidad útil para los desarrolladores de JavaScript.

Uso de los métodos indexOf y splice

Encontrar el índice del elemento

Para eliminar un valor de un array en JavaScript, usa el método indexOf para encontrar la posición del elemento. Este método devuelve el índice de la primera aparición del valor en el array. Si el elemento no se encuentra, devuelve -1.

Para verificar si el elemento existe en el array, compara el resultado de indexOf con -1. Si el índice es mayor que -1, el elemento está en el array.

Eliminar el elemento con splice

Después de encontrar el índice, usa el método splice para eliminar el elemento. El método splice cambia el array eliminando o reemplazando elementos y/o añadiendo nuevos elementos.

El método splice toma dos parámetros principales:

El índice desde donde empezar a cambiar el array
El número de elementos a eliminar

Para eliminar un elemento, establece el segundo parámetro a 1. Esto le indica a splice que elimine un elemento comenzando desde el índice especificado.

Así es como puedes usar estos métodos para eliminar un valor de un array:

const array = [2, 5, 9];
const valueToRemove = 5;

const index = array.indexOf(valueToRemove);
if (index > -1) {
  array.splice(index, 1);
}

Este código encuentra el índice del valor 5 en el array y lo elimina si existe. El array resultante será [2, 9].

Ejemplo: Eliminar múltiples apariciones

Para eliminar todas las apariciones de un valor de un array, usa un bucle while con indexOf y splice:

const array = [2, 5, 2, 9, 2];
const valueToRemove = 2;

let index = array.indexOf(valueToRemove);
while (index > -1) {
  array.splice(index, 1);
  index = array.indexOf(valueToRemove);
}

Este código elimina todas las instancias del valor 2 del array, resultando en [5, 9].

Ejemplo de Código: Eliminación de un Elemento Individual

Aquí tienes un ejemplo de cómo eliminar un elemento individual de un array:

// Crear un array
const fruits = ['apple', 'banana', 'cherry', 'date'];

console.log('Array original:', fruits);

// Definir el elemento a eliminar
const fruitToRemove = 'banana';

// Encontrar el índice del elemento
const index = fruits.indexOf(fruitToRemove);

// Comprobar si el elemento existe y eliminarlo
if (index > -1) {
  fruits.splice(index, 1);
}

console.log('Array después de la eliminación:', fruits);

En este ejemplo, tenemos un array de frutas. Queremos eliminar 'banana' del array. Esto es lo que hace el código:

Usa indexOf para encontrar la posición de 'banana' en el array.
Comprueba si el índice es válido (mayor que -1).
Si se encuentra el elemento, usa splice para eliminarlo del array.

Cuando ejecutes este código, verás esta salida:

Array original: ['apple', 'banana', 'cherry', 'date']
Array después de la eliminación: ['apple', 'cherry', 'date']

Esto muestra que 'banana' ha sido eliminado del array, mientras que los otros elementos permanecen. El método splice modifica el array original, por lo que no necesitas asignar el resultado a una nueva variable.

Ejemplo: Uso de filter() para eliminar elementos

También puedes usar el método filter() para eliminar un elemento de un array. Este enfoque crea un nuevo array sin modificar el original:

const fruits = ['apple', 'banana', 'cherry', 'date'];
const fruitToRemove = 'banana';

const newFruits = fruits.filter(fruit => fruit !== fruitToRemove);

console.log('Array original:', fruits);
console.log('Nuevo array después de la eliminación:', newFruits);

Este método es útil cuando quieres mantener intacto el array original.

Soluciones alternativas

Función para eliminar una sola ocurrencia

Puedes crear una función para eliminar una sola ocurrencia de un valor de un array. Aquí tienes un ejemplo:

function removeSingleOccurrence(arr, value) {
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

Esta función toma dos parámetros:

arr: El array a modificar
value: El valor a eliminar

La función usa indexOf para encontrar la primera ocurrencia del valor. Si se encuentra, usa splice para eliminar ese elemento. La función luego devuelve el array modificado.

Puedes usar esta función así:

const numbers = [1, 2, 3, 2, 4, 5];
console.log(removeSingleOccurrence(numbers, 2));
// Resultado: [1, 3, 2, 4, 5]

Ejemplo: Usar filter() para inmutabilidad

Si prefieres no modificar el array original, puedes usar el método filter() para crear un nuevo array sin la primera ocurrencia del valor:

function removeSingleOccurrence(arr, value) {
  let removed = false;
  return arr.filter(item => {
    if (item === value && !removed) {
      removed = true;
      return false;
    }
    return true;
  });
}

Este enfoque crea un nuevo array, dejando el original sin cambios.

Función para eliminar todas las ocurrencias

Para eliminar todas las ocurrencias de un valor de un array, puedes crear una función que use un bucle:

function removeAllOccurrences(arr, value) {
  let i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      i++;
    }
  }
  return arr;
}

Esta función funciona de la siguiente manera:

Inicia un bucle que continúa mientras i sea menor que la longitud del array.
Si el elemento actual coincide con el valor a eliminar, usa splice para eliminarlo.
Si el elemento no coincide, pasa al siguiente elemento aumentando i.
El bucle continúa hasta llegar al final del array.

Puedes usar esta función así:

const numbers = [1, 2, 3, 2, 4, 2, 5];
console.log(removeAllOccurrences(numbers, 2));
// Resultado: [1, 3, 4, 5]

Estas funciones proporcionan una forma de eliminar elementos de arrays sin cambiar los métodos originales del array. Pueden ser útiles cuando necesitas realizar estas operaciones varias veces en tu código.