10-JavaScript基础-流程控制-Switch

Switch基本概念

• Switch和if一样都属于选择结构, 都会对给定的条件进行判断，再根据判断结果来决定执行哪一段代码。

Switch基本格式

switch(条件表达式){
  case 表达式:
      语句1;
      break;
  case 表达式:
      语句2; 
      break;
  case 表达式n:
      语句n;
      break;
  default:
      语句n+1;
      break;
}

• 其语义是:

  • 计算条件表达式的值。 并逐个与case后面表达式的结果值比较
  • 当条件表达式的值与某个表达式的值全等时, 执行其后的语句,并且不会再与其它case进行比较
  • 如条件表达式的值与所有case后的表达式均不相同时,则执行default后的语句。

• 示例

    var num = 2;
    switch(num){
        case 1:
            console.log("壹");
            break;
        case 2:
            console.log("贰"); // 输出贰
            break;
        case 3:
            console.log("叁");
            break;
        default:
            console.log("非法数字");
            break;
    }

Switch注意事项

• case全等于问题

  • JavaScript中case判断是否相等时是全等于(===),而不是等于(==),也就是说既会判断类型是否相等又会判断值是否相等

    var str = "123";
    switch (str){
        case 123:
            console.log("123数字");
            break;
        case "123":
            console.log("123字符串"); // 输出123字符串
            break;
        default:
            console.log("default");
            break;
    }
    

  • case后可以是常量也可以是变量

    var num = 120;
    switch (120){
        case num: // 这里可以是变量
            console.log("120"); // 输出120
            break;
        case 110: // 这里可以是常量
            console.log("110");
            break;
        default:
            console.log("default");
            break;
    }
    

• 表达式判断问题

  • 判断时会先计算表达式的值,再判断

  switch (120 + 3){ // 计算后为123
      case 120:
          console.log("120");
          break;
      case 3:
          console.log("3");
          break;
      case 3 + 120: // 计算后为123
          console.log("3 + 120"); // 输出3 + 120
          break;
      default:
          console.log("default");
          break;
  }
  

• case的穿透问题

  • switch里面的case只要匹配一次其它的都会失效，包括default.
  • 在case语句最后增加 break 语句,使每一次执行之后均可跳出switch语句,从而避免输出不应有的结果

    var num = 2;
    switch(num){
        case 1:
            console.log("壹");
        case 2:
            console.log("贰"); // 输出贰
        case 3:
            console.log("叁");// 输出叁
        default:
            console.log("非法数字");  // 输出非法数字
    }
    

• default的位置问题

  • default可以省略

    switch(2){
        case 1:
            console.log("壹");
            break;
        case 2:
            console.log("贰");
            break;
    }
    

  • default语句可以写在switch语句中的任意位置

    switch(3){
        case 1:
            console.log("壹");
            break;
        default: // 无论写在哪, 都只会在所有case不匹配才执行
            console.log("非法数字~~");
            break;
        case 2:
            console.log("贰");
            break;
    }
    

if语句和switch语句转换

 要求用户输入一个分数，根据输入的分数输出对应的等级
   A 90～100
   B 80～89
   C 70～79
   D 60～69
   E 0～59

• 利用if实现

    //    1.定义变量保存用户输入的分数
    var score;
    //    2.提接收用户输入的学生的分数
    score = +(window.prompt("请输入一个0～100的分数\n"));
    //    3.判断用户输入的分数输出对应的等级
    if (score >= 90 && score <= 100) {
        alert("A");
    }else if (score >= 80 && score <= 89) {
        alert("B");
    }else if (score >= 70 && score <= 79) {
        alert("C");
    }else if (score >= 60 && score <= 69) {
        alert("D");
    }else if (score >= 0 && score <= 59) {
        alert("E");
    }else{
        alert("少喝点三鹿");
    }

• 利用switch实现

    //    1.定义变量保存用户输入的分数
    var score;
    //    2.提接收用户输入的学生的分数
    score = +(window.prompt("请输入一个0～100的分数\n"));
    //    3.判断用户输入的分数输出对应的等级
    // 100/10 = 10, 99/10 = 9.9
    console.log(score / 10);
    console.log(parseInt(score / 10));
    switch (score/10) {
        case 10: // 利用case的穿透简化代码
        case 9:
            alert("A");
            break;
        case 8:
            alert("B");
            break;
        case 7:
            alert("D");
            break;
        case 6:
            alert("C");
            break;
        default:
            alert("E");
            break;
    }

if语句和switch语句选择

• 分支比较多且无法穷尽时最好用 if, 其它情况可以按照个人习惯

• 如果数据量不是很大, 并且数据是固定的可以用Switch

• 理论上Switch的效率比if高

• 示例Switch弊端

  • 判断用户输入的数是否大于100
  • if实现

    //    1.定义变量保存用户输入的分数
    var score;
    //    2.提接收用户输入的学生的分数
    score = +(window.prompt("请输入一个0～100的分数\n"));
    //    3.判断用户输入的数是否大于100
    if (a > 100) {
        console.log("大于");;
    }
    

  • switch实现

    // 挺(T)萌(M)的(D)搞不定啊
    switch (101) {
        case 101:
        case 102:
        case 103:
        case 104:
        case 105:
            console.log("大于\n");
            break;
        default:
            console.log("小于\n");
            break;
    }
    

Switch练习

• 从键盘输入一个月份,输出对应季节 12~2 冬季 3~5 春季 6~ 8 夏季 9~11 秋季(用switch)

    //    1.定义变量保存用户输入的数据
    var month;
    //    2.利用window.prompt()接收用户输入数据
    month = +(window.prompt("请输入一个1-12的月份"));
    //    3.数据安全校验
    if(isNaN(month)){
        alert("火星SB?");
    }else{
//    4.根据输入的数据判断输出对应的月份即可
        switch (month){
            case 1:
            case 2:
            case 12:
                alert("冬季");
                break;
            case 3:
            case 4:
            case 5:
                alert("春季");
                break;
            case 6:
            case 7:
            case 8:
                alert("夏季");
                break;
            case 9:
            case 10:
            case 11:
                alert("秋季");
                break;
            default:
                alert("你是SB么?");
                break;
        }
    }

• 使用Switch实现简单的计算器

    // 1.定义变量保存用户输入
    var num1,num2,op,result;
    // 2.接收用户输入
    num1 = +(window.prompt("请输入第一个数字"));
    op = window.prompt("请输入运算符: + - * /");
    num2 = +(window.prompt("请输入第二个数字:"));
    // 3.根据用户输入计算结果
    switch (op) {
        case "+":
            result = num1+num2;
            break;
        case "-":
            result = num1-num2;
            break;
        case "*":
            result = num1*num2;
            break;
        case "/":
            result = num1/num2;
            break;
        default:
            alert("更多功能请使用付费版本");
            break;
    }
    // 4.输出结果
    alert("计算结果:" + result);

学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038