JavaScript: JavaScript 循环
循环让程序能重复执行一段代码。手动写 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，这是程序员的默契。
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。### ▶ 示例：用循环生成列表
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 至少执行一次。
▶ 示例：三种循环对比
HTML
<!DOCTYPE html>
<html>
<body>
<h2>三种循环对比</h2>
<div id="output"></div>
<script>
let html = '<strong>for 循环输出 1-5：</strong><br>';
for (let i = 1; i <= 5; i++) {
html += i + ' ';
}
html += '<br><br><strong>while 循环倒计时：</strong><br>';
let count = 5;
while (count > 0) {
html += count + '... ';
count--;
}
html += '发射！';
html += '<br><br><strong>do...while 至少执行一次：</strong><br>';
let x = 100;
do {
html += '执行了！x = ' + x + '<br>';
x++;
} while (x < 100);
// 条件一开始就是 false，但 do 块还是执行了一次
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
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
HTML
📖 仅展示
<!DOCTYPE html>
<html>
<body>
<h2>break 与 continue</h2>
<div id="output"></div>
<script>
let html = '<strong>break — 找到第一个偶数就停：</strong><br>';
let nums = [1, 3, 7, 4, 9, 2];
for (let n of nums) {
if (n % 2 === 0) {
html += `找到偶数 ${n}，停止！`;
break;
}
html += `${n} 是奇数，继续...<br>`;
}
html += '<br><br><strong>continue — 只输出奇数：</strong><br>';
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) continue;
html += i + ' ';
}
html += '<br><br><strong>实际应用 — 查找：</strong><br>';
let students = [
{ name: '小明', score: 95 },
{ name: '小红', score: 72 },
{ name: '小刚', score: 88 }
];
let found = false;
for (let s of students) {
if (s.score >= 90) {
html += `找到优秀学生：${s.name}（${s.score}分）`;
found = true;
break;
}
}
if (!found) {
html += '没有找到90分以上的学生';
}
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
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 次。层数多了会严重拖慢速度，能用别的方式替代就别嵌套太深。
▶ 示例：生成乘法表
HTML
<!DOCTYPE html>
<html>
<body>
<h2>九九乘法表</h2>
<table id="table" border="1" cellpadding="6" style="border-collapse:collapse"></table>
<script>
let html = '';
for (let i = 1; i <= 9; i++) {
html += '<tr>';
for (let j = 1; j <= i; j++) {
html += `<td style="text-align:center">${j}×${i}=${i * j}</td>`;
}
html += '</tr>';
}
document.getElementById('table').innerHTML = html;
</script>
</body>
</html>
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）
