Removendo e inserindo itens em um lista com JavaScript

Um array é muito semelhante com uma lista, e nele podemos armazenar diversos dados como números, strings, entre outros. Por exemplo, uma lista de compras pode ser construída no JavaScript da seguinte forma:

let listaDeCompras = ["açúcar", "arroz", "feijão", "bolachas", "biscoitos"] 

Podemos ver que temos uma lista de itens a serem comprados no mercado, mas quantos itens temos anotado? Podemos contar um por um, mas se tivermos uma lista muito grande demoramos muito para terminar. Daí podemos utilizar um método simples que retorne a quantidade de itens presentes na nossa lista, que seria o .length(), dessa forma:

console.log(listaDeCompras.length)

O resultado retornado no console do navegador seria o número 5, pois temos essa quantidade de itens na nossa lista atual. Mas se quisermos adicionar mais um item? Queremos algumas frutas talvez. Aqui podemos adicionar tanto no início quanto no final da lista. No início utilizamos o unshift() e no final o push(), dessa forma:

listaDeCompras.unshift("banana")
listaDeCompras.push("maçã")

Se mostrarmos o resultado dessa lista no consoles do navegador teremos banana vindo antes de açúcar e maçã vindo depois de biscoitos. Tá, mas vamos colocar as frutas no mesmo lugar? Podemos colocar maçã antes de banana ou tirar banana do início e jogar no final para as frutas ficarem juntas. Para isso precisamos decidir qual método de remoção vamos utilizar.

Para remover o primeiro da lista, no caso banana, temos o método shift(), para remover o final, no caso maçã, temos pop(), dessa forma:

listaDeCompras.shift()
listaDeCompras.pop()

Não decidimos e tiramos as duas frutas logo, e vamos retirar o feijão também. Mas como remover um item que não está nem no início e nem no final? Para isso primeiro precisamos saber onde o item feijão está, usando o método indexOf() conseguimos isso:

console.log(listaDeCompras.indexOf("feijão"))

Obtemos como retorno o número 2 no console do navegador, mas não 3? Por padrão o primeiro item da lista sempre terá como index o 0, por isso feijão é o 2 da lista. 

Com o index em mãos tudo que precisamos é do método splice() onde passamos como parâmetro o índice, também chamado de posição, onde o nosso item se encontra, dessa forma:

listaDeCompras.splice(2)

Se jogarmos a lista no console do navegador teremos uma surpresa, de feijão até o final houve uma remoção, isso ocorreu porque no método splice passamos o índice que queremos remover mas não passamos quantos itens serão removidos, nesse caso apenas 1, para resolver esse problema usamos o seguinte parâmetro:

listaDeCompras.splice(2, 1)

Tudo resolvido, lista certinha e agora vamos às compras. Agora que sabemos todos esses métodos para manipulação de arrays podemos partir para a construções mais interessantes, como adicionar as notas bimestrais dentro de uma lista usando um while, ou armazenar informações do usuário como: nome, sobrenome, idade e utilizar esses dados em uma mensagem ou coisas do tipo, deixo as ideias. Um abraço e até a próxima.

https://francileudo-frontend.blogspot.com/2022/09/removendo-e-inserindo-itens-em-um-lista.html