for...of e for...in
Com for e while você geria o contador. Muitas vezes os dados já são lista ou objeto — quer cada valor ou cada chave, não um índice caseiro. for...of entrega o próximo valor de um iterável. for...in entrega a próxima chave de um objeto. Mesma família de repetir trabalho; outra coisa na variável do ciclo.
O que faz for...of?
Executa o corpo uma vez por valor de um iterável. Para iniciantes, arrays e strings são o dia a dia. Escreve for (const item of list) — em cada volta, item é o próximo valor. Só escreva i < list.length se quiser de propósito um ciclo de índice.
for...of, for...in e ciclos clássicos
📊 Formas quotidianas de percorrer
| Forma | O que a variável do ciclo guarda | Encaixa no dia a dia |
|---|---|---|
for...of |
um valor de um iterável | cada fruta num array; cada carácter numa string |
for...in |
uma chave (nome de propriedade) num objeto | cada nome de campo num objeto simples |
for clássico |
um índice que controlas | quando o número 0, 1, 2… importa |
while |
o que atualizas no corpo | continuar enquanto uma regra vale |
Comece com arrays para for...of. Use for...in quando a história for «cada nome de propriedade neste objeto». Mantenha o for clássico quando o próprio índice importa.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
Percorra valores de um array
Cada volta imprime uma string: red, depois green, depois blue. A variável do ciclo é o valor em si — não 0, 1, 2. Se só precisa dos itens, for...of fica mais curto do que gerir um índice.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
Percorra caracteres de uma string
Strings também são iteráveis. Imprime h, depois i. Trate cada carácter como um valor — útil para trabalho letra a letra antes de APIs de string mais pesadas.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
Percorra chaves com for...in
Aqui key torna-se "name", depois "role". Lê o valor com user[key]. Prefira for...in para chaves enumeráveis de objetos simples. Não o use como primeira ferramenta para valores de array — isso é for...of.
Lembre a regra curta: of → valores, in → chaves. Misturá-las é a confusão clássica do iniciante.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
Construa uma mensagem a partir de valores
Cada volta acrescenta uma letra e um hífen. Depois do ciclo, slice tira o hífen final e vê A-B-C. Mesma ideia de colar das lições anteriores de ciclos — agora o percurso usa valores diretamente.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
Quando o ciclo de índice ainda ajuda
O for clássico imprime índice e valor. O for...of só valores. Precisa do número da posição? Mantenha um for indexado. Só os itens? Prefira for...of.
Mostre for...of na página
Percorra um array com for...of, monte uma linha curta e escreva-a na página.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
A página mostra list=tea milk honey. Mude uma entrada do array, atualize e leia a nova linha. Use for...of para valores, for...in para chaves de objeto e for clássico quando o índice importa. A seguir: break e continue para dirigir ciclos a meio do caminho.
Experimente você
- Com
for...of, registe cada valor de["a", "b", "c"]. - Com
for...of, registe cada carácter de"ok". - Com
for...inem{ x: 1, y: 2 }, imprimakey=value. - Junte
["1", "2", "3"]em1-2-3comfor...of. - Escreva um
forindexado que imprima índice e valor juntos. - Na demo HTML, mude só o array, atualize e leia
list=.
Erros comuns
- Escrever
for...inquando queria valores de array (for...of) - Usar
for...ofnum objeto simples (para iniciantes não é iterável assim) - Esperar índices
0,1,2defor...of— dá valores, não índices - Esquecer
user[key]depois defor...ine registar só chaves quando também precisava dos valores - Um ciclo de índice longo quando um
for...ofclaro lê melhor
Resumo
for...ofpercorre valores de iteráveis (arrays, strings)for...inpercorre chaves de objetos- O
forclássico ainda cabe quando precisa do número de índice whileainda cabe para uma condição contínua- Construa mensagens colando valores no corpo
- A seguir: break e continue — parar ou saltar uma volta
🧠 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