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

2017-08-13 本文已影响758人极客江南

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