前端switch用法介绍

一、基本概念

switch是一种流程控制语句，用于在多个选择中执行不同的操作。在前端中，switch通常用于处理用户输入或状态，根据不同的值进行不同的处理。switch语句由一个表达式和多个选择分支组成。

switch(expression) {
  case value1:
    // 当expression等于value1时执行代码
    break;
  case value2:
    // 当expression等于value2时执行代码
    break;
  default:
    // 当expression不等于value1或value2时执行代码
    break;
}



二、使用场景
switch语句更适用于多个等值判断的场景，而不是连续的比较。以下是switch语句适用的几种场景：
1、处理用户输入： 通过switch语句处理用户输入，根据不同的输入进行不同的响应。
var input = prompt("请输入您的名字：");
switch(input) {
  case "张三":
    alert("你好，张三！");
    break;
  case "李四":
    alert("你好，李四！");
    break;
  default:
    alert("你好，陌生人！");
    break;
}

2、状态处理： 根据不同的状态执行不同的操作，比如页面加载完成后的不同处理。
document.addEventListener('DOMContentLoaded', function() {
  switch(document.readyState) {
    case 'loading':
      console.log('页面正在加载中...');
      break;
    case 'interactive':
      console.log('页面已经加载完成，正在解析中...');
      break;
    case 'complete':
      console.log('页面加载解析完成');
      break;
  }
});

3、处理枚举类型： 根据不同的枚举值进行不同的操作。
const MEDIA_TYPE = {
  VIDEO: 'video',
  AUDIO: 'audio',
  IMAGE: 'image'
}
function handleMedia(type) {
  switch(type) {
    case MEDIA_TYPE.VIDEO:
      console.log('处理视频文件');
      break;
    case MEDIA_TYPE.AUDIO:
      console.log('处理音频文件');
      break;
    case MEDIA_TYPE.IMAGE:
      console.log('处理图片文件');
      break;
    default:
      console.log('无法处理该文件类型');
      break;
  }
}
handleMedia(MEDIA_TYPE.IMAGE);


三、switch的注意事项
1、不要忘记break语句： 每个分支都要以break语句结束，否则会继续执行下一条分支。
var fruit = "apple";
switch(fruit) {
  case "apple":
    console.log("I love apple");
    break;
  case "banana":
    console.log("I love banana");
  case "pear":
    console.log("I love pear");
    break;
}
// 输出结果：
// I love apple
// I love pear

2、可以有多个分支执行同一段代码： 如果多个分支需要执行相同的代码，可以省略break语句。
var day = 4;
switch(day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log("工作日");
    break;
  case 6:
  case 7:
    console.log("周末");
    break;
  default:
    console.log("输入有误");
    break;
}
// 输出结果：
// 工作日

3、表达式可以是任意类型： switch语句的表达式可以是字符串、数字、变量、函数等类型，但不支持对象。
var num = 3;
var str = "3";
switch(num) {
  case 3:
    console.log("num为数字3");
    break;
  case "3":
    console.log("num为字符串'3'");
    break;
}
switch(str) {
  case 3:
    console.log("str为数字3");
    break;
  case "3":
    console.log("str为字符串'3'");
    break;
}
// 输出结果：
// num为数字3
// str为字符串'3'


四、结语
总的来说，switch语句是一种强大的流程控制语句，在前端开发中应用广泛。通过对switch语句的学习，不仅能提高代码的可读性和可维护性，还能在实际开发中提高工作效率。