Métodos de array
Na página das cores, reescrever um espaço não mexia na quantidade. Aqui a cesta tem pão, leite e ovos. Uma chamada pode aumentar ou diminuir os itens.
A quantidade pode mexer
Essas cinco chamadas alteram a lista que você já tem na mão, não um texto novo como as ferramentas de string e nem uma função que você mesmo guardou num objeto. push, pop, unshift, shift e splice são ferramentas prontas da própria lista.
Cinco chamadas num cartão
Deixe o cartão ao lado dos exemplos para não voltar ao topo toda hora. Muitas vezes o valor que volta não é a cesta. É um número, o item que saiu ou uma lista pequena.
📊 Cinco chamadas da lista
| Chamada | Onde age | O que volta | length |
|---|---|---|---|
push |
o fim | o comprimento novo | cresce pela quantidade de itens que você passou |
pop |
o fim | o item removido | cai um |
unshift |
a frente | o comprimento novo | cresce pela quantidade de itens que você passou |
shift |
a frente | o item removido | cai um |
splice |
um índice que você escolhe | uma lista pequena dos removidos | cai conforme o tanto apagado |
Chamadas que acrescentam devolvem o comprimento novo como número, e as que tiram de uma ponta devolvem o próprio item. splice devolve uma lista pequena mesmo quando só um espaço sai, e a palavra fica no índice 0 desse resultado.
Chá no fim
A cesta começa com pão, leite e ovos. push coloca o chá depois dos ovos. O número que você ouve na hora é quantos espaços existem agora.
let cart = ["bread", "milk", "eggs"];
let n = cart.push("tea");
console.log(n);
console.log(cart[3]);
console.log(cart.length);
n é 4, ou seja o comprimento novo, não a palavra tea. O índice 3 guarda o chá, e length também é 4 porque só um item foi acrescentado no fim. Dois argumentos seriam dois espaços a mais. Aqui você passa um, para o número continuar fácil de ler.
let cart = ["bread", "milk", "eggs"];
let gone = cart.pop();
console.log(gone);
console.log(cart.length);
O último item sai
pop levanta os ovos do fim e devolve essa string, e length vira 2. Na cesta ficam pão e depois leite. Essa chamada não devolve o comprimento novo. Uma cesta vazia devolveria undefined, e os exemplos desta página não começam vazios.
let cart = ["bread", "milk", "eggs"];
let n = cart.unshift("tea");
console.log(n);
console.log(cart[0]);
console.log(cart[1]);
A frente ficou nova
unshift também devolve 4, porque é o comprimento novo, e o índice 0 agora é chá. O pão escorrega para o índice 1 sem que um espaço seja reescrito. Cada item antigo dá um passo em direção ao fim.
let cart = ["bread", "milk", "eggs"];
let gone = cart.shift();
console.log(gone);
console.log(cart[0]);
console.log(cart.length);
A frente esvazia
shift devolve pão, isto é o item que saiu, não um comprimento. Depois o índice 0 é o leite e length vale 2. Os ovos continuam por último. Só passam a sentar no índice 1.
let cart = ["bread", "milk", "eggs"];
let removed = cart.splice(1, 1);
console.log(removed[0]);
console.log(cart.length);
console.log(cart[1]);
Um espaço que você escolheu
O primeiro argumento é o índice inicial e o segundo diz quantos espaços apagar. O leite sai, e removed é uma lista de um espaço, então removed[0] é leite e a chamada em si não é a string leite. length vira 2 e o índice 1 são os ovos, porque o pão ficou no 0 e os ovos fecharam o buraco. Se você passar 0 como quantidade a apagar, insere sem apagar. Essa forma pode esperar.
A página imprime o comprimento novo
Acrescente o chá com push. Depois escreva length no parágrafo. A linha deve ser a quantidade, não a lista de compras.
<!DOCTYPE html>
<html>
<head>
<title>array-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let cart = ["bread", "milk", "eggs"];
cart.push("tea");
let box = document.getElementById("line");
box.textContent = cart.length;
</script>
</body>
</html>
O parágrafo mostra 4. Troque a string empurrada de chá para geleia e atualize; a linha continua 4, porque você ainda acrescenta um item. A palavra mudou, a quantidade não. Pão, leite e ovos ficam na frente do que você colocou com push.
Treine numa cesta nova
- Com
push, ponha chá depois de pão, leite e ovos e leia ao mesmo tempo o número devolvido e o índice 3. - Chame
popuma vez, leia a palavra removida e o comprimento novo, depois comunshiftponha o chá na frente e olhe o índice 0 e o 1. - Chame
shiftuma vez, leia a palavra que saiu e o novo índice 0, depois façasplicea partir do índice 1 apagando um espaço e ponharemoved[0]ao lado do comprimento. - Na página faça
pushdo chá, atualize, leia a linha, troque chá por geleia e atualize de novo.
Onde se perde ponto
- Você queria acrescentar um espaço e escreveu
cart[1] = "tea", ou faltaram os parênteses depushepop - Tomou o valor de
poppelo comprimento novo - Esperava que
splicedevolvesse a string leite sozinha, não uma lista - Achou que o índice 0 continuava pão depois de
unshift, ou misturou esta página com uma volta em cada item e uma busca pelo valor
O que fica
- Essas chamadas alteram a mesma lista
pusheunshiftdevolvem o comprimento novo, epopeshifto item que saiusplicedevolve uma lista pequena dos removidos- O parágrafo pode mostrar só o comprimento depois de
push - Em seguida você percorre cada item, e a busca pelo valor vem depois
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo