JavaScript: JavaScript 循环
最后更新：2026-10-13
循环让程序能重复执行一段代码。手动写 100 遍"你好"很傻，但用循环写 1 遍就够了——这就是循环的价值。
1. for 循环
for 是最常用的循环，适合已知循环次数的场景：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>for循环</title></head>
<body>
<div id="output"></div>
<script>
for (let i = 0; i < 5; i++) {
document.getElementById('output').textContent += i + ' ';
}
</script>
</body>
</html>
三个部分的作用：
let i = 0—— 初始化，只执行一次i < 5—— 条件，每次循环前判断，为真才继续i++—— 更新，每次循环后执行
💡 提示： 循环变量习惯用
i，嵌套时外层用 i、内层用 j、再内层用 k，这是程序员的默契。
HTML
<!DOCTYPE html>
<html>
<body>
<h2>循环生成列表</h2>
<ul id="list"></ul>
<script>
let fruits = ['苹果', '香蕉', '橘子', '葡萄', '西瓜'];
let html = '';
for (let i = 0; i < fruits.length; i++) {
html += `<li>第${i + 1}个：${fruits[i]}</li>`;
}
document.getElementById('list').innerHTML = html;
</script>
</body>
</html>
2. while 循环
while 先判断条件再执行，适合不确定循环次数的场景：
HTML
<script>
let count = 0;
while (count < 3) {
count++;
}
</script>
典型使用场景：读取数据直到读完、等待某个条件成立。
3. do...while 循环
do...while 先执行一次再判断条件，至少执行一次：
HTML
<script>
let input;
do {
input = prompt('请输入正数：');
} while (Number(input) <= 0);
</script>
这跟 while 的区别就一句话：while 可能一次都不执行，do...while 至少执行一次。
▶ 示例：三种循环对比
▶ 试一试4. for...of 循环
for...of 专门用来遍历可迭代对象（数组、字符串等），写法最简洁：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>for...of</title></head>
<body>
<div id="output"></div>
<script>
let colors = ['红', '绿', '蓝'];
let html = '';
for (let color of colors) {
html += color + ' ';
}
document.getElementById('output').textContent = html;
</script>
</body>
</html>
跟 for 循环的区别：for...of 拿到的是值，拿不到索引。需要索引时还是用传统 for 循环。
💡 提示：
for...of 遍历字符串时，每次拿到一个字符，包括 emoji 也不会拆散——这比用索引访问靠谱多了。
5. break 和 continue
break—— 立即跳出整个循环continue—— 跳过本次，进入下一轮
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>break和continue</title></head>
<body>
<div id="output"></div>
<script>
// break：找到目标就停
let breakResult = '';
for (let i = 0; i < 10; i++) {
if (i === 5) break;
breakResult += i + ' ';
}
// continue：跳过偶数
let continueResult = '';
for (let i = 0; i < 6; i++) {
if (i % 2 === 0) continue;
continueResult += i + ' ';
}
document.getElementById('output').innerHTML =
'<strong>break结果：</strong>' + breakResult + '<br>' +
'<strong>continue结果：</strong>' + continueResult;
</script>
</body>
</html>
▶ 示例：break 和 continue
▶ 试一试6. 嵌套循环
循环里还能套循环，最典型的场景是操作二维数据（比如表格、棋盘）：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>嵌套循环</title></head>
<body>
<div id="output"></div>
<script>
let html = '';
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
html += `(${i}, ${j}) `;
}
html += '<br>';
}
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
嵌套循环的性能开销是乘法级的——外层 10 次 × 内层 10 次 = 100 次。层数多了会严重拖慢速度，能用别的方式替代就别嵌套太深。
▶ 示例：生成乘法表
▶ 试一试7. 无限循环的坑
如果循环条件永远为真，程序就会卡死——这就是无限循环：
HTML
<script>
// ⚠️ 千万别这样写！
// while (true) {
// console.log('停不下来了！');
// }
// 常见的坑：忘记更新条件
let i = 0;
// while (i < 5) {
// console.log(i);
// 忘了写 i++，i 永远是 0，循环永不停止
// }
</script>
⚠️ 注意： 写循环时，先确认循环条件最终一定会变为 false。否则浏览器会卡死，只能强制关闭标签页。
❓ 常见问题
Q
for...of 和 for...in 有什么区别？A
for...of 遍历值，用于数组和可迭代对象；for...in 遍历键名（索引），用于对象。遍历数组时用 for...of，for...in 可能遍历到原型链上的属性，容易出问题。Q 哪种循环性能最好？
A 传统
for 循环性能最好，for...of 略慢但可读性好。绝大多数场景这点性能差异可以忽略，可读性优先。Q 嵌套循环里 break 只跳出内层还是全部？
A 只跳出最内层的循环。想跳出外层，可以用标签（label）：
outer: for(...) { for(...) { break outer; } }，但标签用多了代码不好读，建议拆成函数用 return 替代。📖 小节
for最常用，适合已知次数；while适合条件驱动；do...while至少执行一次for...of遍历数组最简洁，拿到的是值不是索引break跳出整个循环，continue跳过本轮继续下一轮- 嵌套循环次数是乘法关系，别嵌太深
- 写循环时务必确认条件最终会变为 false，避免无限循环
📝 作业
- 用
for循环输出 1 到 100 之间所有 3 的倍数 - 用嵌套循环在页面上生成一个 8×8 的棋盘格（黑白交替的格子）
- 写一个程序：让用户输入一个正整数，输出它的阶乘（如输入5，输出 5×4×3×2×1 = 120）
