条件判断与循环语句
🎯 引言
在日常开发中，JavaScript 流程控制语句是灵活处理程序逻辑的关键。通过条件判断，我们可以让程序根据不同情况做不同选择；通过循环结构，我们能让程序重复执行某些操作，从而提高效率和代码复用性。
这一篇文章，我们将详细讲解 JS 中的条件判断和循环语句，包括 if、switch、for、while 等常用结构，以及如何使用 break 和 continue 来控制循环流程。学会这些，能让你写出更智能、灵活的前端代码。
🔄 流程控制到底是什么？
流程控制就是程序里控制代码执行顺序和次数的语句。它们让程序不再是简单的一行一行往下运行，而是可以根据条件做选择，或者重复执行特定代码块。
简单点说：
- 条件判断：程序遇到“选择题”，根据条件不同走不同分支，比如 if 和 switch。
- 循环：程序遇到“重复题”，要一次又一次做同样操作，比如 for 和 while。
掌握流程控制，就像给程序装上了“智能大脑”，可以根据不同情况灵活处理各种任务。
🛠️ if 语句：代码里的“选择题”
if 是最常用的条件判断语句，格式很简单：
if (条件) {
// 条件为真时执行的代码
} else {
// 条件为假时执行的代码（可选）
}
举个例子：
var age = 20;
if (age >= 18) {
alert('你已经成年了');
} else {
alert('你还未成年');
}
这里判断年龄，如果满足条件就输出“你已经成年了”，否则输出“你还未成年”。
if 语句还能支持多个条件判断，用 else if 连接：
var score = 75;
if (score >= 90) {
alert('优秀');
} else if (score >= 60) {
alert('及格');
} else {
alert('不及格');
}
这样就可以根据分数范围，输出不同评价。
🔀 switch 语句：多选题的好帮手
当 if...else 太多判断分支时，switch 是更清晰的写法。它根据一个表达式的值，匹配不同的 case 分支：
var fruit = 'apple';
switch (fruit) {
case 'apple':
alert('这是苹果');
break;
case 'banana':
alert('这是香蕉');
break;
default:
alert('不知道是什么水果');
}
这里，switch 会判断 fruit 的值，并执行对应 case 的代码，遇到 break 跳出 switch，避免执行后续代码。
🔁 for 循环：重复做同一件事
for 循环是最常用的循环结构，语法格式：
for (初始化; 条件; 更新) {
// 循环体代码
}
例如，我们想打印数字 1 到 5：
for (var i = 1; i <= 5; i++) {
console.log(i);
}
执行过程：
- 初始化：i = 1
- 判断条件：i <= 5，条件成立则执行循环体
- 循环体中执行 console.log(i)
- 更新表达式：i++
- 重复 2-4 步骤，直到条件不成立跳出循环
🔄 while 循环：条件满足就继续
while 循环根据条件表达式判断是否继续循环，适合循环次数不确定的情况。
格式：
while (条件) {
// 循环体代码
}
比如：
var n = 1;
while (n <= 5) {
console.log(n);
n = n + 1;
}
代码逻辑很简单，只要 n 小于等于 5，就一直打印 n，并且每次循环后 n 增加 1。
🚦 break 和 continue：循环的红绿灯
- break 用来提前退出循环，比如满足某个条件时不再继续。
for (var i = 1; i <= 10; i++) {
if (i == 5) {
break; // 发现5时退出循环
}
console.log(i);
}
// 输出 1 2 3 4
- continue 用来跳过本次循环的剩余代码，直接进入下一次循环。
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue; // 跳过 i 为 3 时的代码
}
console.log(i);
}
// 输出 1 2 4 5
这两个关键字让我们对循环做更细粒度的控制。
🧾 小节总结
- 条件判断让程序能根据不同情况做出选择，if 和 switch 是主要语法。
- 循环结构能重复执行代码，for 和 while 适用于不同场景。
- break 用于提前跳出循环，continue 用于跳过本次循环剩余内容，二者让循环更加灵活。
- 掌握流程控制是写好 JavaScript 程序的基础，能让代码更智能、可控。
❓ 知识问答（Q&A）
Q：if 和 switch 语句有什么区别？
A：if 适合条件复杂或范围判断，switch 适合一个变量等于多个固定值的判断，更清晰。switch 必须用 break 防止贯穿执行。
Q：for 循环和 while 循环有什么不同？
A：for 循环结构更紧凑，初始化、条件、更新写在一行，适合循环次数已知的情况。while 循环只写条件，适合循环次数不确定的场景。
Q：为什么要用 break 和 continue？
A：break 可以提前结束循环，避免不必要的重复执行。continue 可以跳过本次循环剩余代码，直接执行下一次循环，提高代码效率。
🧪 小练习
练习 1：判断成绩等级
编写代码判断一个分数变量 score，输出对应等级：
- 大于等于 90，输出“优秀”
- 大于等于 60，输出“及格”
- 其他输出“不及格”
<script>
var score = 85;
// 在这里编写你的代码
</script>
练习 2：打印偶数
用 for 循环打印 1 到 10 之间所有偶数。
for (var i = 1; i <= 10; i++) {
// 在这里编写你的代码
}
🎉 恭喜你已经掌握 if、switch、for、while、break 和 continue 这些流程控制技能啦！这些基础将助力你写出更加灵活和智能的前端程序。继续练习，写出更棒的代码吧！