JavaScript switch 语句详解

前言

每次总觉得学会了 switch

用到的时候又不太自信

这次再来好好复习一下。

正文

switch

• case（条件/分支）：如果表达式（expression）等于后面的值（value），则执行下面的语句。
• break跳出switch语句。没有break（连续匹配多个条件），继续匹配下一个条件。
• default 关键字定义在任何条件都不匹配时执行的语句。前面执行的case后面没有break也会执行default。
• switch语句可以用于所有数据类型，条件的值不需要是常量，也可以是变量或表达式。
• 能够在条件判断中使用表达式，就可以在判断中加入更多逻辑。
• switch语句在比较每个条件的值时会使用全等操作符，因此不会强制转换数据类型（比如，字符串“10”不等于数值10）。

continue，break，return

continue

• 立即退出循环，但会再次从循环顶部开始执行。
• 跳出本次循环，执行下一次循环。

break

• 立即退出循环，强制执行循环后的下一条语句。
• 使程序终止循环，执行后面的语句，常与if，switch一起使用。
• 数组方法 forEach() 不能使用break ，报错 Uncaught SyntaxError: Illegal break statement。
  • forEach()不支持使用 break 语句来提前终止循环。这是因为 forEach() 的设计初衷是为了简化数组的遍历操作，并且其回调函数并没有返回值控制整个迭代过程。

return

• 将指定值/表达式带到调用函数的位置。
• 终止当前函数的执行。
• 有输出，调用函数就可以接收返回值。

示例：表单序列化

function serialize(form){
  let parts=[];//存储字段
  let optValue;//存储字段值
  for(let field of form.elements){//遍历所有字段
    //switch语句在比较每个条件的值时会使用全等操作符，因此不会强制转换数据类型（比如，字符串“10”不等于数值10）。
    switch(field.type){//根据字段类型
      case "select-one"://单选框
      //没有break（连续匹配多个条件），继续匹配下一个条件。单选框或者多选框的选项
      case "select-multiple"://多选框
        if(field.name.length){//存在字段名
          for(let option of field.options){//遍历所有选项
            if(option.selected){//选中
              // 修复：正确检查 value 属性是否存在
              if(option.hasAttribute && option.hasAttribute("value")){//DOM合规的浏览器
                optValue = option.value;
              } else if(option.attributes && option.attributes["value"] && option.attributes["value"].specified){//IE8及以下
                optValue = option.value;
              } else {
                optValue = option.text;
              }
              parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
            }
          }
        }
        break;//跳出switch 使程序终止循环，执行后面的语句，常与if，switch一起使用。 
      case undefined: //字段集 <fieldset>没有type属性 type属性是undefined 不必纳入序列化
      case "file"://文件上传
      case "reset"://重置
      case "submit"://提交
      case "button"://按钮
        break;
      case "radio"://单选框
      case "checkbox"://复选框
        if (!field.checked) {
          break;
        }
      default://default 关键字定义在任何条件都不匹配时执行的语句。前面执行的case后面没有break也会执行default。
        if(field.name.length){//忽略没有name属性的元素
          parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
        }
    }
  }
  return parts.join("&");
}

通义灵码的回答

1. switch 语句基本语法

switch(expression) {
  case value1:
    // 当 expression === value1 时执行的代码
    break;
  case value2:
    // 当 expression === value2 时执行的代码
    break;
  default:
    // 当没有匹配项时执行的代码
}

2. switch 语句的特点

• 严格相等比较：使用 === 进行比较，不进行类型转换
• fall-through 行为：如果没有 break 语句，会继续执行下面的 case
• default 分支：当没有匹配的 case 时执行

3. 实际代码分析

switch(field.type){
  case "select-one":
  case "select-multiple":
    // 处理选择框
    break;
    
  case undefined:
  case "file":
  case "reset":
  case "submit":
  case "button":
    // 这些类型的字段不需要处理，直接break
    break;
    
  case "radio":
  case "checkbox":
    // 处理单选框和复选框
    if (!field.checked) {
      break; // 未选中则跳出
    }
    // 继续执行 default 分支的代码
    
  default:
    // 处理普通文本字段等
}

4. 关键特性说明

fall-through（贯穿）行为

case "select-one":
case "select-multiple":
  // 两个case共享同一段代码
  // 当field.type等于"select-one"或"select-multiple"时都会执行这里

break 语句的重要性

case "button":
  break; // 如果没有break，会继续执行下面的case代码

default 分支

default:
  // 当没有任何case匹配时执行
  // 注意：如果前面的case没有break，也会执行到这里

5. switch vs if-else

6. 最佳实践

1. 不要忘记 break 语句
2. 合理使用 fall-through 特性
3. 考虑使用 default 分支处理异常情况
4. 对于复杂条件，if-else 可能更合适

在您的表单序列化代码中，switch 语句非常适合用来根据字段类型执行不同的处理逻辑，使得代码结构清晰且易于维护。