JavaScript 流程控制

控制流语句是编程的核心机制，用于决定代码的执行顺序。在 JavaScript 中，它们让你能够根据条件做出决策、重复执行任务，或在不同逻辑分支间跳转，从而构建灵活、动态的程序。

学习目标

掌握 if、if...else、if...else if...else 的使用场景
理解 switch 语句的结构与优势
熟练运用三元运算符简化条件赋值
了解控制流在决策、分支和循环中的作用
编写清晰、可维护的条件逻辑代码

`if` 语句

基础条件判断

当某个条件为 true 时，执行一段代码。

const age = 18;
if (age >= 18) {
    console.log("你已成年。");
}

输出：

你已成年。

适用场景：只需在条件满足时执行操作，无需处理“否则”情况。

提示：条件表达式会自动进行布尔转换（如 if (0) 不会执行）。

`if...else` 语句

二选一

提供两个互斥的执行路径：条件为真走 if，否则走 else。

const score = 40;
if (score >= 50) {
    console.log("你通过了。");
} else {
    console.log("你未通过。");
}

输出：

你未通过。

适用场景：非此即彼的逻辑判断（如登录成功 / 失败、开关状态等）。

`if...else if...else`

多条件分支

用于处理多个互斥条件，按顺序检查，一旦匹配就停止后续判断。

const temp = 25;
if (temp > 30) {
    console.log("天气炎热。");
} else if (temp >= 20) {
    console.log("天气温暖。");
} else {
    console.log("天气寒冷。");
}

输出：

天气温暖。

执行流程：

检查 temp > 30 → false
检查 temp >= 20 → true → 执行对应代码块，跳过 else

最佳实践：

将最可能命中的条件放在前面，提升性能
避免过深嵌套，可考虑提前 return 或使用卫语句（Guard Clause）

`switch` 语句

多值匹配

当需要根据一个变量的多个可能值执行不同操作时，switch 是比长串 if...else if 更清晰的选择。

const day = "Monday";
switch (day) {
    case "Monday":
        console.log("一周的开始。");
        break;
    case "Friday":
        console.log("工作周的结束。");
        break;
    default:
        console.log("普通的一天。");
}

输出：

一周的开始。

关键点

关键字	作用
`case`	定义匹配值（使用 `===` 严格比较）
`break`	防止穿透（fall-through），跳出 `switch`
`default`	所有 `case` 都不匹配时的兜底选项

常见错误：忘记写 break，导致代码“穿透”到下一个 case！

示例

带穿透的合法用法

switch (fruit) {
    case "banana":
    case "apple":
        console.log("这是常见水果。");
        break;
    default:
        console.log("不常见的水果。");
}

三元运算符

简洁的条件表达式

三元运算符是 if...else 的表达式形式，常用于赋值或返回值。

let a = 10;
console.log(a === 5 ? "a 等于 5" : "a 不等于 5");

输出：

a 不等于 5

语法：

condition ? exprIfTrue : exprIfFalse

适用场景：

简单条件赋值：const status = isLoggedIn ? "在线" : "离线";
JSX 中条件渲染（React）：{isLoading ? <Spinner /> : <DataList />}

避免：嵌套三元运算（可读性差）

// 不推荐
const result = a ? b ? c : d : e;

// 改用 if 或提取函数

核心用途

用途	对应语句	说明
决策	`if`, `switch`	根据条件执行不同逻辑
分支控制	`break`, `continue`	在循环中跳过或终止（配合 `for`/`while`）
循环	`for`, `while`, `do...while`	重复执行代码块（本节未展开，属循环控制流）
简洁赋值	三元运算符	替代简单 `if...else` 赋值

控制流选择

场景	推荐语句
单一条件判断	`if`
二选一	`if...else`
多个数值 / 字符串精确匹配	`switch`
多个范围或复杂条件	`if...else if...else`
简单条件赋值或返回	三元运算符

重点总结

if 系列适合复杂条件（如范围判断、逻辑组合）
switch 适合离散值匹配（如状态码、枚举值）
始终使用 break 防止 switch 意外穿透
三元运算符是表达式，可用于赋值；if 是语句，不能直接赋值
条件表达式中的值会自动转为布尔类型（注意 falsy 值）

思考题

以下代码输出什么？为什么？

const x = 0;
switch (x) {
    case false:
        console.log("匹配 false");
        break;
    default:
        console.log("默认");
}

如何用 switch 实现成绩等级判断（A: ≥90, B: 80–89, C: 70–79, D: <70）？是否合适？为什么？

重写以下 if...else 为三元运算符：

let message;
if (user.isActive) {
    message = "用户在线";
} else {
    message = "用户离线";
}

源本科技 | 码上会

学习目标

if 语句

if...else 语句

if...else if...else

switch 语句

关键点

示例