关于前端的碎碎念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>
- 点赞
- 收藏
- 关注作者
评论(0)