关于前端的碎碎念3-JavaScript基础5-JavaScript中的Switch语句

说完css装修，我们终于要给房子打造一些功能啦~follow me~

本节介绍Javasctipt中的Switch语句

当有很多种选项的时候，switch比if else更好的选择。

　　上一节我们已经看到，利用if else可以让程序具有基本的判断能力，而使用嵌套的if else则可以让程序对多种情况进行判断。但是当情况的种类比较多的时候，使用switch语句将更加合适。

一个使用switch的实例

　　结合我们需要实现如下的程序：输入一个学生的考试成绩，我们按照每十分一个登记将成绩分等，程序将根据成绩的等级做出不同的评价。

　　很明显，用if else可以实现这样的程序，但是代码会很复杂。而如果使用switch语句，代码则会简单一些，首先来看一下思路，再把它翻译成JavaScript。

　　思路：

将分数转化为特定等级以便于switch处理

判断分数属于哪种等级

根据分数等级做出评价：例如低于60给出挂科评价。

　　翻译成JavaScript就是如下代码(注意注释)：

<script type="text/JavaScript">
//首先，我们用score变量来存储分数，假设为65 
var score = 65;
//用分数除以10，parseInt的作用是把它转换为整数，
//暂时不用深究，()内最后的结果为6 
switch (parseInt(score / 10)) 
{
//switch开始实现判断过程，case6得到满足
 case 0:
 case 1:
 case 2:
 case 3:
 case 4:
 case 5:
//根据不同的等级做出不同的行为。
//冒号后面的语句就是行为
//case0到5的行为都是下面这个语句
 degree = "恭喜你，又挂了！";
 break;
 case 6:
 degree = "勉强及格"; break;
 case 7:
 degree = "凑合，凑合"
 break;
 case 8:
 degree = "8错，8错";
 break;
 case 9:
 case 10:
 degree = "高手高手，佩服佩服";
 }
 alert(degree)
 </script>

　　记得在每个case所执行的语句里添加上一个break语句。为了理解break的作用，我们来看看如果没有break会怎么样：

<script type="text/JavaScript">
 var score = 50;
 switch (parseInt(score / 10)) {
 case 0:
 case 1:
 case 2:
 case 3:
 case 4:
 case 5:
 degree = "恭喜你，又挂了！";
 case 6:
 degree = "勉强及格"; case 7:
 degree = "凑合，凑合"
 case 8:
 degree = "8错，8错";
 case 9:
 case 10:
 degree = "高手高手，佩服佩服";
 }//end of switch
 alert(degree)
 </script>

　　在上面的代码中，如果成绩是50分，那么score/10就是5，则case5后面的语句将会得到执行，同样，case6、7等等后面的语句都会得到执行。也就是说，我们会得到：”恭喜你，又挂了！勉强及格凑合，凑合8错，8错高手高手，佩服佩服“这样没有意义的评价。

　　这就是swtitch语句的执行逻辑，当发现某个case满足后，该switch中在该case后的所有语句都会得到执行。第一个例子中的break就是为了让switch”停下来“。

看一个使用switch的实例

JavaScript Switch语句例子

　　使用JavaScript的Switch语句判断成绩的等级。

使用switch的示例 

窗体顶端

　　成绩 

　　点击提交

窗体底端

JavaScript代码

<script type="text/JavaScript">
     function judge() {
     var score;//分数
     var degree;//分数等级
     score = document.getElementById("score").value;
     if (score > 100){
         degree = '耍我？100分满！';
         }
     else{
         switch (parseInt(score / 10)) {
             case 0:
             case 1:
             case 2:
             case 3:
             case 4:
             case 5:
             degree = "恭喜你，又挂了！";
             break;
             case 6:
             degree = "勉强及格";
             case 7:
             degree = "凑合，凑合"
             break;
             case 8:
             degree = "8错，8错";
             break;
             case 9:
             case 10:
             degree = "高手高手，佩服佩服";
         }//end of switch
     }//end of else
     alert(degree);
     }
 </script>

HTML代码

<form action="#" method="post">
     <p>
     <label for="score">成绩</label>
     <input name="score" id="score" type="text" />
     </p>
     <p>
     <button value="点击提交" onclick="judge()">点击提交</button>
     </p>
 </form>