Remover elementos de um array com JavaScript

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

Roadmap Javascript

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Guia dos principais comandos do GIT
01/05/2022JAVASCRIPT

Guia dos principais comandos do GIT

Tudo o que você precisa conhecer sobre o GIT

Saiba mais...
Roadmap HTML e CSS
13/02/2022JAVASCRIPT

Roadmap HTML e CSS

Um roteiro de estudos para aprender HTML e CSS

Saiba mais...

Conteúdo sobre banco de dados sem complicação!