neste artigo, vamos explorar algumas maneiras diferentes para remover um item de um array em JavaScript. Também lhe mostrarei operações mutáveis e imutáveis para que saiba como o seu código afetará suas estruturas de dados e referências.
remover itens de matrizes simplesmente resume-se a encontrar o índice do item, ou pelo menos tradicionalmente. Hoje em dia-temos outras opções, como encontrar itens dentro de uma matriz pelo seu valor., O que significa que existem agora várias abordagens para remover itens.
esta próxima seção curta irá mergulhar em índices de array e como eles vêm a ser, é um mergulho profundo mais agradável – mas se você está atrás das soluções, em seguida, role para a direita através.
compreendendo índices de Array
em JavaScript, um array é um tipo especial de objeto.
Este objeto array tem várias propriedades diferentes, algumas das quais são propriedades herdadas que existem no protótipo, e algumas são propriedades que o objeto array expõe para nós quando nós “adicionamos” coisas a um array.,
🎉 Download it free!
ir além do Array ForEach. Obtenha confiança com métodos mais avançados como reduzir, encontrar, filtrar, todos, Alguns e mapear e compreender completamente como gerenciar estruturas de dados JavaScript.,
- entender Completamente como gerenciar o JavaScript Estruturas de Dados com imutáveis operações
- 31 páginas da deep dive sintaxe, exemplos do mundo real, dicas e truques
- Escrever mais limpo e melhor estruturada de lógica de programação dentro de 3 horas
como um bónus extra, também lhe enviaremos alguns bens extra através de alguns e-mails extra.,
Por exemplo, quando declaramos uma nova matriz através de , que a matriz contém Array.prototype propriedades e métodos que nos permitem interagir com a nossa matriz. A intenção com isso era permitir-nos realizar mutações e mudanças em nossos arrays com as funções de utilidade agradável “embutido”.um utilitário? Sim, por exemplo, Array.prototipo.forEach () ou Array.prototipo.empurrar(). Ambos são métodos herdados no objeto array. Com isso dito, você agora sabe como arrays são na verdade apenas objetos – e objetos têm métodos e propriedades.,
O objeto array é especial, é diferente. Ele ainda é um objeto, mas a maneira que nós “usamos” um array é acessando propriedades nele que se referem a um item no array, através de um índice. Um índice? Sim – 0 1 2 3 e avante! Os índices da matriz começam em zero.
com matrizes isto significa que quando precisamos de acesso a um valor, seja ele qual for (um primitivo/objeto), ele é feito através de um “index lookup”. Peça o índice de sua matriz e você receberá de volta o item localizado nesse índice.,
realmente, você pode pensar em cada índice como uma gaveta em um arquivo. Cada desenho contém algo único! Os Arrays são virtuais, por isso o tamanho do arquivo depende de ti!
“Why are you tell me all this, Todd?”
porque agora você entende um array, você sabe como trabalhar com um!
Sem mais delongas, vamos primeiro explorar como remover um item de um array em JavaScript por índice e valor.
utilizar .indexOf () e .,splice () – Mutable Pattern
To remove an item from array via its index, we’ll first introduce the Array.prototype.splice method and then investigate a better pattern using Array.prototype.filter, a newer API.
Splice é um método mutável que lhe permite alterar o conteúdo de um array. Isso pode ser remover ou substituir “elementos”, como itens array são conhecidos.
Let’s take an array with a few string values:
const drinks = ;Para remover um item através do seu índice, precisamos de encontrar o índice.,
existem dois cenários aqui, 1) conhecemos o índice e 2) não conhecemos o índice, mas sabemos o valor.
primeiro, se nós conhecemos o índice, abaixo eu usei id para manter o nosso índice de exemplo, então ele simplesmente requer passar esse índice para .splice()., O primeiro argumento a favor da emenda aceita a posição de índice para começar a remover itens, e o segundo argumento definido para 1 representa o fim – o que significa que apenas deseja remover um item, depois que o índice:
const drinks = ;const id = 2;const removedDrink = drinks.splice(id, 1);Se a gente não souber o índice, então, nós precisamos encontrá-lo. Neste caso, o índice que gostaríamos de remover contém um valor de 'Coffee'.
poderíamos usar Array.prototipo.,indexOf() para obter o bem… “índice de” elemento:
const drinks = ;const id = drinks.indexOf('Coffee'); // 2const removedDrink = drinks.splice(id, 1);Array.prototipo.indexOf () irá retornar
-1se o elemento não for encontrado então eu recomendaria uma verificação de segurança em torno disso.
You’ll notice i’ve also added const removedDrink. Isso é porque .splice() devolve-nos o item removido(s):
// console.log(removedDrink);// console.log(drinks);Tente o código de exemplo a seguir:
a Utilizar .,filtro () – padrão imutável
então agora nós entendemos um pouco mais sobre mutável e imutável, vamos descobrir o padrão imutável para “remover” um elemento de um array.
A melhor maneira que você pode pensar sobre isso é – em vez de “remover” o item, você estará “criando” uma nova matriz que simplesmente não inclui esse item. Por isso, temos de O encontrar e omiti-lo completamente.
🎉 Download it free!
ir além do Array ForEach., Obtenha confiança com métodos mais avançados como reduzir, encontrar, filtrar, todos, Alguns e mapear e compreender completamente como gerenciar estruturas de dados JavaScript.
- entender Completamente como gerenciar o JavaScript Estruturas de Dados com imutáveis operações
- 31 páginas da deep dive sintaxe, exemplos do mundo real, dicas e truques
- Escrever mais limpo e melhor estruturada de lógica de programação dentro de 3 horas
como um bónus extra, também lhe enviaremos alguns bens extra através de alguns e-mails extra.
essa última referência ao seu array, então, só irá viver, e não estaremos alterando o array original. Vamos ter de volta uma cópia Nova cada vez com as nossas modificações!
So, let’s take the same array to start with:
const drinks = ;Again, let’s aim to remove 'Coffee'., Primeiro, nós poderíamos fornecer um valor que se destinam a representar um valor de índice, e passá-lo para .filter():
const id = 2;const removedDrink = drinks;const filteredDrinks = drinks.filter((drink, index) => index !== id);Nota incluímos (drink, index) como parâmetros da função e comparada da matriz index id constante – para que possamos encontrar um exato que precisamos, como os índices de correspondência!,
eu também incluiu const removedDrink, que oferece uma maneira de “pedir” uma referência da bebida que você gostaria de remover (da mesma forma que você pode querer usar o valor de retorno de .splice()).,
Se você não tem uma referência para o índice, por exemplo, a nossa id pontos 'Coffee', então podemos usar .indexOf() (por favor, note que a adição de idx variável para captar o índice):
Usando um Loop For – Padrão Tradicional
Uma versão alternativa, mas uma versão válida do que realmente é o imperativo versão de Array.prototype.filter como ele se comporta da mesma maneira, a construção de uma nova matriz para nós e empurrando novos itens, deixando-nos uma virgem drinks array.,
neste exemplo, estamos removendo itens da matriz inicial, devolvendo uma nova matriz de apenas os itens que deseja, usando drinks nos permite analisar e comparar o elemento de matriz do valor (como 'Coffee' como uma Seqüência de caracteres, neste caso):
Usando a tag filteredDrinks seria, então, dar-nos as coisas que gostaria. Você pode ver como aprendendo os princípios da programação podemos aplicar diferentes padrões e ter uma compreensão mais profunda do que estamos fazendo!,
Este método seguinte eu já incluído para maior clareza sobre o que NÃO fazer ao remover itens de um array em JavaScript, mesmo que seja perfeitamente “válido”…
Evitar a “eliminar” a palavra-chave
Quando eu vejo o delete palavra-chave no antigo, eu tremo só um pouco – é uma poderosa palavra-chave que deve ser usada de forma responsável. Dito isto, se aprendermos o que faz a palavra-chave
, então podemos tomar decisões mais informadas.,
Aqui está um exemplo que você pode ver em torno da web:
Você vai notar a partir do console.log saída acima que ele completamente apaga a chave. Eu incluí isso para clareza, é sempre ótimo ver e entender que efeitos colaterais suas operações têm.
o Que mais confuso é delete não afeta a Matriz .length imóveis – veja como ele ainda diz length: 4?! Outra razão para evitar o uso de delete.,
com isso em mente-é hora de concluir nosso post sobre como remover um item, ou “elemento”, de um array em JavaScript com as ferramentas certas. Nós entendemos diferentes abordagens e paradigmas e temos um pouco mais de conhecimento para levar para o amanhã. Obrigado por ler!se você gosta de aprender e tem um desejo ardente de nivelar suas habilidades JavaScript? Eu ensino cursos JavaScript aqui em cursos finais que vão levar suas habilidades JavaScript ao máximo – eu garanto que você não vai ficar desapontado!
🎉 Download it free!,
ir além do Array ForEach. Obtenha confiança com métodos mais avançados como reduzir, encontrar, filtrar, todos, Alguns e mapear e compreender completamente como gerenciar estruturas de dados JavaScript.
- entender Completamente como gerenciar o JavaScript Estruturas de Dados com imutáveis operações
- 31 páginas da deep dive sintaxe, exemplos do mundo real, dicas e truques
- Escrever mais limpo e melhor estruturada de lógica de programação dentro de 3 horas
como um bónus extra, também lhe enviaremos alguns bens extra através de alguns e-mails extra.
Check them out and enjoy – thanks for reading!