第五课:流程控制——如果…就…,否则…(if/else、switch)
大家好!前几节课我们学会了怎么存数据(变量)、怎么操作数据(运算符),但程序一直是个“直肠子”——代码从上往下一条条执行,从不拐弯。今天我们要给程序装上“大脑”,让它学会做决策:如果条件成立,就干这个;否则,就干那个。这就是流程控制,也是程序变得“智能”的开始。
想象一下,你早上起床:如果今天是周末,就睡懒觉;否则(工作日),就起床搬砖。这种“如果…就…否则…”的逻辑,在JavaScript里就是用if/else和switch来实现的。
1. 布尔值的“真假美猴王”
在讲if之前,得先搞懂一个概念:真假值。JavaScript中,每个值都可以被解释为布尔值true或false,但有些值天生就是“假”的,有些则是“真”的。
假值只有以下8个(记住它们,面试常考):
false0(数字零)-0(负零,特殊但也是假)0n(BigInt零)''或""(空字符串)nullundefinedNaN
除了这8个,其他所有值都是真值,比如:true、42、'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开始一直往下执行,直到遇到break或switch结束,这叫穿透(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. 动手小练习:决策模拟器
- 写一个程序,用
prompt获取用户输入的数字,判断它是正数、负数还是零,并输出相应信息。 - 用三元运算符判断一个数字是否是偶数,如果是就输出“偶数”,否则输出“奇数”。(提示:偶数能被2整除,即
num % 2 === 0) - 模拟一个简易登录验证:用
prompt获取用户名和密码(两个prompt),如果用户名为'admin'且密码为'123456',输出“登录成功”,否则输出“用户名或密码错误”。 - 用
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。 - 嵌套与简化:保持代码可读性。
下节课,我们将学习循环——让计算机反复做同一件事,解放你的双手。你会学到for、while、do...while,以及如何用break和continue控制循环节奏。
记得完成作业,下节课见!
课后作业:
- 用
if/else实现一个简单的计算器:用prompt输入两个数字和一个运算符(+、-、*、/),根据运算符计算结果并输出。注意处理除数为0的情况。 - 用
switch实现一个简单的菜单:输入1打印“开始游戏”,输入2打印“加载存档”,输入3打印“设置”,输入4打印“退出”,其他输入打印“无效选项”。 - 思考:如果不用
switch,用if/else if实现上述菜单,哪个代码更简洁?为什么?
评论