JavaScript流程控制语句
通过本文内容,掌握控制语句的执行顺序。因为 JavaScript 程序中的语句一般按出现的顺序执行,有时这样执行不能满足我们的需要,因此大多数编程语言都提供了流程控制语句,控制代码的顺序。
if 语句
if 语句是基于条件成立才执行相应代码时使用的语句。
语法:
if(条件) { 条件成立时执行代码}
注意:if 小写,大写字母(IF)会出错!
假设你应聘 web 前端技术开发岗位,如果你会 HTML 技术,你面试成功,欢迎加入公司。代码表示如下:
var mycarrer = "HTML"; if (mycarrer == "HTML"){ document.write("你面试成功,欢迎加入公司。"); }
if…else 语句
if…else 语句是在指定的条件成立时执行代码,在条件不成立时执行 else 后的代码。
语法:
if(条件) { 条件成立时执行的代码} else {条件不成立时执行的代码}
假设你应聘 web 前端技术开发岗位,如果你会 HTML 技术,你面试成功,欢迎加入公司,否则你面试不成功,不能加入公司。
代码表示如下:
var mycarrer = "HTML"; //mycarrer 变量存储技能 if (mycarrer == "HTML") { document.write("你面试成功,欢迎加入公司。");} else //否则,技能不是 HTML { document.write("你面试不成功,不能加入公司。");}
if..else 嵌套语句
要在多组语句中选择一组来执行,使用 if..else 嵌套语句。
语法:
if(条件 1) { 条件 1 成立时执行的代码} else if(条件 2) { 条件 2 成立时执行的代码} ... else if(条件 n) { 条件 n 成立时执行的代码} else { 条件 1、2 至 n 不成立时执行的代码}
假设数学考试,小明考了 86 分,给他做个评价,60 分以下的不及格,60(包含 60 分)-75 分为良好,75(包含 75 分)-85 分为很好,85(包含 85 分)-100 优秀。
var myscore = 86; if(myscore < 60){ document.write("成绩不合格,加油了!") }else if(myscore < 75){ document.write("成绩良好,不错啊") }else if(myscore < 85){ document.write("成绩很好,很棒") }else{ document.write("成绩优秀,超级棒棒") }
Switch 语句
当有很多种选项的时候,switch 比 if else 使用更方便。
语法:
switch(表达式) { case 值 1: 执行代码块 1 break; case 值 2: 执行代码块 2 break; ... case 值 n: 执行代码块 n break; default: 与 case 值 1 、 case 值 2...case 值 n 不同时执行的代码 }
语法说明:
Switch 必须赋初始值,值与每个 case 值匹配。满足执行该 case 后的所有语句,并用 break 语句来阻止运行下一个 case。如所有 case 值都不匹配,执行 default 后的语句。
假设评价学生的考试成绩,10 分满分制,我们按照每一分一个等级将成绩分等,并根据成绩的等级做出不同的评价。
代码如下:
执行结果:
评语: 及格,加油!
注意:记得在 case 所执行的语句后添加上一个 break 语句。否则就直接继续执行下面的 case 中的语句,看以下代码:
执行结果:
评语: 继续努力! 评语: 及格,加油! 评语: 凑合,奋进 评语: 很棒,很棒 评语: 高手,大牛
在上面的代码中,没有 break 停止语句,如果成绩是 4 分,则 case 5 后面的语句将会得到执行,同样,case6、7-10 后面的语句都会得到执行。
for 循环
很多事情不只是做一次,要重复做。如打印 10 份试卷,每次打印一份,重复这个动作,直到打印完成。这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码。
for 语句结构:
for(初始化变量;循环条件;循环迭代) { 循环语句 }
假如,一个盒子里有 6 个球,我们每次取一个,重复从盒中取出球,直到球取完为止。
var num=1; for (num=1;num<=6;num++) //初始化值;循环条件;循环后条件值更新 { document.write("取出第"+num+"个球<br />"); }
实现思路:
while 循环
和 for 循环有相同功能的还有 while 循环, while 循环重复执行一段代码,直到某个条件不再满足。
while 语句结构:
while(判断条件) { 循环语句 }
使用 while 循环,完成从盒子里取球的动作,每次取一个,共 6 个球。
var num=0; //初始化值 while (num<=6) //条件判断 { document.write("取出第"+num+"个球<br />"); num=num+1; //条件值更新 }
Do…while 循环
do while 结构的基本原理和 while 结构是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件,如果条件为真,继续循环。
do…while 语句结构:
do { 循环语句 } while(判断条件)
我们试着输出 5 个数字。
num= 1; do { document.write("数值为:" + num+"<br />"); num++; //更新条件 } while (num<=5)
执行结果:
为什么呢?我们来看下执行思路:
退出循环 break
在 while、for、do…while、while 循环中使用 break 语句退出当前循环,直接执行后面的代码。
格式如下:
for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) {break;} 循环代码 }
当遇到特殊情况的时候,循环就会立即结束。看看下面的例子,输出 10 个数,如果数值为 5,就停止输出。
var num; for(num = 1; num <= 10; num++){ if(num == 5){ break;//如果是 5,退出循环 } document.write("数值:" + num + "<br/>"); }
执行效果:
注:当 num=5 的时候循环就会结束,不会输出后面循环的内容。
继续循环 continue
continue 的作用是仅仅跳过本次循环,而整个循环体继续执行。
语句结构:
for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) { continue; } 循环代码 }
上面的循环中,当特殊情况发生的时候,本次循环将被跳过,而后续的循环则不会受到影响。好比输出 10 个数字,如果数字为 5 就不输出了。
var num; for(num = 1; num <= 10; num++){ if(num == 5){ continue;//如果是 5,退出循环 } document.write("数值:" + num + "<br/>"); }
效果展示:
注:上面的代码中,num=5 的那次循环将被跳过。
编程练习
在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用 JavaScript 的知识挑出其中所有是大一的女生的的名字哦。
学生信息如下:
(‘小 A’,’女’,21,’大一’), (‘小 B’,’男’,23,’大三’),
(‘小 C’,’男’,24,’大四’), (‘小 D’,’女’,21,’大一’),
(‘小 E’,’女’,22,’大四’), (‘小 F’,’男’,21,’大一’),
(‘小 G’,’女’,22,’大二’), (‘小 H’,’女’,20,’大三’),
(‘小 I’,’女’,20,’大一’), (‘小 J’,’男’,20,’大三’)
第一种方法:
var infos = [ ['小 A','女',21,'大一'], ['小 B','男',23,'大三'], ['小 C','男',24,'大四'], ['小 C','男',24,'大四'], ['小 D','女',21,'大一'], ['小 E','女',22,'大四'], ['小 F','男',21,'大一'], ['小 G','女',22,'大二'], ['小 H','女',20,'大三'], ['小 I','女',20,'大一'], ['小 J','男',20,'大三'] ]; //进行筛选 for(var i = 0; i < infos.length; i++) { if(infos[i][3] === "大一" && infos[i][1] === "女") { document.write(infos[i][0] + "<br />"); } }
第二种方法:第一次筛选,找出都是大一的信息;第二次筛选,找出都是女生的信息
//第一步把之前的数据写成一个数组的形式,定义变量为 infos var infos = [ ['小 A','女',21,'大一'], ['小 B','男',23,'大三'], ['小 C','男',24,'大四'], ['小 C','男',24,'大四'], ['小 D','女',21,'大一'], ['小 E','女',22,'大四'], ['小 F','男',21,'大一'], ['小 G','女',22,'大二'], ['小 H','女',20,'大三'], ['小 I','女',20,'大一'], ['小 J','男',20,'大三'] ]; var arr=new Array(); var n=0; for(var i=0;i<infos.length;i++){ if(infos[i][3]=='大一'){ document.write(infos[i]+"<br />"); //第一次筛选,找出都是大一的信息 arr[n]=infos[i]; n++; } } document.write("<br>"+"第二次筛选:"+"<br>"); for(var n=0;n<arr.length;n++){ if(arr[n][1]=='女'){ document.write(arr[n][0]+"<br/>");//第二次筛选,找出都是女生的信息 } }
最终获得结果都是一样的。
码云笔记 » JavaScript流程控制语句