Logo

郎哥编程

语句流程控制

2020-12-04 179

在一个程序执行的过程中,语句的执行顺序对程序的结果是有直接影响的。也就是说程序的流程对运行结果有直接的影响。

语句流程控制是用来控制程序中各条语句的执行顺序,它可以把语句组合成能完成一定功能的代码段。流程控制方式主要有:顺序结构、条件结构和循环结构。

1、  顺序结构

顺序结构是流程控制中最简单、也是最常用的结构,结构内的所有语句按顺序执行,只有上一条语句执行完成后,才执行下一条语句。

function add(){
   num1 = parseInt(document.getElementById("op1").value);
   num2 = parseInt(document.getElementById("op2").value);
   alert(sum(num1,num2));
}

add函数体内的语句就是顺序结构,函数从第一条语句开始执行,按顺序执行,直至最后一条语句。

在条件结构和循环结构中,也包含顺序结构。

2、 条件结构

在很多情况下,程序并不是按既定的顺序执行,而是根据不同请况进行判断,然后执行不同的操作,这种流程称为条件结构,也称为选择结构。

依据条件选择方式,条件结构又分为简单条件结构、多重条件结构、嵌套条件结构、switch结构。

简单条件结构

简单条件结构也称为if-else结构,语法如下:

if(条件表达式) {
  代码段1
}else {
  代码段2
}

if和else是JS关键字,条件表达式必须括在一对圆括号之内,表达式返回布尔值。代码段是一条或多条JS语句。如果条件表达式返回的值为真,则执行代码段1。如果条件表达式返回的值为假,则执行代码段2。

若代码段仅包含一条语句时,语句可以不使用大括号“{}”括起来。

若程序不需要处理条件表达式返回假值的情况,else部分可以省略。

例如:

if(条件表达式) {
  代码段1
}

上面的条件结构只处理条件表达式返回真值的情况。

多重条件结构

在一些情况下,需要检查多个条件,解决这种情况可用多重if、嵌套if或switch结构来解决。多重条件结构语法如下:

If(条件表达式1){
  代码段1;
} else if(条件表达式2){
  代码段2;
} else if(条件表达式3) {
  代码段3;
}
……
else {
 代码段n;
}

 多重条件结构是从上到下逐个对条件进行判断,一旦发现条件满足就执行与该条件相关的语句,并跳过其他的条件判断;若没有一个条件满足,则执行最后一个else后的语句块;如果没有最后的else语句,则不执行任何操作,执行该结构后面的语句。

若代码段仅包含一条语句时,语句可以不使用大括号“{}”括起来。

嵌套条件结构

嵌套条件结构是在if-else结构内插入另一个条件结构,嵌套条件结构主要用于只有当前提条件满足时,才判断后续条件是否满足。

嵌套条件结构语法如下:

if(条件表达式){
  if(条件表达式) {
   代码段;
}
else {
  代码段;
}
}
else {
  代码段;
}

3、  switch结构

switch结构也属于条件结构,switch结构的语法同if-else结构的语法不太相同,所以单独列出说明。

switch结构语法如下:

switch (表达式){
   case 常量表达式1:
      代码段1;
      break;
   case 常量表达式2:
      代码段2;
      break;
   case 常量表达式3:
      代码段3;
      break;
   ………
   default:
      代码段n;
}

其中,switch关键字后的表达式必须是一个整型表达式,即计算后其值为int类型,或可以转换为int的类型,如char等。case关键字后面的常量表达式要求是整型常量组成的表达式,通常是字符、数字等。

4、 循环结构

循环结构是程序中一种很重要的结构。其特点是,在给定条件成立时,重复执行某程序段,直到条件不成立为止。给定的条件成为循环条件,反复执行的程序段称为循环体。JavaScript语言提供了二种不同形式的循环结构,分别是for循环结构和while循环结构。

for循环结构

for循环不仅可以用于循环次数已经确定的情况,而且可以用于循环次数不确定而只给出循环条件的情况。

for循环结构语法如下:

for(表达式1; 表达式2; 表达式3;)
{
  代码段;
}

表达式1:通常用来给循环变量赋初值,一般是赋值表达式,也允许在for语句外给循环变量赋初值,此时可以省略该表达式;

表达式2:通常是循环条件,一般为关系表达式或逻辑表达式;

表达式3: 通常可用来修改循环变量的值,一般是赋值语句。

for循环中的这三部分必须用分号隔开,组成循环体的语句可以是单条语句或多条语句。

for循环结构的执行顺序是:

(1)首先计算表达式1的值,通常为循环变量赋初值;

(2)再计算表达式2的值,即判断循环条件是否为真,若值为真则执行循环体一次,否则跳出循环;

(3)再计算表达式3的值,这里通常写更新循环变量的赋值表达式,然后转回第二步重复执行。

在整个for循环过程中,表达式1只计算一次,表达式2和表达式3则可能计算多次。循环体可能执行多次,也可能一次都不执行。

另外,for循环结构的表达式1、表达式2、表达式3在一些情况可以省略,若表达式2省略,在循环体中需要有退出循环的语句,一般是break语句。

for/in循环

JavaScript还支持for/in循环结构,for/in循环结构是for循环结构的一个变种,语法如下:

for(variable in object) {
  代码段;
}

其中,variable是循环变量,in是JS关键字,object是对象,该结构用于遍历对象的属性。

while循环

while循环结构的语法是:

while( 条件表达式 ) {
  代码段;
}

其中,条件表达式是循环条件,代码段为循环体。while循环结构的执行流程:计算条件判断表达式的值,当值为真(非0)时,执行循环体语句,一旦条件为假,就停止执行循环体。如果条件在开始时就为假,则不执行循环体语句直接退出循环。

do while循环

do while循环结构的语法是:

do{
  代码段;
}while(条件);

do-while循环与while循环的不同在于:它先执行循环体中的语句,然后再判断条件是否为真。如果为真则继续循环,如果为假,则终止循环。因此,do-while循环至少要执行一次循环语句。

嵌套循环结构

for循环结构和while循环结构都支持嵌套循环,即在循环体内嵌入for或者while循环。

例如:

for(var i = 0; i<5;i++) {
  for(var j = 0;j<5;j++) {
    document.write(i*j);
    }
}

上面的案例代码就是嵌套循环,第一层for循环称为外循环,第二层for循环称为内循环。

首先外循环的第一轮触发内循环,内循环将一直执行到完成为止,然后,外循环的第二轮再次触发内循环,此过程不断重复直到外循环结束,使用嵌套循环时,只有在内循环完全结束后,外循环才会执行下一趟循环。

5、  break和continue语句

有时可能不知道循环将要执行的次数,终止循环的条件可在以后确定。所以需要提供一种机制在条件满足的时候跳出循环。有时候,我们需要根据条件跳过循环中的一些语句。JavaScript语言提供了break和continue两个关键字(也称为break语句和continue语句),用于改变程序的控制流。

break语句

break语句通常用在前面介绍过的switch结构和循环结构内。当break语句用于switch结构时,可使程序跳出switch结构而执行switch结构之后的语句;当break语句用于while、do-while、for循环结构时,可使程序终止循环而执行循环后面的语句。

例如:

function test() {
  var i = 0;
  while (i < 7) {
    i++;
    if (i == 5) {
      break;
    }
     document.write(i);
 }
}

 test()函数用于输出0至4的数。i为循环变量,初始值为0,while循环条件为i<7,在循环体内判断i是否等于5,若等于5就退出while循环。因此test()函数只输出0至4的数。

continue语句

continue语句只能用在循环里。continue语句的作用是跳过循环体中剩余的语句而准备执行下一次循环。对于while和do-while循环,continue执行之后的动作是条件判断;对于for循环,随后的动作是变量更新。

注意break语句和continue语句的差别。break语句导致循环终止,使程序控制流转向这个循环语句之后;而continue引起的则是循环内部的一次控制转移,使执行控制跳到循环体的最后,相当于跳过循环体里continue语句后面的那些语句,继续下一次循环。

例如:

function test() {
  var i;
  var sum = 0;
  for (i = 1; i <= 100; i++) {
     // 判断i的余数是否是3
    if (i % 10 == 3) {
     // 执行下一轮循环
     continue;
    }
    sum += i;
  }
  document.write(sum)
}

test()函数求整数1至100的累加值,但要求跳过所有个位为3的数。

函数使用for循环来求整数1至100的累加值,在for循环体内判断i除以10的余数是否等于3,如果是,则意味该数的个位数是3,这种情况下,将使用continue语句跳过后续语句,然后转向for循环的表达式3更新循环变量,继续下一次循环。

6、  案例代码

案例6:流程控制案例代码(案例代码见unit1\case6.html):

<html>
<head>
   <title>JavaScript开发案例</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  // 简单条件案例
  function condition_01(num){
     if( num > 100 ){
       document.getElementById("id_result").value = "condition_01函数:参数num大于100"
     }else{
       document.getElementById("id_result").value = "condition_01函数:参数num小于100"
     }
  }
       
  //多重条件案例
  function condition_02(num){
    if (num >= 90)
      document.getElementById("id_result").value = "condition_02函数:优"
    else if ((num >= 80) && (num < 90))
      document.getElementById("id_result").value = "condition_02函数:良"
    else if ((num >= 60) && (num < 80))
      document.getElementById("id_result").value = "condition_02函数:中"
    else
       document.getElementById("id_result").value = "condition_02函数:差"
   }
            
   //switch结构案例
   function condition_03(score){
     var grade;
     switch (parseInt(score / 10)) {
        case 10:
          grade = "A";
          break;
        case 9:
          grade = "B";
          break;
        case 8:
          grade = "C";
          break;
       case 7:
         grade = "D";
         break;
       case 6:
         grade = "E";
         break;
       default:
         grade = "F";
     }
        document.getElementById("id_result").value = "condition_03函数:" + grade;
   }
            
   //for循环结构案例,输出自然数的阶乘
   function loop_for(num){
      factorial = 1;
      for (var count = 1; count <= num; count++) {
        factorial = factorial * count;
      }
      document.getElementById("id_result").value = "loop_for函数:" + factorial;
   }
            
   //while循环结构案例,输出摄氏温度与华氏温度的对照表
   function loop_while(num){
     var count = 0;
     var c = 0;
     var f;
     var content = "";
     // 输出控制在10条以内
     while (c <= 250 && count < 10) {
       count++;
       content += "摄氏温度:" + count + "  "
       //计算华氏温度
      f = c * 9 / 5.0 + 32.0;
      content += "华氏温度:" + f + "  "
      c = c + 20;
    }
    document.getElementById("id_result").value = "loop_while函数:" + content;
   }
 
</script>
</head>
<body>
  <h3>JavaScript开发案例</h3>
  <hr>
  <form action="/login.jsp">
    <p>执行结果:<input type="text" id="id_result" size="60" value=""/></p>
    <p><input type="button" value="简单条件结构" onclick="condition_01(80)"/></p>
    <p><input type="button" value="多重条件结构" onclick="condition_02(96)"/></p>
    <p><input type="button" value="switch结构" onclick="condition_03(86)"/></p>
    <p><input type="button" value="for循环结构" onclick="loop_for(6)"/></p>
    <p><input type="button" value="while循环结构" onclick="loop_while()"/></p>
  </form>   
</boyd>
<html>

案例代码执行界面如下图所示:

007.png

代码在线纠错(通义千问 qwen-max)

支持粘贴多个代码文件,提交后由阿里云通义千问自动分析代码漏洞、语法错误、逻辑问题并给出修改建议。
您已解锁 AI 代码纠错功能,可正常使用!

评论区

登录 后发表评论
暂无评论