Iteração de arrays
songs guarda rain, tide e dusk, e a quantidade fica congelada nesta página inteira, porque forEach só visita e não alonga nem encurta a lista como na lição anterior.
O comprimento não mexe
Desta vez o percurso é uma chamada de método e também pode te dar o índice, ao contrário de for...of, que só traz o valor. Nenhum título é acrescentado no fim e nenhum título sai da lista.
A função que você entrega
Você entrega uma função que roda uma vez por música, e o cartão abaixo é o contrato desta página.
📊 O que o forEach entrega
| Peça | Quando chega | Não é |
|---|---|---|
| primeiro argumento | em cada visita | o comprimento |
| segundo argumento | só se você der nome | obrigatório |
| resultado da chamada | quando forEach termina |
um array novo |
length depois |
quando você lê songs.length |
mudado pela visita |
A música é o primeiro argumento e o índice o segundo, que você pode omitir.
Ordem no console
Imprima cada título. Primeiro vem rain, depois tide e por último dusk.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
console.log(title);
});
Saem três linhas e elas andam da frente do array para o fundo. As três cadeias continuam nos mesmos espaços.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title, i) {
console.log(i);
console.log(title);
});
O zero é de rain, o dois é de dusk, e tide fica no meio, no um.
let songs = ["rain", "tide", "dusk"];
let result = songs.forEach(function (title) {
console.log(title);
});
console.log(result);
console.log(songs.length);
Guarde a chamada numa variável e imprima para ver undefined, que não é título nem comprimento. A impressão de length continua 3.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
if (title === "tide") {
return;
}
console.log(title);
});
Se o título é tide e você volta na hora, essa linha não sai. O percurso não para e dusk ainda aparece.
let songs = ["rain", "tide", "dusk"];
let seen = 0;
songs.forEach(function (title) {
seen = seen + 1;
});
console.log(seen);
console.log(songs.length);
Seu contador cai em 3 e length também, mas essa soma é sua: a chamada não devolveu o total.
Títulos no parágrafo
Monte uma cadeia com um espaço entre os títulos e ponha no parágrafo. Deixe o comprimento fora da linha.
<!DOCTYPE html>
<html>
<head>
<title>array-iteration — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let songs = ["rain", "tide", "dusk"];
let line = "";
songs.forEach(function (title) {
if (line !== "") {
line = line + " ";
}
line = line + title;
});
let box = document.getElementById("line");
box.textContent = line;
</script>
</body>
</html>
A linha mostra os três títulos com espaço, e se você troca tide por fog e atualiza, a palavra do meio muda. A visita ainda cobre três títulos.
Faça o percurso
- Imprima os três títulos. Confira que
rainvem primeiro - Imprima cada índice e confira que
rainestá em 0 - Guarde o resultado da chamada e veja
undefinedenquanto o comprimento fica em 3 - Volte na hora em
tidee confira queduskainda imprime - Some 1 a
seenem cada visita e confira que dá 3 - Leia a linha da página, mude
tideparafoge atualize
Fácil de ler errado
- Não espere que a chamada devolva o último título. O que volta não é uma música
- Não espere que a chamada devolva o comprimento
- Não escreva
breakdentro da função, porque é erro de sintaxe - Não ache que
returndepois detidesegura também odusk - Não leia o segundo parâmetro como se fosse o título
- Não procure por valor nesta página
Leve isto
forEachvisita cada item da frente para trás e o primeiro parâmetro é o item- O segundo parâmetro é o índice
- O resultado da própria chamada é
undefined returndentro da função pula só essa visita- A página seguinte procura por valor
🧠 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