Como remover um valor específico de um array em JavaScript?

João E. - July 19, 2024

Problema: Removendo um Valor Específico de um Array

Arrays em JavaScript frequentemente precisam de alterações, incluindo a remoção de valores específicos. Essa tarefa pode ser necessária ao atualizar dados, filtrar elementos indesejados ou limpar entradas do usuário. Saber como remover um valor específico de um array é uma habilidade útil para desenvolvedores JavaScript.

Usando os Métodos indexOf e splice

Encontrando o Índice do Elemento

Para remover um valor de um array em JavaScript, use o método indexOf para encontrar a posição do elemento. Este método retorna o índice da primeira ocorrência do valor no array. Se o elemento não for encontrado, ele retorna -1.

Para verificar se o elemento existe no array, compare o resultado de indexOf com -1. Se o índice for maior que -1, o elemento está no array.

Removendo o Elemento com splice

Após encontrar o índice, use o método splice para remover o elemento. O método splice altera o array removendo ou substituindo elementos e/ou adicionando novos elementos.

O método splice recebe dois parâmetros principais:

O índice para começar a alterar o array
O número de elementos a serem removidos

Para remover um elemento, defina o segundo parâmetro como 1. Isso indica ao splice para remover um elemento a partir do índice especificado.

Veja como você pode usar esses métodos para remover um valor de um array:

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

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

Este código encontra o índice do valor 5 no array e o remove, se existir. O array resultante será [2, 9].

Dica: Removendo Múltiplas Ocorrências

Para remover todas as ocorrências de um valor de um array, use um loop while com indexOf e 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 remove todas as instâncias do valor 2 do array, resultando em [5, 9].

Exemplo de Código: Removendo um Único Elemento

Aqui está um exemplo de como remover um único elemento de um array:

// Cria um array
const frutas = ['maçã', 'banana', 'cereja', 'tâmara'];

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

// Define o elemento a ser removido
const frutaParaRemover = 'banana';

// Encontra o índice do elemento
const indice = frutas.indexOf(frutaParaRemover);

// Verifica se o elemento existe e o remove
if (indice > -1) {
  frutas.splice(indice, 1);
}

console.log('Array após a remoção:', frutas);

Neste exemplo, temos um array de frutas. Queremos remover 'banana' do array. Veja o que o código faz:

Usa indexOf para encontrar a posição de 'banana' no array.
Verifica se o índice é válido (maior que -1).
Se o elemento for encontrado, usa splice para removê-lo do array.

Quando você executar este código, verá esta saída:

Array original: ['maçã', 'banana', 'cereja', 'tâmara']
Array após a remoção: ['maçã', 'cereja', 'tâmara']

Isso mostra que 'banana' foi removida do array, enquanto os outros elementos permanecem. O método splice altera o array original, então você não precisa atribuir o resultado a uma nova variável.

Dica: Usando filter() para remover elementos

Você também pode usar o método filter() para remover um elemento de um array. Esta abordagem cria um novo array sem modificar o original:

const frutas = ['maçã', 'banana', 'cereja', 'tâmara'];
const frutaParaRemover = 'banana';

const novasFrutas = frutas.filter(fruta => fruta !== frutaParaRemover);

console.log('Array original:', frutas);
console.log('Novo array após a remoção:', novasFrutas);

Este método é útil quando você quer manter o array original intacto.

Soluções Alternativas

Função para Remover uma Única Ocorrência

Você pode criar uma função para remover uma única ocorrência de um valor de um array. Aqui está um exemplo:

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

Esta função recebe dois parâmetros:

arr: O array a ser modificado
value: O valor a ser removido

A função usa indexOf para encontrar a primeira ocorrência do valor. Se encontrado, ela usa splice para remover esse elemento. A função então retorna o array modificado.

Você pode usar esta função assim:

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

Dica: Usando filter() para imutabilidade

Se você prefere não modificar o array original, você pode usar o método filter() para criar um novo array sem a primeira ocorrência do valor:

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

Esta abordagem cria um novo array, deixando o original inalterado.

Função para Remover Todas as Ocorrências

Para remover todas as ocorrências de um valor de um array, você pode criar uma função que usa um loop:

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

Esta função funciona da seguinte maneira:

Ela inicia um loop que continua enquanto i for menor que o comprimento do array.
Se o elemento atual corresponder ao valor a ser removido, ela usa splice para removê-lo.
Se o elemento não corresponder, ela move para o próximo elemento aumentando i.
O loop continua até chegar ao final do array.

Você pode usar esta função assim:

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

Essas funções fornecem uma maneira de remover elementos de arrays sem alterar os métodos originais do array. Elas podem ser úteis quando você precisa realizar essas operações várias vezes em seu código.