Freqüentemente, você encontrará Arrays ao escrever código JavaScript. Como você pode remover um elemento de um Array em JavaScript?
Em JavaScript, um Array é um tipo de objeto global que você pode usar para armazenar dados. Uma matriz em JavaScript pode conter uma lista contendo zero ou mais tipos de dados ou uma coleção ordenada. Para acessar itens específicos de um Array, usamos índices numerados começando em 0.
Neste artigo, descreverei a sintaxe para criar Arrays em JavaScript, por que se deve remover um elemento de um array em JavaScript e as diferentes abordagens para remover elementos de Arrays em JavaScript, alterando ou sem alterar o array original.
últimas postagens
Sintaxe para um array JavaScript
Arrays nos permitem armazenar vários objetos de valor em uma única variável. Por exemplo, se quisermos representar os sete continentes em JavaScript, podemos ter este código:
const continent1 = "Asia"; const continent2 = "Africa"; const continent3 = "North America"; const continent4 = "South America"; const continent5 = "Antarctica"; const continent6 = "Europe"; const continent7 = "Australia"
Entretanto, podemos condensar esse código e representá-lo em um array como segue;
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Em vez de ter 7 variáveis, temos apenas uma variável e usamos colchetes para representar nossos objetos.
Se quiser acessar o primeiro continente da nossa lista, você pode executar este comando; console.log(continentes[0])
Você pode usar nosso aplicativo gratuito compilador JavaScript on-line para testar seu código.
Isto é o que você recebe:
Se quiser acessar o último item do nosso array, você executará este comando; console.log(continentes[6]).
Observe que a numeração em JavaScript começa em 0.
Por que remover um elemento de um array JavaScript?
Você pode usar arrays JavaScript com strings, números e várias estruturas de dados. No entanto, há casos em que pode ser necessário remover um ou vários elementos de uma matriz. Estes são alguns dos cenários:
- Lidar com dados dinâmicos: você pode armazenar conjuntos dinâmicos de dados em matrizes. Pode ser necessário remover um elemento/elementos de uma matriz com base nas alterações dos requisitos.
- Mantenha a integridade dos dados: você pode excluir/remover informações desatualizadas de seus arrays para garantir que suas estruturas de dados estejam atualizadas.
- Gerenciar memória: O tamanho do seu código afeta o desempenho do seu aplicativo. Você pode remover informações desnecessárias de seus arrays e otimizar seu código.
Remover elementos sem alterar o array original
Quando você deseja remover um elemento sem alterar o array original, a prática recomendada é criar um novo array sem o elemento que deseja remover. Essa abordagem se ajusta a um array como um parâmetro de função. Você pode usar as seguintes abordagens:
#1. Remova um elemento usando slice()
Podemos remover o primeiro continente da nossa lista usando o método slice().
Este é o nosso código original:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Criaremos um novo array da seguinte forma:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the first element using slice let newContinents = continents.slice(1); If you now run: console.log(newContinents);
Você obterá isso como saída:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#2. Remova o primeiro elemento de um Array usando filter()
O método filter cria um novo array onde os elementos devem passar por uma determinada condição. Posso criar uma condição que exclua o primeiro elemento do nosso array. É assim que posso conseguir isso:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the first element using filter() method let newContinents = continents.filter((continent, index) => index !== 0); console.log(newContinents);
Se eu executar o código, é isso que obterei:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Use slice() junto com concat() para remover um elemento de qualquer posição
Nosso primeiro exemplo remove o primeiro elemento da nossa lista. E se quisermos remover, digamos, o terceiro ou quarto elemento do nosso array? Precisamos combinar os métodos slice() com concat() para que isso aconteça. No exemplo a seguir, removerei o quarto elemento da seguinte maneira:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the fourth element using slice and concat let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4)); console.log(continentsWithoutFourth);
Se eu executar o código, obteremos isso como saída:
[ 'Asia', 'Africa', 'North America', 'Antarctica', 'Europe', 'Australia' ]
O método slice() cria duas novas fatias. Em seguida, usamos o método concat() para combinar as duas fatias, mas omitimos o quarto elemento. Você pode usar essa abordagem com qualquer elemento do array.
#4. Remova um elemento usando o loop for junto com push()
Podemos omitir o quinto elemento de nossa lista usando o loop for e o método push(). Confira este código:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the fifth element using a for loop and push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
if (i !== 4) {
continentsWithoutFifth.push(continents[i]);
}
}
console.log(continentsWithoutFifth);
O loop for itera sobre cada elemento em nossa matriz de continentes. Usamos a instrução if para verificar se o índice atual não é igual a quatro. Se a condição for verdadeira, os elementos serão colocados em um novo array.
Isto é o que obtemos quando você executa o código:
[ 'Asia', 'Africa', 'North America', 'South America', 'Europe', 'Australia' ]
Remova elementos alterando o array original
Você pode modificar ou alterar a estrutura do array original removendo um elemento. Estas são algumas das abordagens:
#1. Remova um elemento de um array usando pop()
Você pode usar o método pop() para remover o último elemento do nosso array continentes. Nosso código original é
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Podemos ter este código para remover o último elemento:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the last element using pop let lastContinent = continents.pop();
Se você executar:
console.log("Updated Continents Array:", continents);
A lista atualizada será:
Updated Continents Array: [ 'Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe' ]
Você também pode verificar o elemento removido usando este código:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the last element using pop
let lastContinent = continents.pop();
console.log("Removed Continent:", lastContinent);
#2. Remova um elemento de um array usando splice()
O método splice() permite remover elementos de um índice específico em seu array. Posso remover um elemento do índice 2 usando este código:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the element at index 2 using splice
let removedElement = continents.splice(2, 1);
console.log("Removed Element:", removedElement);
console.log("Updated Continents Array:", continents);
Este código altera o array original e então retorna um novo array. O código também possui duas instruções console.log que verificam os ‘Elementos Removidos’ e a ‘Matriz de Continentes Atualizados’.
Quando executarmos todo o código, esta será a saída:
Removed Element: [ 'North America' ] Updated Continents Array: [ 'Asia', 'Africa', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Remova o primeiro elemento de um array usando shift()
O método shift() remove o primeiro elemento de um array JavaScript. Este método modifica/destrói o array original e também retorna o elemento removido. Ainda podemos usar a nossa matriz de continentes para esta demonstração.
Podemos remover o primeiro elemento da seguinte forma:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using shift
let removedContinent = continents.shift();
console.log("Removed Continent:", removedContinent);
console.log("Updated Continents Array:", continents);
Temos duas instruções console.log, onde uma retorna o `Continente Removido’ enquanto a segunda retorna ‘Continentes Atualizados’.
Se executarmos o código, obteremos esta saída:
Removed Continent: Asia Updated Continents Array: [ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
Adicione um elemento a um array em JavaScript
Até agora discutimos como remover um elemento de um array. No entanto, há casos em que você pode querer adicionar um novo elemento a um array. Estas são algumas das abordagens a serem usadas:
#1. O método push()
Usaremos este código para estes exemplos:
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
Podemos adicionar uma nova cor no final do array usando o método push().
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.push('orange');
Nosso array agora terá seis cores.
#2. O método unshift()
Você pode adicionar um novo elemento ao início do array usando o método unshift(). Ainda podemos usar o array de cores.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);
Como você pode ver na captura de tela a seguir, laranja agora é a primeira cor em nosso array:
Conclusão
Agora você entende como remover um elemento em um array JavaScript e produzir código eficiente. A escolha da abordagem dependerá de seus objetivos finais, habilidades e preferências.
O método slice() é uma escolha perfeita quando você está procurando uma abordagem simples e não deseja alterar o array original. Por outro lado, achei a combinação dos métodos slice() e concat() uma escolha perfeita se você deseja remover algum elemento.
Confira nosso artigo sobre folhas de dicas de JavaScript para desenvolvedores.