13. for / while / do...while

循环就是让电脑重复干活。本页把三种循环摆一起，重点搞清 while 和 do...while 差几次。

核心三种：
① for——知道跑几次最常用
② while——条件成立就一直跑
③ do...while——先跑一次再判断

坑：死循环（忘了 i++）、条件写反。

13.1 互动演示

13.2 知识点逐条讲解（配合代码）

① 循环 = 电梯每层都停：for 循环三要素

循环就是让电脑重复干一件事，像电梯：到一层停一下、做件事、再上去，直到顶楼。要让它能停、能继续，必须有三件事，缺一个就坏：

// 标准 for：打印 1 到 10
for (let i = 1; i <= 10; i++) {
  // 每圈干一件事：把当前 i 打出来
  console.log(i);
}
// ↑从1开始 ↑到10为止 ↑每圈+1
// 顺序：先跑一次 i=1 判断→进循环体→i++→再判断，直到 i>10 停

② while 循环：先问"要不要做"再做

for 是"知道要做几遍"。不知道要做几遍、只知道满足什么条件就继续时，用 while。它和 for 三件事一样，只是写法拆开了：

// ① 起点写在外面（从1开始）
let i = 1;
// ② 条件：只要满足就接着转
while (i <= 15) {
  // 这一圈要干的事：打印当前数
  console.log(i);
  // ③ 千万别忘了更新，不然死循环！
  i++;
}

③ do...while：先做一次再问

它和 while 唯一的区别是判断放后面：先不管条件，至少干一次活，干完再问"还要继续吗"。

// 起点
let i = 1;

// 先不管条件，先干一轮
do {
  // 打印当前数
  console.log(i);
  // 往上加1
  i++;
  // 干完这一轮才回头看条件，满足就继续
} while (i <= 15);

如果你把 i 设成 100、条件写成 i<=10（一开始就不成立），while 一次都不跑，但 do...while 会先跑一次再看条件——点上面"对比"按钮亲眼看差别。这就是两者唯一的核心区别。

实战：用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用：渲染商品列表前 10 条；反复尝试直到成功；做倒计时。

② 常见的问题：忘写 i++ 浏览器直接卡死；while 条件一开始不成立，一次都不跑。

③ 解决思路：写循环先确认三要素都在；想至少跑一次就用 do...while。

本页重点