3.3 流程控制语句
视频讲解：光盘\TM\lx\3\07流程控制语句．mp4
流程控制语句对于任何一门编程语言都是至关重要的，JavaScript也不例外。在JavaScript中提供了if条件判断语句、switch多分支语句、for循环语句、while循环语句、do…while循环语句、break语句和continue语句7种流程控制语句。
3.3.1 if条件判断语句
if条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值执行相应的处理。if语句的语法格式如下：
if(expression){
statement 1
}else{
statement 2
}
参数说明：
expression：必选项。用于指定条件表达式，可以使用逻辑运算符。
statement 1：用于指定要执行的语句序列。当expression的值为true时，执行该语句序列。
statement 2：用于指定要执行的语句序列。当expression的值为false时，执行该语句序列。
if...else条件判断语句的执行流程如图3.4所示。
图3.4 if...else条件判断语句的执行流程
说明
上述if语句是典型的二路分支结构。其中else部分可以省略，而且statement1为单一语句时，其两边的大括号也可以省略。
例如，下面3段代码的执行结果是一样的，都可以计算2月份的天数。
if语句是一种使用很灵活的语句，除了可以使用if...else的形式外，还可以使用if...else if的形式。if...else if语句的语法格式如下：
if (expression 1){
statement 1
}else if(expression 2){
statement 2
}
…
else if(expression n){
statement n
}else{
statement n+1
}
if...else if语句的执行流程如图3.5所示。
图3.5 if...else if语句的执行流程
【例3.18】应用if语句验证用户登录信息。（实例位置：光盘\TM\sl\3\2）
（1）在页面中添加用户登录表单及表单元素。具体代码如下：
<form name="form1" method="post" action="">
用户名：<input name="user" type="text" id="user">
密码：<input name="pwd" type="text" id="pwd">
<input name="Button" type="button" class="btn_grey" value="登录">
<input name="Submit2" type="reset" class="btn_grey" value="重置">
</form>
（2）编写自定义的JavaScript函数check()，用if语句验证登录信息是否为空。check()函数的具体代码如下：
<script language="javascript">
function check(){
if(form1.user.value==""){ //判断用户名是否为空
alert("请输入用户名！"); form1.user.focus(); return;
}else if(form1.pwd.value==""){ //判断密码是否为空
alert("请输入密码！"); form1.pwd.focus(); return;
}else{
form1.submit(); //提交表单
}
}
</script>
（3）在“登录”按钮的onclick事件中调用check()函数。具体代码如下：
<input name="Button" type="button" class="btn_grey" value="登录" onclick="check()">
图3.6 运行结果
运行程序，单击“登录”按钮，将显示如图3.6所示的提示对话框。
说明
同Java语言一样，JavaScript的if语句也可以嵌套使用。由于JavaScript中if语句的嵌套方式同Java语言基本相同，在此不再赘述。
3.3.2 switch多分支语句
switch是典型的多路分支语句，其作用与嵌套使用if语句基本相同。switch语句比if语句更具有可读性，而且允许在找不到一个匹配条件的情况下执行一组默认的语句。switch语句的语法格式如下：
switch (expression){
case judgement 1：
statement 1;
break;
case judgement 2：
statement 2;
break;
…
case judgement n：
statement n;
break;
default：
statement n+1;
break;
}
参数说明：
expression：任意的表达式或变量。
judgement：任意的常数表达式。当expression的值与某个judgement的值相等时，就执行此case后的statement语句；如果expression的值与所有judgement的值都不相等，则执行default后面的statement语句。
break：用于结束switch语句，从而使JavaScript只执行匹配的分支。如果没有break语句，则该switch语句的所有分支都将被执行，switch语句也就失去了使用的意义。
switch语句的执行流程如图3.7所示。
图3.7 switch语句的执行流程
【例3.19】应用switch语句输出今天是星期几。（实例位置：光盘\TM\sl\3\3）
关键代码如下：
<script language="javascript">
var now=new Date(); //获取系统日期
var day=now.getDay(); //获取星期
var week;
switch (day){
case 1：
week="星期一";
break;
case 2：
week="星期二";
break;
case 3：
week="星期三";
break;
case 4：
week="星期四";
break;
case 5：
week="星期五";
break;
case 6：
week="星期六";
break;
default：
week="星期日";
break;
}
document.write("今天是"+week); //输出中文的星期
</script>
程序的运行结果如图3.8所示。
图3.8 实例运行结果
技巧
在程序开发的过程中，使用if语句还是使用switch语句，可以根据实际情况而定。尽量做到物尽其用，不要因为switch语句的效率高，就一味地使用；也不要因为if语句常用，就懒得应用switch语句。要根据实际情况，具体问题具体分析，使用最适合的条件语句。一般情况下，对于判断条件较少的可以使用if条件语句，但是在实现一些多条件的判断中，就应该使用switch语句。
3.3.3 for循环语句
for循环语句也称为计次循环语句，一般用于循环次数已知的情况，在JavaScript中应用比较广泛。for循环语句的语法格式如下：
for(initialize; test; increment){
statement
}
参数说明：
initialize：初始化语句，用来对循环变量进行初始化赋值。
test：循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量超过了该边限，则停止该循环语句的执行。
increment：用来指定循环变量的步幅。
statement：用来指定循环体，在循环条件的结果为true时，重复执行。
说明
for循环语句执行的过程是：先执行初始化语句，然后判断循环条件，如果循环条件的结果为true，则执行一次循环体，否则直接退出循环。然后执行迭代语句，改变循环变量的值。至此，完成一次循环。接下来，将进行下一次循环，直到循环条件的结果为false，才结束循环。
for循环语句的执行流程如图3.9所示。
图3.9 for循环语句的执行流程
说明
在for语句中可以使用break语句来中止循环语句的执行，关于break语句的用法参见3.3.6节。
为了使读者更好地理解for语句，下面将以一个具体的实例介绍for语句的应用。
【例3.20】计算100以内所有奇数的和。（实例位置：光盘\TM\sl\3\4）
关键代码如下：
程序运行结果如图3.10所示。
图3.10 运行结果
说明
在使用for语句时，一定要保证循环可以正常结束，也就是必须保证循环条件的结果存在为true的情况。否则，循环体将无休止地执行下去，从而形成死循环。例如，下面的循环语句就会造成死循环，原因是i永远大于等于1。
for(i=1; i>=1; i++){
alert(i);
}
3.3.4 while循环语句
while循环语句也称为前测试循环语句，它是利用一个条件来控制是否要继续重复执行这个语句。while循环语句与for循环语句相比，无论是语法还是执行的流程，都较为简明易懂。while循环语句的语法格式如下：
while(expression){
statement
}
参数说明：
expression：一个包含比较运算符的条件表达式，用来指定循环条件。
statement：用来指定循环体，在循环条件的结果为true时，重复执行。
说明
while循环语句之所以命名为前测试循环，是因为它要先判断此循环的条件是否成立，然后再进行重复执行的操作。也就是说，while循环语句执行的过程是先判断条件表达式，如果条件表达式的值为true，则执行循环体，并且在循环体执行完毕后，进入下一次循环，否则退出循环。
while循环语句的执行流程如图3.11所示。
图3.11 while循环语句的执行流程
注意
在使用while语句时，也一定要保证循环可以正常结束，即必须保证条件表达式的值存在为true的情况，否则将形成死循环。例如，下面的循环语句就会造成死循环，原因是i永远都小于100。
var i=1;
while(i<=100){
alert(i); //输出i的值
}
while循环语句经常用于循环执行的次数不确定的情况下。
【例3.21】列举出累加和不大于10的所有自然数。（实例位置：光盘\TM\sl\3\5）
关键代码如下：
<script language="javascript">
var i=1; //由于是计算自然数，所以i的初始值设置为1
var sum=i;
var result="";
document.write("累加和不大于10的所有自然数为：<br>");
while(sum<10){
sum=sum+i; //累加i的值
document.write(i+'<br>'); //输出符合条件的自然数
i++; //该语句一定不要少
}
</script>
程序运行结果如图3.12所示。
图3.12 列举累加和不大于10的所有自然数
3.3.5 do…while循环语句
do…while循环语句也称为后测试循环语句，它也是利用一个条件来控制是否要继续重复执行这个语句。与while循环不同的是，它先执行一次循环语句，然后再去判断是否继续执行。do…while循环语句的语法格式如下：
do{
statement
} while(expression);
参数说明：
statement：用来指定循环体，循环开始时先被执行一次，然后在循环条件的结果为true时，重复执行。
expression：一个包含比较运算符的条件表达式，用来指定循环条件。
说明
do…while循环语句执行的过程是：先执行一次循环体，然后再判断条件表达式，如果条件表达式的值为true，则继续执行，否则退出循环。也就是说，do…while循环语句中的循环体至少被执行一次。
do…while循环语句的执行流程如图3.13所示。
图3.13 do…while循环语句的执行流程
do…while循环语句同while循环语句类似，也常用于循环执行的次数不确定的情况下。
【例3.22】应用do…while循环语句列举出累加和不大于10的所有自然数。（实例位置：光盘\TM\sl\3\6）
关键代码如下：
<script language="javascript">
var sum=0;
var i=1; //由于是计算自然数，所以i的初始值设置为1
document.write("累加和不大于10的所有自然数为：<br>");
do{
sum=sum+i; //累加i的值
document.write(i+'<br>'); //输出符合条件的自然数
i++; //该语句一定不要少
}while(sum<10);
</script>
程序运行结果如图3.14所示。
图3.14 累加和不大于10的所有自然数
3.3.6 break与continue语句
break语句与continue语句都可以用于跳出循环，但两者也存在着一些区别。下面将详细介绍这两个关键字的用法。
break语句
break语句用于退出包含在最内层的循环或者退出一个switch语句。break语句的语法格式如下：
break;
说明
break语句通常用在for、while、do…while或switch语句中。
【例3.23】在for语句中通过break语句中断循环。代码如下：
var sum=0;
for ( i=0; i<100; i++ ) {
sum+=i;
if (sum>10)break; //如果sum>10，就会立即跳出循环
}
document.write("0至"+i+"(包括"+i+")之间自然数的累加和为："+sum);
运行结果为：“0至5（包括5）之间自然数的累加和为：15”。
continue语句
continue语句和break语句类似，所不同的是，continue语句用于中止本次循环，直接开始下一次循环。其语法格式如下：
continue;
说明
continue语句只能应用在while、for、do… while和switch语句中。
【例3.24】在for语句中通过continue语句计算金额大于等于1000的数据的和。代码如下：
var total=0;
var sum=new Array(1000,1200,100,600,736,1107,1205); //声明一个一维数组
for ( i=0; i<sum.length; i++ ) {
if (sum[i]<1000)continue; //不计算金额小于1000的数据
total+=sum[i];
}
document.write("累加和为："+total); //输出计算结果
运行结果为：“累加和为：4512”。
说明
当使用continue语句中止本次循环后，如果循环条件的结果为false，则退出循环，否则继续下一次循环。