JavaScript: JavaScript 条件语句
条件语句让程序有了"判断力"——根据不同情况走不同的路。没有条件语句，程序只能从上到下一条道走到黑；有了它，程序才能像人一样做选择。
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>
花括号里只有一条语句时可以省略花括号，但强烈不建议——加上花括号代码更清晰，也避免后续加语句时忘记补。
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。## 2. if...else 语句
二选一的情况：条件为真走 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>
▶ 示例：根据分数判断等级
HTML
<!DOCTYPE html>
<html>
<body>
<h2>分数等级判断</h2>
<input type="number" id="score" placeholder="输入分数(0-100)">
<button onclick="checkGrade()">判断等级</button>
<p id="result"></p>
<script>
function checkGrade() {
let score = Number(document.getElementById('score').value);
let grade = '';
let color = '';
if (score >= 90) {
grade = '优秀 🌟';
color = 'green';
} else if (score >= 80) {
grade = '良好 👍';
color = 'blue';
} else if (score >= 70) {
grade = '中等 😐';
color = 'orange';
} else if (score >= 60) {
grade = '及格 😅';
color = '#cc8800';
} else {
grade = '不及格 😢';
color = 'red';
}
document.getElementById('result').innerHTML =
`<span style="color:${color};font-size:24px">${score}分 - ${grade}</span>`;
}
</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 穿透的坑
HTML
<!DOCTYPE html>
<html>
<body>
<h2>switch 语句演示</h2>
<p id="output"></p>
<script>
let html = '<strong>有 break 的情况：</strong><br>';
let fruit = 'apple';
switch (fruit) {
case 'apple': html += '苹果<br>'; break;
case 'banana': html += '香蕉<br>'; break;
default: html += '未知水果<br>';
}
html += '<br><strong>没有 break 的情况（穿透）：</strong><br>';
let num = 2;
switch (num) {
case 1: html += '一<br>';
case 2: html += '二<br>';
case 3: html += '三<br>';
default: html += '默认<br>';
}
// 输出：二、三、默认 —— 从匹配的 case 开始一路执行到底
html += '<br><strong>合理利用穿透：</strong><br>';
let month = 2;
let season = '';
switch (month) {
case 3: case 4: case 5: season = '春季'; break;
case 6: case 7: case 8: season = '夏季'; break;
case 9: case 10: case 11: season = '秋季'; break;
case 12: case 1: case 2: season = '冬季'; break;
}
html += `${month}月是${season}`;
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
⚠️ 注意： 忘写 break 是 switch 最常见的 bug。但有时候"穿透"也能派上用场——比如多个值执行相同逻辑时，故意省略 break 让它们合并。
6. falsy 值
在条件判断中，以下值都会被视为 false（称为 falsy 值）：
| falsy 值 | 说明 |
|---|---|
false |
布尔假 |
0 |
数字零 |
"" 或 '' |
空字符串 |
null |
空值 |
undefined |
未定义 |
NaN |
非数字 |
其余所有值都是 truthy，包括 "0"（字符串零）、[]（空数组）、{}（空对象）——这些虽然"空"，但在条件判断中都是 true。
▶ 示例：falsy 值判断
HTML
<!DOCTYPE html>
<html>
<body>
<h2>falsy 值演示</h2>
<p id="output"></p>
<script>
let html = '<strong>falsy 值（条件判断为 false）：</strong><br>';
let falsy = [false, 0, "", null, undefined, NaN];
for (let val of falsy) {
let display = val === "" ? '""' : (val === undefined ? 'undefined' : val);
html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
}
html += '<br><strong>容易误判的 truthy 值：</strong><br>';
let tricky = ["0", [], {}, "false", -1];
for (let val of tricky) {
let display = Array.isArray(val) ? '[]' : (typeof val === 'object' ? '{}' : JSON.stringify(val));
html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
}
html += '<br><strong>实际应用：</strong><br>';
let name = '';
html += `名字: "${name}" → ${name || '未填写'}<br>`;
let count = 0;
html += `数量: ${count} → ${count || '无'} (注意0被当falsy了!)<br>`;
html += `正确写法: ${count !== undefined && count !== null ? count : '无'}`;
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
⚠️ 注意： 用
|| 设置默认值时要注意：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 并给出评价（偏瘦/正常/偏胖/肥胖）
