HTML前端开发：JavaScript的条分支语句if，Switch
一、 if 语句：灵活的条件分支
if 语句是最基础、最常用的条件判断语句。它评估一个条件（通常是一个结果为 true 或 false 的表达式），如果条件为真 (true)，则执行紧随其后的代码块；如果为假 (false)，则跳过该代码块。
1. 基本语法 (if)
if (condition) {// 当 condition 为 true 时，执行这里的代码
}-
condition: 放在圆括号()内的表达式。这个表达式会被求值，结果会被自动转换为布尔值 (true或false)。 -
{ ... }: 花括号{}包裹的代码块。这是当condition为true时要执行的语句集合。强烈建议即使只有一行代码也使用花括号，这能提高代码清晰度和避免潜在错误。
举个栗子 🌰：检查年龄是否成年
let age = 20;if (age >= 18) {console.log("恭喜！你已经是成年人了。"); // 因为 20 >= 18 是 true，所以这行会执行
}
2. if...else：二选一
当你想在条件为 true 时执行一个操作，为 false 时执行另一个操作时，就用 else。
if (condition) {// condition 为 true 时执行这里
} else {// condition 为 false 时执行这里
}
举个栗子 🌰：判断数字正负或零
let number = -5;if (number > 0) {console.log("这个数是正数。");
} else {console.log("这个数不是正数（它是零或负数）。"); // 因为 -5 > 0 是 false，所以执行 else 块
}3. if...else if...else：多条件分支
当需要检查多个互斥的条件时，使用 else if。它会按顺序从上到下检查每个条件，执行第一个为 true 的条件对应的代码块。最后的 else 是可选的，用于处理所有条件都不满足的情况。
if (condition1) {// condition1 为 true 时执行
} else if (condition2) {// condition1 为 false 且 condition2 为 true 时执行
} else if (condition3) {// condition1 和 condition2 为 false 且 condition3 为 true 时执行
} else {// 前面所有条件都为 false 时执行 (可选)
}
举个栗子 🌰：成绩等级评定
let score = 85;
let grade;if (score >= 90) {grade = 'A';
} else if (score >= 80) { // 注意：因为第一个条件 (>=90) 不满足，才会检查这里grade = 'B'; // 85 >= 80 为 true，所以 grade 被赋值为 'B'
} else if (score >= 70) {grade = 'C';
} else if (score >= 60) {grade = 'D';
} else {grade = 'F';
}console.log("你的成绩等级是:", grade); // 输出: 你的成绩等级是: Bif 语句的关键点：
-
灵活性高： 条件可以是任何复杂的逻辑表达式（使用
&&,||,!等逻辑运算符组合）。 -
范围判断强： 非常适合判断值是否在某个范围内（如
score >= 80 && score < 90）。 -
顺序重要： 在
else if链中，条件的顺序很关键。一旦某个条件满足，后面的else if和else都不会再检查。因此，通常把更具体或更可能满足的条件放在前面（或者根据逻辑需求排序）。 -
强制类型转换：
condition会被自动转换为布尔值。0,"",null,undefined,NaN会转为false(称为 falsy 值)，其他值转为true(称为 truthy 值)。理解这一点非常重要！
二、 switch 语句：精确值匹配的分支
switch 语句用于基于一个表达式的不同精确值来执行不同的代码分支。它提供了一种比长串 if...else if 更清晰、更易读的方式来处理多个离散选项。
1. 基本语法
switch (expression) {case value1:// 当 expression 的结果严格等于 (===) value1 时，执行这里的代码break; // 通常需要 breakcase value2:// 当 expression 的结果严格等于 (===) value2 时，执行这里的代码break;...default:// 如果 expression 的值不等于上面任何一个 case 的值，执行这里的代码 (可选)break;// 虽然 default 的 break 不是必须的（因为它通常是最后一个），但加上是好习惯}-
expression: 一个表达式（通常是一个变量），它的值会与各个case的值进行比较。 -
case valueX::case关键字后跟一个具体的值（可以是数字、字符串、变量、常量等）。expression的值会与这个valueX进行严格相等比较 (===)。 -
break;: 极其重要！ 它用于跳出整个switch语句。如果某个case匹配成功且没有break，代码会继续执行下一个case里的语句（无论下一个case的值是否匹配），直到遇到break或switch结束。这被称为 "fallthrough" (贯穿)。大多数情况下你需要break来避免贯穿。 -
default:: 可选的。它就像一个兜底的else。如果没有任何case匹配expression的值，则执行default里的代码。虽然default可以放在任何位置，但通常放在最后。
2. 举个栗子 🌰：根据星期几输出计划
let dayOfWeek = "Wednesday"; // 假设今天是星期三
let plan;switch (dayOfWeek) {case "Monday":plan = "开团队周会";break;case "Tuesday":plan = "写项目代码";break;case "Wednesday":plan = "Code Review 和 学习新技术"; // 匹配成功！plan 被赋值break; // 跳出 switch，防止执行后面的 casecase "Thursday":plan = "修复 Bug";break;case "Friday":plan = "准备周报和 Demo";break;default: // 如果 dayOfWeek 不是周一到周五plan = "周末啦，休息或自由安排！";// 这里的 break 可以省略，因为是最后，但加上更清晰break;
}console.log("今天的计划是:", plan); // 输出: 今天的计划是: Code Review 和 学习新技术3. switch 语句的关键点
-
精确匹配： 使用 严格相等 (
===) 进行比较。这意味着1(数字) 不等于"1"(字符串)。 -
break至关重要： 忘记break是switch语句中最常见的错误之一，会导致意外的逻辑贯穿。除非你明确需要利用贯穿效果（比如多个case共享同一段代码），否则每个case后面都应该有break。 -
利用贯穿 (Fallthrough)： 有时有意让多个
case执行同一段代码。这时可以省略中间case的break。
let fruit = "Orange";
let message;switch (fruit) {case "Orange":case "Mandarin": // Orange 或 Mandarin 都会触发下一行case "Tangerine":message = "这是个柑橘类水果！";break; // 执行完共享代码后跳出case "Apple":message = "这是个苹果！";break;default:message = "我不认识这种水果。";break;
}console.log(message); // 输出: 这是个柑橘类水果！-
default是好习惯： 即使你认为所有情况都覆盖了，加上default处理意外值也是防御性编程的好习惯。 -
适合离散值： 最适合处理一组明确的、离散的值（如枚举、状态码、特定字符串/数字）。
三、 if vs switch：如何选择？
理解它们的特点，就能在合适的地方用合适的工具：
| 特性 | if 语句 | switch 语句 |
|---|---|---|
| 核心比较方式 | 基于条件表达式 (true/false) | 基于单个表达式的值严格相等 (===) 匹配 |
| 条件类型 | 非常灵活：范围判断、复杂逻辑组合 | 相对固定：主要针对离散的、精确的单个值 |
| 可读性 | 简单条件时清晰；长串 else if 时可能稍乱 | 多个精确值匹配时非常清晰、结构整齐 |
| 贯穿行为 | 无 (if/else if 互斥) | 有 (case 后需 break 阻止，也可利用) |
| 典型场景 | 范围判断 (age > 18)、布尔组合、非精确匹配 | 枚举值匹配 (星期、月份、状态码、特定选项) |
简单选择指南：
-
你需要判断一个值是否在某个范围内？ (如
score > 90) -> 用if。 -
你的条件依赖于多个复杂逻辑的组合？ (如
isLoggedIn && (role === 'admin' || role === 'editor')) -> 用if。 -
你需要根据一个变量或表达式的精确值，从多个（通常是 3 个或更多）固定选项中选择一个执行路径？ (如根据
dayOfWeek的值执行不同操作) -> 用switch通常更清晰。 -
只有一两个分支？ ->
if(或if...else) 通常更简洁。 -
需要多个不同的值触发相同的操作？ ->
switch的 fallthrough 特性很方便。
决策流程图：
开始
|
V
需要条件分支？ --> 是
|
V
分支基于什么？
|
+--> 基于范围、复杂逻辑？ ----------------> 使用 if/else if/else
|
+--> 基于单个变量的精确值匹配多个选项？ --> 使用 switch/case (加 break!)
|
V
结束总结
-
if: 你的万能瑞士军刀，处理各种条件判断（真假、范围、组合逻辑），灵活但处理多个精确匹配时可能稍显冗长。 -
switch: 处理单个变量匹配多个精确值时的利器，结构清晰，可读性好，但要注意break和严格相等比较。