Como remover o item de um array no JavaScript?

Para saber como remover o item de um array no JavaScript, precisamos primeiro entender o contexto do problema, pois existem diversos métodos diferentes, um para cada caso. Por exemplo, caso não tenhamos o índice do array, então precisaremos encontrá-lo primeiro com .indexOf() ou .findIndex(). Então, a partir do índice, podemos utilizar o método .splice() para remover o item do array.

Podemos ainda remover o item diretamente do array sem saber seu índice utilizando o método .filter(). Além disso, podemos utilizar o método .shift() caso seja apenas o primeiro item do array ou .pop() caso seja o último item.

Como cada método vai trabalhar em um diferente contexto, então veremos cada um dos casos de forma mais detalhada a seguir.

Encontrando o índice em um array simples:

Utilize o método interno .indexOf() para retornar o índice de um array de strings ou números. Vejamos o seguinte exemplo:

// array de strings com nomes de frutas
var frutas = ['abacaxi', 'umbu', 'ameixa']

// retorna o índice de 'ameixa'
var indice = frutas.indexOf('ameixa')

// imprime 2 que é o índice encontrado
console.log(indice)

Lembre-se que o índice de um array começa sempre com zero, logo o terceiro item vai ter o índice 2. Vejamos outro exemplo, agora com números:

// array de números com idades de pessoas
var idades = [15, 20, 33, 45, 28, 19, 31]

// retorna o índice de 45
var indice = idades.indexOf(45)

// imprime 3 que é o índice encontrado
console.log(indice)

Encontrando o índice em um array de objetos:

Utilize o método interno .findIndex() para retornar o índice de um array de objetos. Para testar a condição da busca, precisamos passar como parâmetro do método um callback. Dessa forma, quando a condição for verdadeira, o método retorna o índice desejado. Vejamos o seguinte exemplo:

// array de objetos com informações de filmes
var filmes = [
  { nome: 'Matrix', ano: 1999 },
  { nome: 'A Origem', ano: 2010 },
  { nome: 'Ex-Machina', ano: 2015 },
]

// retorna o índice de 45
var indice = filmes.findIndex(item => item.nome === 'Matrix')

// imprime 0 que é o índice encontrado
console.log(indice)

Removendo o item do array a partir de um índice:

Utilize o método interno .splice() para remover um item específico de um array. O método segue a seguinte sintaxe:

array.splice(índice, quantidade)

Vejamos o seguinte exemplo prático:

// array de strings com nomes de pessoas
var nomes = ['Paulo', 'Juliana', 'Carlos', 'Ana', 'Francisco']

// remove do array a string 'Francisco'
nomes.splice(4, 1)

// imprime ['Paulo', 'Juliana', 'Carlos', 'Ana']
console.log(nomes)

Também podemos remover mais de um item de uma única vez aumentando a quantidade no segundo parâmetro do método .splice(). Vejamos mais um exemplo:

// array de strings com nomes de pessoas
var nomes = ['Paulo', 'Juliana', 'Carlos', 'Ana', 'Francisco']

// remove do array as strings 'Carlos' e 'Ana'
nomes.splice(2, 2)

// imprime ['Paulo', 'Juliana', 'Francisco']
console.log(nomes)

Removendo o item do array sem ter um índice:

Podemos também utilizar o método interno .filter() para realizar uma filtragem no array e remover apenas o item em questão. De forma semelhante ao .findIndex(), precisamos igualmente passar um callback afim de validar a condição do filtro. No caso do .filter(), ele retorna o array com todos os itens desejados, então fornecemos uma condição em que o item deva ser removido, exemplo:

// array de objetos com informações de filmes
var filmes = [
  { nome: 'Matrix', ano: 1999 },
  { nome: 'A Origem', ano: 2010 },
  { nome: 'Ex-Machina', ano: 2015 },
]

// retorna um novo array filtrado
var novoArray = filmes.filter(item => item.nome !== 'Matrix')

// imprime o array de filmes sem o objeto do filme Matrix
console.log(novoArray)

Cuidado ao utilizar o método .filter() pois ele pode remover mais de um item se a condição for invalidada dentro do callback quando retorna o valor false.

Removendo o primeiro item do array:

Utilize o método interno .shift() para remover o primeiro item de um array. Vejamos o exemplo a seguir:

// array de números
var numeros = [1, 2, 3]

// remove primeiro item do array
numeros.shift()

// imprime [2, 3]
console.log(numeros)

Removendo o último item do array:

Utilize o método interno .pop() para remover o último item de um array. Vejamos o exemplo a seguir:

// array de números
var numeros = [1, 2, 3]

// remove último item do array
numeros.pop()

// imprime [1, 2]
console.log(numeros)

Conclusão:

No JavaScript, a escolha do método para remover um item de um array depende do contexto do problema. É essencial analisar o cenário específico para decidir qual método é mais apropriado. O JavaScript oferece várias opções para resolver esse tipo de tarefa, cabe a você escolher a melhor delas de acordo com a situação.