主题
1-7JavaScript循环语句
本页对应 第一章JavaScript基础，共 6 段视频，约 56 分钟。
学习目标
- 能够说明循环语句的适用场景，并区分分支语句与循环语句的使用差异。
- 能够按“初始值、循环条件、变量计数”三要素独立编写
while循环，并通过调试工具验证其执行顺序、定位并避免死循环。 - 能够使用
for循环的三要素语法完成重复输出，解释其执行过程，并将简单while循环改写为for循环。 - 能够综合运用
for循环、if判断、模板字符串和累加变量，完成星星输出、年龄输出、1～100 偶数筛选及累加和等练习。 - 能够区分
break与continue的作用，正确使用二者实现终止整个循环和跳过本次循环。 - 能够识别
while (true)与for (;;)构成的无限循环，并结合break退出循环，完成 ATM 存取款机综合案例中的循环菜单与退出流程。
知识点
案例目标与效果
为什么需要：前面分别学了 while 循环、if...else if 分支和输入输出，这个案例把它们串起来，做一个能反复操作、直到用户退出的 ATM 存取款机。
怎么想：ATM 不是只操作一次，而是不断提示“请选择您的操作”，所以提示输入框要写在循环里；用户选 4 才退出，因此用 break 结束循环；余额要在多次操作间保留，所以金额变量要提前声明。
怎么做：先准备余额 money，再用无限循环反复弹窗，根据输入值做取款、存款、查看余额或退出。
易错点：金额变量若写在循环里，每轮都会被重置；无限循环里必须有退出条件，否则会一直弹窗。
先准备余额变量
为什么需要：取款是减法，存款是加法，查看余额要显示当前金额，因此需要一个在循环外保存余额的变量。
怎么想：笔记中预先存储一个数额，声明 let money = 100，后续所有操作都修改这个 money。
怎么做：
javascript
let money = 100易错点：不要把它放进 while 里面，否则每次循环都重新变成 100，之前的存取结果会丢失。
用 while(true) 反复提示输入
为什么需要：用户可能连续取款、存款、查余额，所以提示框要反复出现。
怎么想：while (true) 的条件永远为真，构成无限循环；但无限循环不能自己停，必须配合 break 退出。转写稿里也强调，无限循环容易造成卡顿，所以一定要有退出循环的条件。
怎么做：把 prompt 写进循环，并用一元加号 +prompt(...) 把输入转成数字：
javascript
while (true) {
let num = +prompt(`
请选择您的操作:
1.取款
2.存款
3.查看余额
4.退出
`)
}易错点：prompt 得到的是字符串，若不转数字，后面 num === 4 可能不成立，导致无法退出；提示框若写在循环外，只会问一次。
用 if else if 执行不同操作
为什么需要：不同选项要做不同事情，取款做减法，存款做加法，查看余额直接显示。
怎么想：用 if...else if 多分支判断 num 的值；取款金额和存款金额也要用 +prompt 转成数字。
怎么做：
javascript
if (num === 1) {
let qu = +prompt('请您输入取款金额:')
money -= qu
} else if (num === 2) {
let cun = +prompt('请您输入存款金额:')
money += cun
} else if (num === 3) {
alert(`您的银行卡余额是: ${money}`)
}易错点：比较要用 ===，不要写成赋值 =；金额要保证是数字类型；按笔记代码，输入非 1—4 的值不会进入任何分支，会回到下一轮循环。
退出循环并输出结果
为什么需要：用户选 4 表示不再操作，程序要结束循环并给出最终余额。
怎么想：在 num === 4 时执行 break。break 终止整个循环，循环结束后再执行 document.write。转写稿中调试时可以看到：遇到 break 后不再回到循环条件，而是直接退出循环。
怎么做：
javascript
} else if (num === 4) {
break
}循环外输出：
javascript
document.write(`滴，您的银行卡余额为: ${money}元，请节约消费`)易错点：break 不要漏，否则选 4 也退不出去；输出语句要放在循环外，表示所有操作结束后的最终结果。调试时可在 while 或 prompt 行打断点，刷新页面后单步执行，观察 num 和 money 的变化：例如初始 100，取 20 后 money 变 80，再存 30 后变 110；选 4 时走到 break，循环结束。
完整代码对照
javascript
// 综合案例 - ATM存取款机
// 提前声明金额变量 money
let money = 100
// 1.提示输入框写到循环里面（无限循环）
while (true) {
let num = +prompt(`
请选择您的操作:
1.取款
2.存款
3.查看余额
4.退出
`)
if (num === 1) {
let qu = +prompt('请您输入取款金额:')
// money = money - qu
money -= qu
} else if (num === 2) {
let cun = +prompt('请您输入存款金额:')
// money = money + cun
money += cun
} else if (num === 3) {
alert(`您的银行卡余额是: ${money}`)
} else if (num === 4) {
// 2.用户输入4则退出循环 break 一定要小心数据类型
break
}
}
document.write(`滴，您的银行卡余额为: ${money}元，请节约消费`)课件图示
代码示例
代码1：综合案例 —— ATM 存取款机（while 无限循环 + break）
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ATM存取款机</title>
</head>
<body>
<script>
// 综合案例 - ATM存取款机
// 提前声明金额变量 money（必须写在循环外面，否则每次循环都会被重置）
let money = 100
// 1. 提示输入框写到循环里面（无限循环）
while (true) {
let num = +prompt(`
请选择您的操作:
1.取款
2.存款
3.查看余额
4.退出
`)
if (num === 1) {
let qu = +prompt('请您输入取款金额:')
// money = money - qu
money -= qu
} else if (num === 2) {
let cun = +prompt('请您输入存款金额:')
// money = money + cun
money += cun
} else if (num === 3) {
alert(`您的银行卡余额是: ${money}`)
} else if (num === 4) {
// 2. 用户输入4则退出循环 break 一定要小心数据类型
break
}
}
document.write(`滴，您的银行卡余额为: ${money}元，请节约消费`)
</script>
</body>
</html>关键行与易错点
while (true)是无限循环的写法，循环条件永远为真，所以必须有break才能退出，否则页面卡死。+prompt(...)前面的+是隐式类型转换：prompt拿到的是字符串"1"，不加+时"4" === 4永远为假，break不执行 → 死循环，这是本案例最大的坑。- 判断用
===严格相等，避免"1" == 1这类隐式转换带来的误判。 money必须声明在while外面，否则每轮循环都重新赋值100，存取款结果永远不累积。- 最后的
document.write写在循环外面，只有退出循环后才执行。 money -= qu/money += cun是赋值运算符的简写，等价于money = money - qu。
代码2：for 循环三要素 + 累加和 + break / continue
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>for循环练习</title>
</head>
<body>
<script>
// 1. 1~100 之间的累加和
// 核心思路：拿着前面累加的值，和下一个数字相加
let sum = 0 // 累加和变量声明在循环外面
for (let i = 1; i <= 100; i++) {
sum += i // 等价于 sum = sum + i
}
document.write(`1~100之间的累加和是：${sum}<br>`)
// 2. 1~100 之间所有偶数的和（循环里套 if 做筛选）
let evenSum = 0
for (let i = 1; i <= 100; i++) {
if (i % 2 === 0) { // 余数为 0 说明能被 2 整除，即偶数
evenSum += i
}
}
document.write(`1~100之间的偶数和是：${evenSum}<br>`)
// 3. break：找到第 3 个孩子就退出整个循环
for (let i = 1; i <= 6; i++) {
if (i === 3) {
break // 后面的 4、5、6 都不再执行
}
document.write(`我是第${i}个孩子<br>`)
}
// 4. continue：跳过第 3 个，其余继续循环
for (let i = 1; i <= 6; i++) {
if (i === 3) {
continue // 本次跳过，直接跳到 i++ 进入下一轮
}
document.write(`第${i}个孩子可以进入电影院<br>`)
}
</script>
</body>
</html>关键行与易错点
- for 的循环三要素写在括号里，中间用两个分号隔开：
for (初始值; 循环条件; 变量计数)，最后一个后面不加分号。 let i = 1只执行一次，之后只在“判断条件 → 执行循环体 →i++→ 再判断条件”之间转圈。sum/evenSum必须声明在 for 外面，否则每轮循环都被重置成 0，永远累加不出结果。- 输出语句
document.write必须写在 for 的外面，写在里面会打印 100 次中间结果。 sum += i是简写形式，等价于sum = sum + i；求奇数就把条件改成i % 2 !== 0。break终止整个循环（结果已得到就没必要再循环）；continue只终止本次循环，后面的次数继续，两者走向完全不同。- 变量计数
i++千万别漏，漏掉就是死循环。
代码3：无限循环 + break（一直弹窗直到输入“爱”）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>无限循环</title>
</head>
<body>
<script>
// while(true) 构造无限循环，必须配合 break 退出
while (true) {
let love = prompt('你爱我吗？')
if (love === '爱') {
break // 只有输入“爱”才退出整个循环
}
}
document.write('好的，我知道了 ❤')
// 等价的 for 写法：括号里只留两个分号，一个都不能少
// for (;;) {
// let love = prompt('你爱我吗？')
// if (love === '爱') {
// break
// }
// }
</script>
</body>
</html>关键行与易错点
while (true)括号里永远为真，循环永不停歇；while (1)、while ('abc')同样会构成无限循环（只有 0、空串、null、undefined、NaN、false 这几种才为假）。- 无限循环必须有
break作为出口，否则浏览器一直转圈、页面卡死，连调试都进不去。 for (;;)也能构造无限循环，但两个分号是语法规范，不能省略，少一个会报语法错误。- 实际开发中推荐用
while (true)，语义更直观；for (;;)可读性差一些。 - 易错点：
prompt点“取消”时返回null，null === '爱'为假，会继续弹窗——这正是本案例“输入的不是爱就一直问”的预期效果。
常见错误
现象：
while循环页面一直转圈、浏览器卡死。
原因：循环变量没有更新，或continue跳过了自增语句，条件永远为真。
修法：检查循环体内是否每条路径都能到达i++；必要时把自增放到continue之前，或改用for集中三要素。现象：ATM 案例输入
4无法退出，或输入1/2/3分支不生效。
原因：prompt返回字符串，直接用===与数字比较导致类型不匹配。
修法：接收后立即转换类型，如let num = +prompt(...)，再参与比较和运算。现象：累加和结果明显偏小，或每次循环都从 0 重新开始。
原因：累加器sum声明/初始化放在循环体内；或写成sum = i覆盖了已有累加值。
修法：sum在循环外初始化；循环内使用sum += i或sum = sum + i；最终输出放在循环外。现象：
break后仍执行了部分代码，或continue后仍打印了本该跳过的内容。
原因：break/continue写在了错误分支或错误位置；嵌套循环中误以为会影响外层循环。
修法：把break/continue放进明确的条件分支；嵌套时记住它们只作用于当前层循环；continue后不要依赖其下方代码执行。现象：
for循环报语法错误，或循环次数多一次/少一次。
原因：三要素之间漏写分号、误写逗号；边界条件<与<=使用不当。
修法：固定写成for (初始化; 条件; 更新)；用首项、末项、越界值各测一次，确认边界。现象：无限循环中用户输入正确值仍退不出，或第一次就退出。
原因：break条件写反、比较值类型不一致，或break写在循环体顶层。
修法：先打印/断点确认输入值和比较值；把break放进匹配成功的if内，并保证退出条件可达。
练习
- 改造 ATM 案例：取款金额大于余额时提示“余额不足”且不扣款；输入非
1~4时提示“无效操作”；退出时输出最终余额。 - 分别用
for和while求1~100的奇数和、偶数和，输出到页面，并说明两种写法中三要素分别放在哪里。 - 实现“你爱我吗”无限循环：输入“爱”退出，否则继续询问；同时统计一共询问了多少次。
- 输出
1~100中能被 3 整除但不能被 5 整除的数，要求用continue跳过能被 5 整除的情况。 - 打印 5 行 5 列星星；在第 3 行第 3 列分别用
break和continue测试，观察输出差异并记录原因。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | while循环 | 11:20 |
| 2 | for循环 | 06:38 |
| 3 | for循环练习1 | 11:12 |
| 4 | for循环练习2 | 11:23 |
| 5 | break和continue中止循环 | 08:53 |
| 6 | 无限循环 | 06:51 |
小结
- 次数明确、三要素集中时优先用
for；条件驱动、次数不确定时用while更自然。 - 循环变量更新必须“每条执行路径都可到达”，这是避免死循环的第一检查点。
- 用户输入默认按字符串处理，参与数值比较和计算前必须显式转换。
break终止整个当前层循环，continue只跳过本次；嵌套循环中不要误判作用范围。- 累加器在循环外初始化，结果输出在循环结束后；循环内只负责更新累加值。
- 无限循环必须设计明确出口，调试时先加计数上限或断点，避免页面卡死。
- ATM 这类状态型案例应先校验再修改金额，保证“提示信息”和“余额数据”一致。
- 边界值（首项、末项、越界值）是最小必测集，能快速暴露
</<=和类型比较问题。