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，则退出循环，否则继续下一次循环。

上一章目录下一章