for 循环
到目前为止,你用 if / switch 只选一次路径。真实页面却常常要把同一件事做很多遍:打印五行、累加、拼一小段列表。把同一句复制五遍,一改就全坏。for 只留一份工作,用计数器一轮轮往前走。
for 循环怎样往前走?
条件为真时,{ } 里的代码块会再跑一遍。括号里用分号隔开三部分:计数器从哪起、跑到什么时候、每轮结束后怎么变。条件变假时循环结束,程序从循环后面继续。
头部的三块
📊 日常 for 零件
| 部分 | 日常说法 | 常见用法 |
|---|---|---|
| 开始 (init) | 从这里启动计数器… | let i = 0 |
| 条件 | 只要这个为真就继续… | i < 5 |
| 更新 | 每轮结束后改计数器… | i++ |
初学者常用名叫 i 的小整数来计数。这是习惯不是规矩——n 或 step 也行。若不更新计数器,条件可能永远不变假,循环会卡住。
for (let i = 0; i < 5; i++) {
console.log(i);
}
从开始数到停下
从 0 开始。只要 i 小于 5 就打印并加一。控制台看到 0 到 4——五轮。5 不会打印,因为条件先失败。
慢慢读一轮:条件 → 本体 → 更新 → 再条件。更新不在本体里;它在头部,好让每轮同样前进。
for (let i = 1; i <= 3; i++) {
console.log("step " + i);
}
从 1 开始,标签更清楚
这里计数器从 1 起,条件是 i <= 3;你会看到 step 1 到 step 3。从 0 还是从 1 是设计选择——只要条件跟选择对齐。
let total = 0;
for (let i = 1; i <= 4; i++) {
total = total + i;
}
console.log(total);
一轮轮累加总和
total 从零开始,每轮加上当前的 i。1+2+3+4 之后是 10。结果会随轮次增长时,循环才真正发光,而不是只走一次分支。
for (let i = 0; i < 8; i += 2) {
console.log(i);
}
每次跳两步
i += 2 每轮前进两个:0、2、4、6。更新位不只是 i++——任何诚实推进、让循环走向结束的改动都可以。
let line = "";
for (let i = 1; i <= 3; i++) {
line = line + "n" + i + " ";
}
console.log(line);
循环里一块块粘上
line 从空开始,每轮追加一小块。三轮后会像 n1 n2 n3。以后拼页面文案也是同一套路。
在页面上看结果
跑一小段计数,拼出消息,再写到页面上。
<!DOCTYPE html>
<html>
<head>
<title>For — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
for (let i = 1; i <= 4; i++) {
msg = msg + i + " ";
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>
页面显示 count=1 2 3 4。改上限、刷新、读新列表。下一课的 while 也会重复,但检查条件的形状不同——当你事先知道计数计划时,for 仍是更干净的工具。
自己试试
- 写一个
i < 5的for,日志输出0…4。 - 改成用
i <= 5输出1…5。 - 把
1…5累加进total并打印。 - 用
i += 2打印小于10的偶数。 - 在循环里拼出三个标签(
a、b、c)的字符串。 - 在 HTML 演示里只改上限,刷新后读
count=。
常见错误
- 差一错误:本意轮数不同时写成
i < 5而不是i <= 5(或反过来) - 忘记更新(
i++)导致条件永不结束 - 明明一个
if就够,却写成无意义的单轮循环 - 改动的变量不是条件里那个
- 以为在头部用
let声明的i循环后还能用(块作用域)
小结
- 条件为真时,
for重复执行本体 - 头部三块:开始、条件、更新
- 适合计数、求和、拼短字符串
- 更新可以是
i++、i += 2或其他清楚的步长 - 若循环拼出消息,也把它显示到页面上
- 下一课:while 循环——条件成立就重复,没有三件套头部
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部