JavaScript 循环 — for 与 while

学习 for 循环和 while 循环 · 难度：入门 · +10XP

JavaScript 循环 — for 与 while

JavaScript 循环 — for 与 while 完全指南

学习前的准备

打开浏览器控制台（F12）开始练习。你需要了解变量和数组的基础知识。循环是编程中最强大的工具之一。

为什么需要循环？

假设你要在控制台打印从 1 到 100 的数字。如果没有循环，你得写 100 次 console.log()。有了循环，只需要几行代码。循环让计算机发挥它的强项：重复执行相同的任务。

// for 循环：打印 1 到 5
for (let i = 1; i <= 5; i++) {
  console.log('第 ' + i + ' 次循环');
}
// 倒序循环
for (let i = 5; i >= 1; i--) {
  console.log(i);
}
// 每次增加 2
for (let i = 0; i <= 10; i += 2) {
  console.log(i);  // 0 2 4 6 8 10
}

遍历数组

const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
// for...of — ES6 推荐方式
for (let fruit of fruits) {
  console.log(fruit);
}
// forEach — 数组方法
fruits.forEach((fruit, index) => {
  console.log(index + ': ' + fruit);
});

while 循环

let count = 1;
while (count <= 5) {
  console.log('计数：' + count);
  count++;
}
// do...while：至少执行一次
let num = 10;
do {
  console.log('num = ' + num);
  num++;
} while (num < 5);

break 和 continue

const scores = [65, 72, 88, 59, 91, 45];
for (let score of scores) {
  if (score < 60) {
    console.log('第一个不及格：' + score);
    break;  // 找到就停止
  }
}
for (let score of scores) {
  if (score < 80) continue;
  console.log('优秀成绩：' + score);
}

小结

循环是编程的“肌肉记忆”。for 循环适合已知次数的场景，while 适合条件驱动的场景，for...of 是遍历数组的首选。break 和 continue 可以精细控制循环流程。现在试试用循环实现一个 99 乘法表吧！