
3.3 流程控制语句
流程控制语句对于任何一门编程语言都是至关重要的,JavaScript也不例外。在JavaScript中提供了if条件判断语句、switch多分支语句、for循环语句、while循环语句、do…while循环语句、break语句和continue语句7种流程控制语句。
3.3.1 if条件语句
if条件判断语句是最基本、最常用的流程控制语句,可以根据条件表达式的值执行相应的处理。if语句的语法格式如下:

参数说明:
expression:必选项。用于指定条件表达式,可以使用逻辑运算符。
statement 1:用于指定要执行的语句序列。当expression的值为true时,执行该语句序列。
statement 2:用于指定要执行的语句序列。当expression的值为false时,执行该语句序列。
if...else条件判断语句的执行流程如图3.4所示。

图3.4 if...else条件判断语句的执行流程
说明
上述if语句是典型的二路分支结构。其中else部分可以省略,而且statement 1为单一语句时,其两边的大括号也可以省略。
例如,下面的3段代码的执行结果是一样的,都可以计算2月份的天数。

if语句是一种使用很灵活的语句,除了可以使用if...else语句的形式,还可以使用if...else if语句的形式。if...else if语句的语法格式如下:

if...else if语句的执行流程如图3.5所示。

图3.5 if...else if语句的执行流程
【例3.18】 应用if语句验证用户登录信息。(实例位置:资源包\TM\sl\3\2)
(1)在页面中添加用户登录表单及表单元素。具体代码如下:

(2)编写自定义的JavaScript函数check(),用于通过if语句验证登录信息是否为空。check()函数的具体代码如下:

(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:任意的表达式或变量。
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)

程序的运行结果如图3.8所示。

图3.8 实例运行结果
技巧
在程序开发的过程中,使用if语句还是使用switch语句可以根据实际情况而定,尽量做到物尽其用,不要因为switch语句的效率高就一味地使用,也不要因为if语句常用就不应用switch语句。要根据实际情况,具体问题具体分析,使用最适合的条件语句。一般情况下对于判断条件较少的可以使用if条件语句,但是在实现一些多条件的判断中,就应该使用switch语句。
3.3.3 for循环语句
for循环语句也称为计次循环语句,一般用于循环次数已知的情况,在JavaScript中应用比较广泛。for循环语句的语法格式如下:

参数说明:
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。

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。

while循环语句经常用于循环执行的次数不确定的情况下。
【例3.21】 列举出累加和不大于10的所有自然数。(实例位置:资源包\TM\sl\3\5)

程序运行结果如图3.12所示。

图3.12 应用while循环语句累加和不大于10的所有自然数
3.3.5 do…while循环语句
do…while循环语句也称为后测试循环语句,它也是利用一个条件来控制是否要继续重复执行这个语句。与while循环所不同的是,它先执行一次循环语句,然后再去判断是否继续执行。do…while循环语句的语法格式如下:

参数说明:
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)

程序运行结果如图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语句中断循环的代码如下:

运行结果为:“0至5(包括5)之间自然数的累加和为:15”。
continue语句
continue语句和break语句类似,所不同的是,continue语句用于中止本次循环,并开始下一次循环。其语法格式如下:
continue;
说明
continue语句只能应用在while、for、do…while和switch语句中。
【例3.24】 在for语句中通过continue语句计算金额大于等于1000的数据的和的代码如下:

运行结果为:“累加和为:4512”。
说明
当使用continue语句中止本次循环后,如果循环条件的结果为false,则退出循环,否则继续下一次循环。