JavaScript流程控制语句
1259 字
6 分钟
JavaScript流程控制语句
JavaScript 中，流程控制语句用于控制代码的执行顺序，主要分为两大类：
- 条件判断：
if...else、switch、三元运算符，根据条件决定执行哪些代码。 - 循环控制：
for、while、do...while，让代码重复执行。
if…else 条件判断语句
if...else 用于根据条件是否成立，决定执行不同的代码。
基本语法
if (条件表达式) { // 条件为 true 时执行} else { // 条件为 false 时执行}示例：
let age = 18;
if (age >= 18) { console.log("成年人");} else { console.log("未成年人");}多条件判断
通过 else if 可以判断多个条件。
let score = 85;
if (score >= 90) { console.log("优秀");} else if (score >= 80) { console.log("良好");} else if (score >= 60) { console.log("及格");} else { console.log("不及格");}注意：
- 条件表达式会转换为布尔值进行判断。
- 从上往下依次判断，命中第一个成立的条件后，跳过后续分支。
else if和else都是可选的。- 建议始终使用
{}包裹代码块。
switch 多分支选择语句
switch 用于将一个表达式的值与多个 case 进行匹配。
基本语法
switch (表达式) { case 值1: // 匹配值1时执行 break;
case 值2: // 匹配值2时执行 break;
default: // 都不匹配时执行}示例：
let day = 3;
switch (day) { case 1: console.log("星期一"); break; case 2: console.log("星期二"); break; case 3: console.log("星期三"); break; default: console.log("其他日期");}输出：星期三
break 的作用
break 用于结束当前 switch 语句。
如果不写 break，程序会继续执行后面的 case 代码，这种行为称为穿透（fall-through）。
let num = 1;
switch (num) { case 1: console.log("一"); case 2: console.log("二"); default: console.log("其他");}输出：
一二其他多个 case 共用代码
let day = 6;
switch (day) { case 6: case 7: console.log("周末"); break; default: console.log("工作日");}输出：周末
注意： switch 使用严格相等（===）的匹配规则，不会自动将字符串 "1" 转换为数字 1。
三元运算符
三元运算符 ? : 是一种根据条件返回不同结果的表达式，可以简化简单的 if...else 判断。
基本语法
条件表达式 ? 表达式1 : 表达式2;- 条件为
true：返回表达式1的结果。 - 条件为
false：返回表达式2的结果。
示例：
let age = 18;let result = age >= 18 ? "成年人" : "未成年人";console.log(result); // 成年人等价于：
let age = 18;let result;
if (age >= 18) { result = "成年人";} else { result = "未成年人";}嵌套三元运算符
let score = 85;
let result = score >= 90 ? "优秀" : score >= 60 ? "及格" : "不及格";
console.log(result); // 及格虽然三元运算符支持嵌套，但复杂条件推荐使用 if...else，可读性更好。
for 循环语句
for 循环适合循环次数已知或可以明确控制的场景。
基本语法
for (初始化表达式; 条件表达式; 更新表达式) { // 循环执行的代码}使用示例
for (let i = 1; i <= 5; i++) { console.log(i);}输出：
12345执行过程：
| 循环 | i 的值 | 条件 i <= 5 | 结果 |
|---|---|---|---|
| 第1次 | 1 | true | 输出1 |
| 第2次 | 2 | true | 输出2 |
| 第3次 | 3 | true | 输出3 |
| 第4次 | 4 | true | 输出4 |
| 第5次 | 5 | true | 输出5 |
| 第6次 | 6 | false | 结束循环 |
遍历数组
const arr = ["HTML", "CSS", "JavaScript"];
for (let i = 0; i < arr.length; i++) { console.log(arr[i]);}输出：
HTMLCSSJavaScriptwhile 循环语句
while 循环会先判断条件，条件成立才执行循环体。
通常适用于循环次数不确定，需要根据条件决定是否继续执行的场景。
基本语法
while (条件表达式) { // 条件成立时重复执行}使用示例
let i = 1;
while (i <= 5) { console.log(i); i++;}输出：
12345注意：
- 先判断条件，再执行循环体。
- 如果第一次判断条件不成立，则一次都不会执行。
- 要确保循环条件最终能够变为
false，避免死循环。
例如：
let i = 10;
while (i < 5) { console.log(i);}因为条件一开始就不成立，所以不会输出任何内容。
do…while 循环语句
do...while 与 while 类似，但它会先执行一次循环体，再判断条件。
基本语法
do { // 循环体} while (条件表达式);使用示例
let i = 1;
do { console.log(i); i++;} while (i <= 5);输出：
12345与 while 的区别
// whilelet a = 10;
while (a < 5) { console.log("while执行");}
// do...whilelet b = 10;
do { console.log("do...while执行");} while (b < 5);结果：
while：不会执行。do...while：执行一次。
循环控制语句 break 和 continue
这两个关键字可以用于 for、while 和 do...while 循环。
break 结束循环
for (let i = 1; i <= 5; i++) { if (i === 3) { break; }
console.log(i);}输出：
12当 i === 3 时，直接结束整个循环。
continue 跳过本次循环
for (let i = 1; i <= 5; i++) { if (i === 3) { continue; }
console.log(i);}输出：
1245当 i === 3 时，跳过本次循环剩余的代码，继续下一轮。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
JavaScript函数
前端工程师2026-10-19
2
JavaScript包装类
前端工程师2026-10-20
3
JavaScript面向对象
前端工程师2026-10-20
4
JavaScript数组
前端工程师2026-10-19
5
JavaScript正则表达式
前端工程师2026-10-20
随机文章随机推荐