JavaScript switch 语句

switch 语句的概念

switch 语句是一种条件语句，用于根据不同的情况执行不同的代码块。它可以替代多个 if...else if 语句，使代码更加简洁易读。

switch 语句的基本语法

switch (expression) {
  case value1:
    // 当 expression 等于 value1 时执行的代码
    break;
  case value2:
    // 当 expression 等于 value2 时执行的代码
    break;
  // 更多 case
  default:
  // 当 expression 不等于任何 case 值时执行的代码
}

语法说明：

• expression：要评估的表达式
• case value：当表达式的值等于 value 时，执行对应的代码块
• break：跳出 switch 语句，防止执行下一个 case
• default：当表达式的值不等于任何 case 值时，执行的代码块（可选）

switch 语句的示例

1. 基本用法

let day = new Date().getDay();
let dayName;

switch (day) {
  case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  default:
    dayName = "Unknown";
}

console.log("Today is " + dayName);

2. 没有 break 语句

如果没有 break 语句，执行完当前 case 后会继续执行下一个 case（穿透）：

let grade = "B";
let message;

switch (grade) {
  case "A":
  case "B":
    message = "Good job!";
    break;
  case "C":
    message = "Passed.";
    break;
  case "D":
  case "F":
    message = "Failed.";
    break;
  default:
    message = "Invalid grade.";
}

console.log(message); // 输出: Good job!

3. 使用字符串

let fruit = "apple";
let color;

switch (fruit) {
  case "apple":
    color = "red";
    break;
  case "banana":
    color = "yellow";
    break;
  case "orange":
    color = "orange";
    break;
  default:
    color = "unknown";
}

console.log("The color of " + fruit + " is " + color);
// 输出: The color of apple is red

4. 使用表达式作为 case 值

let num = 5;
let result;

switch (true) {
  case num > 0:
    result = "Positive";
    break;
  case num < 0:
    result = "Negative";
    break;
  default:
    result = "Zero";
}

console.log("The number is " + result); // 输出: The number is Positive

switch 语句的比较规则

switch 语句使用严格相等运算符（===）进行比较，这意味着值和类型都必须相等：

let value = "5";

switch (value) {
  case 5:
    console.log("Number 5");
    break;
  case "5":
    console.log('String "5"');
    break;
  default:
    console.log("Other");
}

// 输出: String "5"

switch 语句的最佳实践

1. 始终使用 break 语句

除非需要穿透行为，否则始终在每个 case 后使用 break 语句：

// 好的做法
switch (day) {
  case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  // 其他 case
}

// 不好的做法（除非需要穿透）
switch (day) {
  case 0:
    dayName = "Sunday";
  case 1:
    dayName = "Monday";
  // 其他 case
}

2. 使用 default 语句

始终添加 default 语句，以处理意外情况：

// 好的做法
switch (fruit) {
  case "apple":
    color = "red";
    break;
  case "banana":
    color = "yellow";
    break;
  default:
    color = "unknown";
}

// 不好的做法
switch (fruit) {
  case "apple":
    color = "red";
    break;
  case "banana":
    color = "yellow";
    break;
}

3. 保持 case 值简单

case 值应该简单明了，避免复杂的表达式：

// 好的做法
switch (grade) {
  case "A":
  case "B":
    message = "Good job!";
    break;
  // 其他 case
}

// 不好的做法
switch (true) {
  case grade === "A" || grade === "B":
    message = "Good job!";
    break;
  // 其他 case
}

4. 分组相关的 case

将相关的 case 分组在一起，利用穿透行为：

// 好的做法
switch (grade) {
  case "A":
  case "B":
    message = "Good job!";
    break;
  case "C":
    message = "Passed.";
    break;
  case "D":
  case "F":
    message = "Failed.";
    break;
  default:
    message = "Invalid grade.";
}

// 不好的做法
switch (grade) {
  case "A":
    message = "Good job!";
    break;
  case "B":
    message = "Good job!";
    break;
  case "C":
    message = "Passed.";
    break;
  case "D":
    message = "Failed.";
    break;
  case "F":
    message = "Failed.";
    break;
  default:
    message = "Invalid grade.";
}

5. 避免使用 switch 语句的复杂情况

对于复杂的条件逻辑，考虑使用其他方法，如对象映射：

// 好的做法：使用对象映射
const dayMap = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};

let day = new Date().getDay();
let dayName = dayMap[day] || "Unknown";
console.log("Today is " + dayName);

// 不好的做法：过于复杂的 switch 语句
switch (day) {
  case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  // 其他 case
}

switch 语句与 if...else if 语句的比较

1. 当条件较少时，使用 if...else if 语句

// 好的做法：条件较少
if (grade === "A") {
  message = "Excellent!";
} else if (grade === "B") {
  message = "Good job!";
} else {
  message = "Keep trying!";
}

2. 当条件较多时，使用 switch 语句

// 好的做法：条件较多
switch (grade) {
  case "A+":
  case "A":
    message = "Excellent!";
    break;
  case "B+":
  case "B":
    message = "Good job!";
    break;
  case "C+":
  case "C":
    message = "Passed.";
    break;
  case "D":
    message = "Needs improvement.";
    break;
  case "F":
    message = "Failed.";
    break;
  default:
    message = "Invalid grade.";
}

switch 语句的常见错误

1. 忘记使用 break 语句

// 错误：忘记使用 break 语句，会导致穿透
switch (day) {
  case 0:
    dayName = "Sunday";
  case 1:
    dayName = "Monday";
    break;
  // 其他 case
}

// 当 day 为 0 时，dayName 会被设置为 'Monday'

2. 使用赋值运算符而不是比较

// 错误：使用了赋值运算符 = 而不是比较
switch ((day = 1)) {
  case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  // 其他 case
}

// day 会被赋值为 1，然后与 case 值比较

3. 忽略严格相等比较

// 错误：忽略了严格相等比较，字符串 '5' 不会匹配数字 5
let value = "5";

switch (value) {
  case 5:
    console.log("Number 5");
    break;
  default:
    console.log("Other");
}

// 输出: Other

4. 过于复杂的 switch 语句

// 错误：过于复杂的 switch 语句
switch (true) {
  case age >= 18 && hasLicense:
    message = "Can drive";
    break;
  case age >= 16 && hasLearnersPermit:
    message = "Can drive with supervision";
    break;
  case age < 16:
    message = "Cannot drive";
    break;
  default:
    message = "Unknown";
}

// 更好的做法：使用 if...else if 语句
if (age >= 18 && hasLicense) {
  message = "Can drive";
} else if (age >= 16 && hasLearnersPermit) {
  message = "Can drive with supervision";
} else if (age < 16) {
  message = "Cannot drive";
} else {
  message = "Unknown";
}

小结

switch 语句是 JavaScript 中一种用于多条件判断的语句，它可以替代多个 if...else if 语句，使代码更加简洁易读。switch 语句使用严格相等运算符（===）进行比较，因此值和类型都必须相等。在使用 switch 语句时，应该遵循最佳实践，如始终使用 break 语句、添加 default 语句、保持 case 值简单等，以提高代码的可读性和可维护性。