第四章：流程控制——if-else、switch-case、三元运算符的实战应用

流程控制，说白了就是让代码「学会做选择」。

我刚开始写 JavaScript 时，觉得这玩意儿不就是判断一下条件嘛，有啥难的？结果写出来的代码又臭又长，自己都不想看第二遍。后来踩的坑多了，才慢慢摸到门道。

今天咱们就把 if-else、switch-case、三元运算符这三个家伙彻底聊透。我会把我在项目中用它们的真实场景、踩过的坑、以及什么时候该用哪个，统统告诉你。

4.1 if-else：最基础也最常用的判断

if-else 是流程控制的「老大哥」。你写任何逻辑，几乎都离不开它。

4.1.1 基本语法

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 中间是有空格的，不是 elseif。我见过不少新手在这上面栽跟头。

4.1.2 条件判断的「坑」

我在项目中遇到过一个问题：用户输入年龄，我判断是否成年。代码写的是：

let age = '18';
if (age == 18) {
    console.log('成年了');
}
// 输出：成年了

看起来没问题对吧？但 == 会做类型转换，字符串 '18' 和数字 18 被当成相等。如果用户输入的是 '18abc'，结果还是 true！

⚠️ 避坑指南： 我曾经因为用 == 而不是 ===，导致一个支付系统的金额判断出了 bug。用户输入 '100' 和数字 100 被当成一样，但实际业务上字符串和数字是两种不同的数据来源。从那以后，我所有条件判断一律用 ===。

4.1.3 嵌套 if 的「扁平化」技巧

你想想看，如果条件嵌套太多层，代码读起来是不是很痛苦？

// 糟糕的写法
if (user) {
    if (user.isLogin) {
        if (user.role === 'admin') {
            console.log('欢迎管理员');
        }
    }
}

// 更好的写法——提前返回
if (!user) return;
if (!user.isLogin) return;
if (user.role === 'admin') {
    console.log('欢迎管理员');
}

我个人习惯用「提前返回」的方式，把嵌套拆平。代码行数没少，但可读性翻倍。

4.2 switch-case：多分支场景的利器

当你要判断的值是固定的几个选项时，switch-case 比 if-else 更清晰。

4.2.1 基本用法

let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = '周一';
        break;
    case 2:
        dayName = '周二';
        break;
    case 3:
        dayName = '周三';
        break;
    case 4:
        dayName = '周四';
        break;
    case 5:
        dayName = '周五';
        break;
    default:
        dayName = '周末';
}

console.log(dayName); // 周三

4.2.2 别忘了 break！

switch-case 最经典的坑就是「穿透」。如果你忘了写 break，代码会继续往下执行。

💡 小技巧： 有时候「穿透」反而是有用的。比如你想让多个 case 执行同一段逻辑： 
let fruit = '苹果';
switch (fruit) {
    case '苹果':
    case '香蕉':
    case '橙子':
        console.log('这是水果');
        break;
    case '白菜':
    case '萝卜':
        console.log('这是蔬菜');
        break;
    default:
        console.log('不知道是什么');
}
// 输出：这是水果

你看，苹果、香蕉、橙子都走同一个逻辑。这种写法比 if-else 的多个 || 条件要清爽得多。

4.2.3 switch 的「严格比较」

switch 用的是 === 比较，不是 ==。这一点很多人不知道。

let value = '1';
switch (value) {
    case 1:
        console.log('数字1');
        break;
    case '1':
        console.log('字符串1');
        break;
    default:
        console.log('其他');
}
// 输出：字符串1

嗯，这里要注意：如果你用 == 的话，数字 1 和字符串 '1' 会被当成相等，但 switch 不会。这其实是个好事，避免了隐式类型转换带来的坑。

4.3 三元运算符：简洁的「二选一」

三元运算符是 if-else 的「语法糖」。它让简单的二选一变得非常简洁。

4.3.1 基本语法

let age = 20;
let status = age >= 18 ? '成年' : '未成年';
console.log(status); // 成年

说白了就是：条件 ? 真值 : 假值。一行搞定。

4.3.2 什么时候用三元？

我个人习惯是：条件简单、结果也简单的时候用三元。比如：

  • 给变量赋值
  • 在模板字符串中做判断
  • 在 JSX 中做条件渲染
// 模板字符串中使用
let isVIP = true;
console.log(`欢迎${isVIP ? '尊贵的VIP' : '普通'}用户`);

// 函数返回值
function getDiscount(level) {
    return level === 'gold' ? 0.8 : 0.9;
}

4.3.3 三元的「禁区」

⚠️ 避坑指南： 我曾经接手过一个项目，里面有一段这样的代码： 
// 别这么写！可读性极差
let result = a ? (b ? (c ? 'A' : 'B') : (d ? 'C' : 'D')) : 'E';

这种嵌套三元，说白了就是「炫技」。我自己看着都头疼，更别说维护了。遇到复杂逻辑，老老实实用 if-else 或者 switch。

4.4 实战对比：什么时候用哪个？

我整理了一个表格，方便你快速决策：

场景 推荐用 原因
简单的二选一 三元运算符 一行搞定，简洁明了
2-3 个分支 if-else 可读性好，容易扩展
多个固定值判断 switch-case 结构清晰，避免重复条件
复杂条件（&&、|| 组合） if-else 三元和 switch 都搞不定
需要「穿透」效果 switch-case 这是 switch 的独门绝技

4.5 一个完整的实战案例

咱们来写一个「用户权限判断」的小功能。假设系统有三种角色：admin、editor、viewer。不同角色能看到不同的内容。

function getDashboard(role) {
    // 先做简单的校验
    if (!role) {
        return '请先登录';
    }

    // 用 switch 处理多分支
    switch (role) {
        case 'admin':
            return '管理后台：用户管理、内容管理、系统设置';
        case 'editor':
            return '编辑后台：内容管理、发布文章';
        case 'viewer':
            return '查看后台：仅浏览内容';
        default:
            return '未知角色，请联系管理员';
    }
}

// 使用三元做简单判断
let isLoggedIn = true;
let message = isLoggedIn ? getDashboard('editor') : '请先登录';

console.log(message);
// 输出：编辑后台：内容管理、发布文章

你看，这个例子把 if-else、switch-case、三元都用上了。各司其职，代码读起来很舒服。

💡 我的建议： 写代码的时候，多想想「如果三个月后的我来看这段代码，能一眼看懂吗？」。能，就对了；不能，就重构。

好了，流程控制这块就聊到这儿。说白了就是三个工具，用对场景才是关键。下一章咱们聊聊循环，那又是另一番天地了。

← 上一章 📖 返回目录 下一章 →