JavaScript: switch语句、break\case !

简介: JavaScript: switch语句、break\case !

switch语句

switch语句是另外一种JavaScript的条件分支语句,相比于if,在某些情况下,switch语句更加简洁、可读。

基本语法加实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="week" id="week"></div>
    <script>
    var day = new Date().getDay();
    var week =document.getElementById("week");
    console.log(week);
    switch (day){
      case 0:
      week.innerHTML="星期日"
      break;
      case 1:
      week.innerHTML="星期1"
      break;
      case 2:
      week.innerHTML="星期2"
      break;
      case 3:
      week.innerHTML="星期3"
      break;
      case 4:
      week.innerHTML="星期4"
      break;
      case 5:
      week.innerHTML="星期5"
      break;
      case 6:
      week.innerHTML="星期6"
      break;
    }
    </script>
  </body>
</html>

switch语句由一个条件语句,至少一个case代码块和一个可选的default语句。

以上代码是自动获取当前星期的js代码

以上案例对初学者可能有些复杂,就以if为例,以上switch语句等同于:

var value = exp;
if(value === 'val1'){
  //代码块1
}else if(value === 'val2'){
  //代码块2
}else if(...){
  //...
}else{
  //相当于default
}

二者的对比可以发现,switch语句相较于if更加简洁。

break的用途

switch语句中,break语句占有非常重要的地位,通常情况下,每个case代码段末尾都应该添加一个break语句。

如果不添加break,在执行完一个case后,不会跳出switch语句,而是继续执行下一个case代码块,这是switch的重要特性。

举个例子:

var num = 6;
switch( num ){
    case 3:
        alert(num);
        break;
    case 5:
        alert(num);
        break;
    case 6:
        alert(num);
        break;
    case 7:
    alert(num);
    break;
    default:
        alert(num);
        break;
}

以上代码只会执行case 6这种情况,也就是先弹出一个6,随后遇到break结束switch语句的执行。

如果不写break,就会执行case 6以及case 6后面的所有case,直到遇见break语句结束执行。

switch的表达式

if一样,任何表达式都可以成为switch的判断条件。

var num = '3';
var val = 7;
switch( num * 2){
  case val - 1:
    alert(val - 1);
    break;
  case val - 2:
    alert(val - 2);
    break;
  case val - 3:
    alert(val - 3);
    break;
  default:
    alert("?");
    break;
}

这里num * 2返回6,等于 val - 1,就会弹出6

case分组

上面的例子都是一个case对应一个代码块,我们还可以使用多个case指向同一个代码块。

举个栗子:

var num = prompt("输入一个数字");
switch( num % 3){
  case 0:
    alert("3的倍数");
    break;
  case 1:
  case 2:
    alert("不是3的倍数");
}

num % 3的值包括012三种情况,当为0的时候表示num3的倍数,其他情况不是3的倍数。

如果我们输入的数不是3的倍数,那么num % 3的结果不论1还是2都会执行相同的代码块。

这种case分组的能力实际上是去掉break的副作用,在上例中,正是由于case 1没有break语句,导致1、 2两种情况执行同样的操作。

类型必须相同

switch的比较机制是严格相等,所以必须保持表达式和case中的内容类型相同。

举个栗子:

var num = prompt("请输入一个数字",3);
switch( num ){
  case '1':
    alert(num);
    break;
  case '2':
    alert(num);
    break;
  case 3:
    alert(num);
    break;
}

以上代码中case 3永远不会执行,这是因为prompt只能返回字符串类型的值,而case 3是数字类型,所以永远不能匹配。

课后练习

理解以下代码进行练习

<script>
    var score;
    score = +(window.prompt("请输入个人成绩0~100"));
    var lever =parseInt(score/10);
    if(score>100 || score<0){
      alert("成绩不得大于100小于0")
    }else if(isNaN(score)){
      alert("请输入正确成绩w")
    }else{
      switch (lever){
        case 10:
        case 9:
        alert("成绩优秀")
        break;
        case 8:
        alert("成绩优良")
        break;
        case 7:
        case 6:
        alter("成绩合格")
        break;
        default:
        alert("成绩不合格")
      }
    }


目录
相关文章
|
2月前
|
JavaScript 前端开发
javascript中的switch用法
javascript中的switch用法
|
1月前
|
JavaScript
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
|
4月前
|
JavaScript 前端开发
|
4月前
|
JavaScript 前端开发
【JavaScript保姆级教程】switch分支与while循环
【JavaScript保姆级教程】switch分支与while循环
【JavaScript保姆级教程】switch分支与while循环
|
10月前
|
JavaScript 前端开发
Javascript用数据替换if或switch的解决方案
Javascript用数据替换if或switch的解决方案
55 0
|
5月前
|
JavaScript 前端开发
JavaScript基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。
JavaScript基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。
30 0
|
10月前
|
JavaScript 前端开发
JavaScript switch 语句
JavaScript switch 语句
|
JavaScript 前端开发
JavaScript Switch 语句
JavaScript Switch 语句
68 0
|
前端开发
前端知识案例21-javascript基础语法-switch
前端知识案例21-javascript基础语法-switch
38 0
前端知识案例21-javascript基础语法-switch
|
前端开发
前端知识案例25-javascript基础语法-break和continue
前端知识案例25-javascript基础语法-break和continue
34 0
前端知识案例25-javascript基础语法-break和continue