Remova Elementos de Arrays JavaScript: Guia Completo com Exemplos

Gerenciando Elementos em Arrays JavaScript: Remoção e Além

Ao programar em JavaScript, o uso de arrays é extremamente comum. Uma dúvida frequente é: como remover um elemento de um array? Este artigo detalha as diversas maneiras de realizar essa tarefa, com foco em manter a integridade do array original ou modificá-lo diretamente.

Um array em JavaScript é essencialmente um tipo de objeto que armazena dados de forma organizada. Pode conter uma lista de zero ou mais elementos de diversos tipos, acessados através de índices numéricos, começando por 0.

Exploraremos neste texto a sintaxe para criar arrays em JavaScript, a necessidade de remover elementos e as diferentes técnicas para fazê-lo, preservando ou alterando o array inicial.

Sintaxe para Criar Arrays em JavaScript

Arrays são ferramentas poderosas para armazenar múltiplos valores em uma única variável. Imagine que precisamos representar os sete continentes. Poderíamos fazer:

const continente1 = "Ásia";
const continente2 = "África";
const continente3 = "América do Norte";
const continente4 = "América do Sul";
const continente5 = "Antártida";
const continente6 = "Europa";
const continente7 = "Austrália";

Uma abordagem mais eficiente seria usar um array:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];

Em vez de sete variáveis, temos agora apenas uma, usando colchetes para delimitar os elementos. Para acessar o primeiro item, faríamos: console.log(continentes[0]). O índice 0 nos retornaria “Ásia”.

Para o último item, usaríamos console.log(continentes[6]), retornando “Austrália”. Lembre-se que a contagem em JavaScript começa em 0.

Você pode experimentar este e outros códigos com um compilador JavaScript online.

Por Que Remover Elementos de um Array?

Arrays podem lidar com strings, números e diversas estruturas de dados. No entanto, situações podem demandar a remoção de um ou mais elementos. Alguns cenários incluem:

• Dados Dinâmicos: Arrays podem conter conjuntos de dados que mudam. A remoção de elementos pode ser necessária para refletir alterações nos requisitos.
• Integridade dos Dados: Remover informações desatualizadas de um array garante que sua estrutura de dados permaneça atualizada e precisa.
• Gerenciamento de Memória: O tamanho do seu código impacta o desempenho. Remover dados desnecessários de arrays pode otimizar seu aplicativo.

Remoção de Elementos Sem Modificar o Array Original

Uma prática recomendada é criar um novo array, sem o elemento que se deseja remover, quando a intenção é não alterar o array original. Essa técnica se mostra útil quando um array é usado como um parâmetro de função. As seguintes abordagens podem ser usadas:

1. Usando o Método slice()

Para remover o primeiro continente, podemos utilizar o método slice(). Usando nosso array inicial:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];

Podemos criar um novo array da seguinte forma:

let novosContinentes = continentes.slice(1);
console.log(novosContinentes);

O resultado seria:

[
  'África',
  'América do Norte',
  'América do Sul',
  'Antártida',
  'Europa',
  'Austrália'
]

2. Usando o Método filter()

O método filter() cria um novo array com elementos que atendem a uma condição específica. Podemos usar essa função para excluir o primeiro elemento, da seguinte forma:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];
let novosContinentes = continentes.filter((continente, indice) => indice !== 0);
console.log(novosContinentes);

O resultado:

[
  'África',
  'América do Norte',
  'América do Sul',
  'Antártida',
  'Europa',
  'Austrália'
]

3. Combinando slice() e concat()

O método slice() pode remover o primeiro elemento, mas como remover um elemento em outra posição? A solução é combinar o slice() com o método concat(). Para remover o quarto elemento, por exemplo:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];
let continentesSemQuarto = continentes.slice(0, 3).concat(continentes.slice(4));
console.log(continentesSemQuarto);

O resultado:

[
  'Ásia',
  'África',
  'América do Norte',
  'Antártida',
  'Europa',
  'Austrália'
]

O slice() cria duas partes do array, que são combinadas com concat(), omitindo o quarto elemento. Este método pode ser adaptado para qualquer posição.

4. Usando for Loop e push()

Outra opção é usar um for loop com o método push() para remover um elemento específico, por exemplo o quinto:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];

let continentesSemQuinto = [];
for (let i = 0; i < continentes.length; i++) {
  if (i !== 4) {
      continentesSemQuinto.push(continentes[i]);
    }
  }
console.log(continentesSemQuinto);

Este loop percorre todos os elementos do array, verificando com if se o índice atual não é igual a quatro. Os elementos que satisfazem essa condição são adicionados a um novo array.

O resultado:

[
  'Ásia',
  'África',
  'América do Norte',
  'América do Sul',
  'Europa',
  'Austrália'
]

Remoção de Elementos Modificando o Array Original

Se o seu objetivo é alterar o array original, removendo um elemento, as seguintes abordagens podem ser úteis:

1. Usando o Método pop()

O método pop() remove o último elemento do array. Com o array inicial:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];

Usamos o seguinte código para remover o último elemento:

let ultimoContinente = continentes.pop();
console.log("Array de continentes atualizado:", continentes);

O resultado:

Array de continentes atualizado: [
    'Ásia',
    'África',
    'América do Norte',
    'América do Sul',
    'Antártida',
    'Europa'
]

Para verificar o elemento removido, usamos o seguinte:

let ultimoContinente = continentes.pop();
console.log("Continente removido:", ultimoContinente);

2. Usando o Método splice()

O método splice() permite remover elementos de um índice específico. Para remover o elemento no índice 2:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];
let elementoRemovido = continentes.splice(2, 1);
console.log("Elemento removido:", elementoRemovido);
console.log("Array de continentes atualizado:", continentes);

Este código altera o array original e retorna um novo array contendo os elementos removidos. O código também exibe o elemento removido e o array atualizado.

O resultado:

Elemento removido: [ 'América do Norte' ]
Array de continentes atualizado: [
  'Ásia',
  'África',
  'América do Sul',
  'Antártida',
  'Europa',
  'Austrália'
]

3. Usando o Método shift()

O método shift() remove o primeiro elemento de um array. O método também modifica o array original e retorna o elemento removido. Podemos usar nosso array de continentes para ilustrar:

let continentes = ['Ásia', 'África', 'América do Norte', 'América do Sul', 'Antártida', 'Europa', 'Austrália'];
let continenteRemovido = continentes.shift();
console.log("Continente removido:", continenteRemovido);
console.log("Array de continentes atualizado:", continentes);

Este código retorna o elemento removido e a lista de continentes atualizada.

O resultado:

Continente removido: Ásia
Array de continentes atualizado: [
    'África',
    'América do Norte',
    'América do Sul',
    'Antártida',
    'Europa',
    'Austrália'
]

Adicionando Elementos a um Array

Além de remover elementos, você também pode precisar adicionar novos elementos a um array. As seguintes abordagens podem ser úteis:

1. O Método push()

Utilizaremos o seguinte array como exemplo:

let cores = ['vermelho', 'azul', 'verde', 'amarelo', 'roxo'];

Podemos adicionar uma nova cor ao final do array usando o método push():

cores.push('laranja');

Nosso array agora terá seis cores.

2. O Método unshift()

Para adicionar um novo elemento no início do array, usamos o método unshift(), usando o mesmo array:

let cores = ['vermelho', 'azul', 'verde', 'amarelo', 'roxo'];
cores.unshift('laranja');
console.log(cores);

Como visto abaixo, laranja se torna a primeira cor do nosso array:

Conclusão

Agora, você tem um bom entendimento de como remover elementos de arrays em JavaScript, de maneira eficiente. A abordagem ideal depende de seus objetivos, habilidades e preferências. O método slice() é uma boa escolha se você busca simplicidade e não deseja alterar o array original. A combinação de slice() e concat() pode ser ideal para remover elementos específicos.

Recomendamos que você confira nosso artigo sobre folhas de dicas de JavaScript para desenvolvedores.