浏览器不支持(未启用)JavaScript,本页面的某些功能无法正常使用

第五课:流程控制——如果…就…,否则…(if/else、switch)

大家好!前几节课我们学会了怎么存数据(变量)、怎么操作数据(运算符),但程序一直是个“直肠子”——代码从上往下一条条执行,从不拐弯。今天我们要给程序装上“大脑”,让它学会做决策:如果条件成立,就干这个;否则,就干那个。这就是流程控制,也是程序变得“智能”的开始。

想象一下,你早上起床:如果今天是周末,就睡懒觉;否则(工作日),就起床搬砖。这种“如果…就…否则…”的逻辑,在JavaScript里就是用if/elseswitch来实现的。


1. 布尔值的“真假美猴王”

在讲if之前,得先搞懂一个概念:真假值。JavaScript中,每个值都可以被解释为布尔值truefalse,但有些值天生就是“假”的,有些则是“真”的。

假值只有以下8个(记住它们,面试常考):

  • false
  • 0(数字零)
  • -0(负零,特殊但也是假)
  • 0n(BigInt零)
  • ''""(空字符串)
  • null
  • undefined
  • NaN

除了这8个,其他所有值都是真值,比如:true42'hello'[](空数组)、{}(空对象)、function(){}等等。

这个知识点很重要,因为if的条件判断就是基于真假值的——它会把条件表达式的结果转成布尔值,然后决定走哪条路。


2. if语句:最简单的“岔路口”

if语句的语法很简单:

if (条件) {
    // 条件为真时执行的代码
}

如果条件为真,就执行花括号里的代码;否则跳过。

let age = 20;
if (age >= 18) {
    console.log('你已经成年了,可以去网吧了!');
}

如果age改成 16,控制台就不会打印任何东西。

2.1 if...else:两条路,选一个

如果条件为假时也想干点啥,就用else

if (条件) {
    // 条件为真时执行
} else {
    // 条件为假时执行
}

举个栗子

let age = 16;
if (age >= 18) {
    console.log('欢迎进入网吧!');
} else {
    console.log('未成年请回家写作业。');
}

2.2 if...else if...else:多条路,选一条

现实中有多种情况,比如根据分数评等级:90以上是A,80-89是B,70-79是C,60-69是D,60以下是F。这时可以用else if

let score = 85;
if (score >= 90) {
    console.log('A');
} else if (score >= 80) {
    console.log('B');
} else if (score >= 70) {
    console.log('C');
} else if (score >= 60) {
    console.log('D');
} else {
    console.log('F');
}

注意:一旦某个条件满足,执行完对应的代码块后就会跳出整个if结构,后面的else if不再判断。所以条件的顺序很重要,比如应该从高分往低分写,否则会出错。


3. 三元运算符:简洁版的if...else

如果只是简单的二选一赋值,可以用三元运算符? :,它长得像这样:

条件 ? 表达式1 : 表达式2

如果条件为真,返回表达式1的值,否则返回表达式2的值。

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

它很适合用在需要根据条件返回不同值的场景,但不要嵌套太多层,否则代码可读性会下降。


4. switch语句:多条路,选一条(专门对付“等于”情况)

如果你有一堆固定的值需要匹配(比如星期几、选项编号),用if...else if会显得啰嗦。这时switch更合适。

switch (表达式) {
    case 值1:
        // 表达式 === 值1 时执行
        break;
    case 值2:
        // 表达式 === 值2 时执行
        break;
    default:
        // 都不匹配时执行
}

注意:switch用的是严格相等===),不会做类型转换。

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;
    case 6:
        dayName = '星期六';
        break;
    case 7:
        dayName = '星期日';
        break;
    default:
        dayName = '非法日期';
}
console.log(dayName); // '星期三'

4.1 break的重要性

如果没有break,程序会从匹配的case开始一直往下执行,直到遇到breakswitch结束,这叫穿透(fall-through)。有时候可以利用穿透来简化代码,比如多个case执行相同逻辑:

let fruit = '苹果';
switch (fruit) {
    case '苹果':
    case '梨':
    case '桃子':
        console.log('这是水果');
        break;
    default:
        console.log('不知道是啥');
}

但如果不需要穿透,一定要记得加break,否则会出bug。


5. 条件嵌套:套娃警告

条件里面还可以再套条件,就像俄罗斯套娃。但嵌套太深会让代码难以阅读,所以一般建议用尽早返回或者逻辑运算符简化。

let age = 25;
let hasTicket = true;
if (age >= 18) {
    if (hasTicket) {
        console.log('请进场');
    } else {
        console.log('请先买票');
    }
} else {
    console.log('未成年禁止入内');
}

可以用逻辑运算符简化:

if (age >= 18 && hasTicket) {
    console.log('请进场');
} else if (age >= 18 && !hasTicket) {
    console.log('请先买票');
} else {
    console.log('未成年禁止入内');
}

甚至可以用三元嵌套,但不推荐,可读性太差。


6. 常见坑点与技巧

6.1 赋值vs比较

新手常犯的错误:在if条件里用=而不是===

let x = 5;
if (x = 3) { // 这是赋值,不是比较!x 被赋值为 3,整个表达式结果是 3,所以条件为真
    console.log('这个代码总会执行');
}

正确的应该是if (x === 3)。用===可以避免这种问题。

6.2 使用布尔值直接判断

如果条件本身就是布尔值,没必要再比较一次。

let isLoggedIn = true;
if (isLoggedIn === true) { // 多余
    // ...
}
if (isLoggedIn) { // 简洁
    // ...
}

6.3 用逻辑运算符简化

有时候可以用&&||代替if,特别是执行简单语句时。

// 如果用户已登录,显示欢迎语
if (isLoggedIn) {
    console.log('欢迎回来');
}
// 可以写成:
isLoggedIn && console.log('欢迎回来');

// 设置默认值
let username = inputName || '匿名';

7. 动手小练习:决策模拟器

  1. 写一个程序,用prompt获取用户输入的数字,判断它是正数、负数还是零,并输出相应信息。
  2. 用三元运算符判断一个数字是否是偶数,如果是就输出“偶数”,否则输出“奇数”。(提示:偶数能被2整除,即num % 2 === 0
  3. 模拟一个简易登录验证:用prompt获取用户名和密码(两个prompt),如果用户名为'admin'且密码为'123456',输出“登录成功”,否则输出“用户名或密码错误”。
  4. switch改写下面的if语句:
let color = 'red';
if (color === 'red') {
    console.log('红色');
} else if (color === 'blue') {
    console.log('蓝色');
} else if (color === 'green') {
    console.log('绿色');
} else {
    console.log('未知颜色');
}

8. 小结与下集预告

今天你学会了:

  • 真假值:8个falsy,其他都是truthy。
  • if/else:基本条件分支,可以处理多种情况。
  • 三元运算符:简洁的二选一。
  • switch:专门用于多值匹配,注意break
  • 嵌套与简化:保持代码可读性。

下节课,我们将学习循环——让计算机反复做同一件事,解放你的双手。你会学到forwhiledo...while,以及如何用breakcontinue控制循环节奏。

记得完成作业,下节课见!


课后作业

  1. if/else实现一个简单的计算器:用prompt输入两个数字和一个运算符(+、-、*、/),根据运算符计算结果并输出。注意处理除数为0的情况。
  2. switch实现一个简单的菜单:输入1打印“开始游戏”,输入2打印“加载存档”,输入3打印“设置”,输入4打印“退出”,其他输入打印“无效选项”。
  3. 思考:如果不用switch,用if/else if实现上述菜单,哪个代码更简洁?为什么?
标签: JavaScript
作者: 野码指月
日期:2026年03月21日

评论