JavaScript: JavaScript 条件语句
最后更新：2026-10-13
条件语句让程序有了"判断力"——根据不同情况走不同的路。没有条件语句，程序只能从上到下一条道走到黑；有了它，程序才能像人一样做选择。
1. if 语句
最基础的条件判断：如果条件为真，就执行花括号里的代码。
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>if语句</title></head>
<body>
<div id="output"></div>
<script>
let age = 20;
if (age >= 18) {
document.getElementById('output').textContent = '你已成年';
}
</script>
</body>
</html>
花括号里只有一条语句时可以省略花括号，但强烈不建议——加上花括号代码更清晰，也避免后续加语句时忘记补。
二选一的情况：条件为真走 if，否则走 else。
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>if...else</title></head>
<body>
<div id="output"></div>
<script>
let score = 45;
if (score >= 60) {
document.getElementById('output').textContent = '及格了';
} else {
document.getElementById('output').textContent = '没及格，继续努力';
}
</script>
</body>
</html>
3. if...else if...else
多个条件依次判断，从上到下，哪个先满足就执行哪个，剩下的全部跳过：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>if...else if</title></head>
<body>
<div id="output"></div>
<script>
let score = 85;
if (score >= 90) {
document.getElementById('output').textContent = '优秀';
} else if (score >= 80) {
document.getElementById('output').textContent = '良好';
} else if (score >= 60) {
document.getElementById('output').textContent = '及格';
} else {
document.getElementById('output').textContent = '不及格';
}
</script>
</body>
</html>
▶ 示例：根据分数判断等级
▶ 试一试4. 三元运算符
三元运算符是 if...else 的简写形式，适合简单的二选一：
HTML
<script>
// 语法：条件 ? 值1 : 值2
let age = 20;
let status = age >= 18 ? '成年' : '未成年';
// 等价于：
let status2;
if (age >= 18) {
status2 = '成年';
} else {
status2 = '未成年';
}
</script>
💡 提示： 三元运算符适合赋值类的简单判断。逻辑复杂时别硬塞三元，老老实实写 if...else，可读性更重要。
5. switch 语句
当判断的是同一个变量的多个固定值时，switch 比 if...else if 更清晰：
HTML
<script>
let day = 3;
switch (day) {
case 1: console.log('周一'); break;
case 2: console.log('周二'); break;
case 3: console.log('周三'); break;
// ...
default: console.log('无效的数字');
}
</script>
两个关键点：
break不能省——没有 break 会"穿透"到下一个 case 继续执行default是兜底——所有 case 都不匹配时执行
▶ 示例：switch 穿透的坑
▶ 试一试⚠️ 注意： 忘写 break 是 switch 最常见的 bug。但有时候"穿透"也能派上用场——比如多个值执行相同逻辑时，故意省略 break 让它们合并。
6. falsy 值
在条件判断中，以下值都会被视为 false（称为 falsy 值）：
| falsy 值 | 说明 |
|---|---|
false |
布尔假 |
0 |
数字零 |
"" 或 '' |
空字符串 |
null |
空值 |
undefined |
未定义 |
NaN |
非数字 |
其余所有值都是 truthy，包括 "0"（字符串零）、[]（空数组）、{}（空对象）——这些虽然"空"，但在条件判断中都是 true。
▶ 示例：falsy 值判断
▶ 试一试⚠️ 注意： 用
|| 设置默认值时要注意：0 和 "" 是合法值但会被 falsy 误杀。这种情况用 ??（空值合并运算符）更安全——它只在 null 和 undefined 时才走默认值。
❓ 常见问题
Q
== 和 === 在条件判断中有什么区别？A
== 会做类型转换再比较（"1" == 1 是 true），=== 不转换（"1" === 1 是 false）。建议始终用 ===，避免隐式转换带来的意外。Q switch 可以判断字符串吗？
A 可以。
switch 不限于数字，字符串、布尔值都能判断，用的是全等比较 ===。Q
?? 和 || 有什么区别？A
|| 对所有 falsy 值生效（0、""、null、undefined、NaN、false 都走默认值），?? 只对 null 和 undefined 生效。需要保留 0 和空字符串时用 ??。📖 小节
if...else if...else从上到下依次判断，第一个满足的执行后跳出- 三元运算符是
if...else的简写，适合简单赋值，不适合复杂逻辑 switch匹配固定值时比 if 更清晰，但别忘了写break- 6 个 falsy 值：
false、0、""、null、undefined、NaN "0"、[]、{}都是 truthy，别被"空"的外表骗了- 用
||设默认值时当心0和""，需要精确判断用??或显式比较
📝 作业
- 写一个程序：输入年份，判断是否是闰年（能被4整除但不能被100整除，或能被400整除）
- 写一个简易计算器：输入两个数字和运算符（+、-、*、/），用 switch 计算结果，除法要处理除数为0的情况
- 写一个 BMI 计算器：输入身高(m)和体重(kg)，计算 BMI 并给出评价（偏瘦/正常/偏胖/肥胖）
