Remover elementos de um array com JavaScript
Vamos ver neste artigo as diferentes formas de excluir elementos de um array utilizando JavaScript.
O que você vai aprender neste artigo?
* Remover o primeiro elemento do array
* Remover o último elemento do array
* Remover um elemento de acordo com sua posição
* Remover várias ocorrências de um mesmo elemento
* Remover valores duplicados de um array
* Remover elementos de acordo com uma condição
* Remover elementos de um array de objetos de acordo com uma condição
Remover o primeiro elemento do array
Para remover o primeiro elemento de um array, podemos utilizar o método shift().
var numeros = [1, 2, 3, 4, 5, 7, 8, 9, 10];
numeros.shift();
console.log(numeros);
Remover o último elemento do array
Para remover o último elemento de um array, podemos utilizar o método pop().
var numeros = [1, 2, 3, 4, 5, 7, 8, 9, 10];
numeros.pop();
console.log(numeros);
Remover um elemento de acordo com sua posição
Para remover um elemento de uma posição qualquer, primeiro se faz necessário localizar este elemento dentro do array. Para isso, podemos utilizar o método indexOf().
var numeros = [1, 2, 3, 4, 5, 7, 8, 9, 10];
var index = numeros.indexOf(3);
Depois de localizar o índice, podemos utilizar o método splice() para remover o elemento desejado.
if (index > -1) {
numeros.splice(index, 1);
}
Perceba que fizemos uma condição antes de executar o splice. Se o método indexOf() não localizar o elemento desejado, o seu retorno será -1.
O método splice recebe dois parâmetros, o primeiro é a posição no array e o segundo é a quantidade de elementos a remover. O splice modifica o array original e retorna um nova array contendo os elementos que foram removidos.
Uma forma de simplificar o comando acima, seria fazer da seguinte forma:
numeros.splice(numeros.indexOf(3), 1);
Remover várias ocorrências de um mesmo elemento
Vamos ver agora um exemplo onde podemos excluir várias ocorrências de um mesmo elemento.
var estados = ["RJ", "MG", "SP", "SC", "SP", "SP", "PR", "PE", "PA"];
var buscar = "SP";
var indice = estados.indexOf(buscar);
while(indice >= 0){
estados.splice(indice, 1);
indice = estados.indexOf(buscar);
}
console.log(estados);
Remover valores duplicados de um array
Perceba que no exemplo anterior utilizamos um array chamado estados, e nele temos "SP" três vezes. Acabamos eliminados estas três ocorrências. Pode ser de nosso interesse manter apenas uma e eliminar as outras duas repetições. Existem três formas de eliminar duplicadas num array. A primera seria criar um array auxiliar, e iterar o nosso array. Podemos adicionar cada item de nosso array no array auxiliar, verificando antes se já adicionamos aquele valor.
var estados = ["RJ", "MG", "SP", "SC", "SP", "SP", "PR", "PE", "PA"];
var estados_novo = [];
estados.forEach((item) => {
if (!estados_novo.includes(item)) {
estados_novo.push(item);
}
});
estados = estados_novo;
console.log(estados);
Utilizando o método forEach iteramos o array estados. Para cada iteração, verificamos se o item atual já existe no array auxiliar. Para isso, utilizamos o método includes. No final, atualizamos o nosso array estados com base no array auxiliar, que está com os itens sem repetições.
A outra forma de eliminar repetições é utilizar o objeto Set. Set recebe como parâmetro o objeto iterável, que é o nosso array, e cria um objeto sem repetições. Precisamos depois converter este objeto em array para receber o novo array sem repetições.
var estados = ["RJ", "MG", "SP", "SC", "SP", "SP", "PR", "PE", "PA"];
var estados_novo = new Set(estados);
estados = Array.from(estados_novo)
console.log(estados);
No exemplo a nova instância de Set cria o objeto sem repetições, e o comando Array.from converte este objeto num novo array.
Uma outra forma de remover elementos duplicados é utilizar o método filter. Este método ele faz a leitura dos elementos do array em busca de um valor de referência passado por meio de uma função de callback. Ao fazer o teste em cada elemento, o método retorna um ou mais conteúdos que atendam à especificação indicada na função callback e armazena o resultado em uma nova variável do tipo array.
var estados = ["RJ", "MG", "SP", "SC", "SP", "SP", "PR", "PE", "PA", "BA", "PE"];
var estados_novo = estados.filter((valorAtual, indice, varArray) => indice === varArray.indexOf(valorAtual));
console.log(estados_novo);
Remover elementos de acordo com uma condição
Você pode usar o método filter para filtrar o array de acordo com uma condição. O método filter gera um array novo de acordo com as condições desejadas. No exemplo a seguir, vamos criar um novo array eliminando os números menores que 5.
var numeros = [1, 2, 3, 4, 5, 7, 8, 9, 10];
numeros = numeros.filter(item => item > 5);
console.log(numeros);
Como filter cria um novo array, usamos o resultado dele para atualizar a variável numeros que era o nosso array original.
Remover elementos de um array de objetos de acordo com uma condição
Utilizando o método filter nós também podemos criar um novo array com base numa condição aplicada a um array de objetos. No array a seguir temos uma lista de produtos, e vamos criar um novo array considerando apenas os produtos de uma determinada categoria.
var produtos = [
{id: 1, nome: "Camiseta", categoria: "Vestuário"},
{id: 2, nome: "Sapato", categoria: "Calçados"},
{id: 3, nome: "Blusa", categoria: "Vestuário"},
{id: 4, nome: "Saia", categoria: "Vestuário"},
{id: 5, nome: "Chinelo", categoria: "Calçados"},
{id: 6, nome: "Tênis", categoria: "Calçados"}
]
produtos = produtos.filter(produto => produto.categoria == "Vestuário");
console.log(produtos);
Encerramento
Neste artigo você viu como remover elementos de um array com JavaScript.
Deseja aprender mais sobre como trabalhar com arrays? Não deixe de conferir o link a seguir com exemplos de como resolver os problemas mais comuns para quem está trabalhando com arrays
Métodos para trabalhar com arrays no JavaScript
E se você deseja aumentar o seu conhecimento de JavaScript não deixe de conferir o nosso roteiro de estudos
