HTML前端开发：JavaScript的条分支语句if，Switch

一、 `if` 语句：灵活的条件分支

if 语句是最基础、最常用的条件判断语句。它评估一个条件（通常是一个结果为 true 或 false 的表达式），如果条件为真 (true)，则执行紧随其后的代码块；如果为假 (false)，则跳过该代码块。

1. 基本语法 (`if`)

javascript 复制代码

if (condition) {
  // 当 condition 为 true 时，执行这里的代码
}

condition: 放在圆括号 () 内的表达式。这个表达式会被求值，结果会被自动转换为布尔值 (true 或 false)。
{ ... }: 花括号 {} 包裹的代码块。这是当 condition 为 true 时要执行的语句集合。强烈建议即使只有一行代码也使用花括号，这能提高代码清晰度和避免潜在错误。

举个栗子 🌰：检查年龄是否成年

javascript 复制代码

let age = 20;

if (age >= 18) {
  console.log("恭喜！你已经是成年人了。"); // 因为 20 >= 18 是 true，所以这行会执行
}

2. `if...else`：二选一

当你想在条件为 true 时执行一个操作，为 false 时执行另一个 操作时，就用 else。

javascript 复制代码

if (condition) {
  // condition 为 true 时执行这里
} else {
  // condition 为 false 时执行这里
}

举个栗子 🌰：判断数字正负或零

javascript 复制代码

let number = -5;

if (number > 0) {
  console.log("这个数是正数。");
} else {
  console.log("这个数不是正数（它是零或负数）。"); // 因为 -5 > 0 是 false，所以执行 else 块
}

3. `if...else if...else`：多条件分支

当需要检查多个互斥的条件 时，使用 else if。它会按顺序从上到下检查每个条件，执行第一个为 true 的条件对应的代码块。最后的 else 是可选的，用于处理所有条件都不满足的情况。

javascript 复制代码

if (condition1) {
  // condition1 为 true 时执行
} else if (condition2) {
  // condition1 为 false 且 condition2 为 true 时执行
} else if (condition3) {
  // condition1 和 condition2 为 false 且 condition3 为 true 时执行
} else {
  // 前面所有条件都为 false 时执行 (可选)
}

举个栗子 🌰：成绩等级评定

javascript 复制代码

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); // 输出: 你的成绩等级是: B

if 语句的关键点：

灵活性高： 条件可以是任何复杂的逻辑表达式（使用 &&, ||, ! 等逻辑运算符组合）。
范围判断强： 非常适合判断值是否在某个范围内（如 score >= 80 && score < 90）。
顺序重要： 在 else if 链中，条件的顺序很关键。一旦某个条件满足，后面的 else if 和 else 都不会再检查。因此，通常把更具体或更可能满足的条件放在前面（或者根据逻辑需求排序）。
强制类型转换： condition 会被自动转换为布尔值。0, "", null, undefined, NaN 会转为 false (称为 falsy 值)，其他值转为 true (称为 truthy 值)。理解这一点非常重要！

二、 `switch` 语句：精确值匹配的分支

switch 语句用于基于一个表达式 的不同精确值 来执行不同的代码分支。它提供了一种比长串 if...else if 更清晰、更易读的方式来处理多个离散选项。

1. 基本语法

javascript 复制代码

switch (expression) {

  case value1:
    // 当 expression 的结果严格等于 (===) value1 时，执行这里的代码
    break; // 通常需要 break

  case 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. 举个栗子 🌰：根据星期几输出计划

javascript 复制代码

let dayOfWeek = "Wednesday"; // 假设今天是星期三
let plan;

switch (dayOfWeek) {
  case "Monday":
    plan = "开团队周会";
    break;
  case "Tuesday":
    plan = "写项目代码";
    break;
  case "Wednesday":
    plan = "Code Review 和 学习新技术"; // 匹配成功！plan 被赋值
    break; // 跳出 switch，防止执行后面的 case
  case "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。

javascript 复制代码

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 特性很方便。

决策流程图：

javascript 复制代码

开始
|
V
需要条件分支？ --> 是
|
V
分支基于什么？
|
+--> 基于范围、复杂逻辑？ ----------------> 使用 if/else if/else
|
+--> 基于单个变量的精确值匹配多个选项？ --> 使用 switch/case (加 break!)
|
V
结束

总结

if: 你的万能瑞士军刀，处理各种条件判断（真假、范围、组合逻辑），灵活但处理多个精确匹配时可能稍显冗长。
switch: 处理单个变量 匹配多个精确值 时的利器，结构清晰，可读性好，但要注意 break 和严格相等比较。

HTML前端开发：JavaScript的条分支语句if，Switch

一、 if 语句：灵活的条件分支

1. 基本语法 (if)

2. if...else：二选一

3. if...else if...else：多条件分支

二、 switch 语句：精确值匹配的分支

1. 基本语法

2. 举个栗子 🌰：根据星期几输出计划

3. switch 语句的关键点

三、 if vs switch：如何选择？

总结

一、 `if` 语句：灵活的条件分支

1. 基本语法 (`if`)

2. `if...else`：二选一

3. `if...else if...else`：多条件分支

二、 `switch` 语句：精确值匹配的分支

3. `switch` 语句的关键点

三、 `if` vs `switch`：如何选择？