网页设计实战之JavaScript(4) -- 流程控制(if then else switch, while, do while, for,break)

在一个程序执行的过程中，执行顺序影响程序的结果。通过控制代码的执行顺序来实现需要的功能。

流程控制主要有三种结构：分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

一、顺序结构

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码在程序中的位置先后顺序，依次执行，上行程序执行完了，再执行下一行。跟人看书类似，从上往下看。程序中大多数的代码都是这样执行的。

var a=0;
var b=1;
var c=2;
a=b+c;
a=b*c;
a=a+b;

二、分支结构(if else)

在程序执行过程中，遇到不同的条件，需要执行不同的代码，这时需要程序分支，走不同的路线；如人一样，这条路不通畅，就走另一条路。

1、if else分支

if(表达式1){
　　//表达式1为真时执行的代码
}else if (表达式2){
　　//表达式2为真时执行的代码
}else {
　　//当表达式1&&表达式2为假时执行的代码
}

还可以在分支中再嵌套分支：

if(表达式1){
　if(表达式11){
　　//表达式11为真时执行的代码
　}else if (表达式22){
　　//表达式2为真时执行的代码
　}
}else if (表达式2){
　//表达式2为真时执行的代码
}

var grade = prompt("请输入成绩");
if(grade >= 90 && grade <=100){
  if(grade ==100){ // 条件嵌套  
  		console.log("满分");
  }
  else{  
  		console.log("成绩优秀");
  }
}else if(grade >=80 && grade <90){
    console.log("成绩良好");
}else if(grade >=60 && grade <80){
    console.log("成绩合格");
}else if(grade >=0 && grade <60){
    console.log("成绩不合格");
}else {
    console.log("输入异常");
}

2、switch分支结构

switch 语句用于基于不同的条件来执行不同的动作。也就是说，用于测试一个表达时的值，并根据测试结果选择执行相应的分支程序，从而实现分支控制。
switch语句由一个选择表达式和多个case标签组成，case标签后进阶一段代码块。

switch 分支也可以嵌套别的分支，嵌套层数没有限制。

switch(表达式 n){
　　　case con1:// 分支1
　　　　　break; // 分支结束的标志。
　　　case con2:// 分支2
　　　　　break; // 分支结束的标志。
…
　　　case conn:// 分支n
　　　　　break; // 分支结束的标志。
　　　default: // 上述条件都不满足时。
　　　　　break;
｝

• switch语句的选择表达式的数据类型只能是整型或者是字符串，不能是boolean型，通常这个控制表达式是一个变量名称；
• switch语句后的花括号是必须有的；
• case语句的个数没有规定，可无限增加，但case标签和其后面的值之间应该有一个空格，之后面必须有一个冒号；
• switch语句匹配完成后，将依次逐条执行匹配的分支模块中的语句，知道switch结构结束或遇到break才停止执行。
• default标签后直接跟一个冒号，而后写当所有case值都不匹配时要执行的代码【default语句可省略】

var a=10;
switch(a){
    case 1:  
    	console.log("分支1");
    	break;
    case "1": 
       console.log("分支2");
        break;
    case 2:
        console.log("分支3");
        break;
    default:
         console.log("默认分支");
}

三、循环结构

为了做重复的工作，如果写同样的代码，太冗余，就需要循环结构来简省代码量。
循环结构有：for循环；while循环；do while循环

（一）、for循环

主要用来控制循环语句的执行。
适用于明确知道重复执行次数的情况，即for语句将循环次数的变量在for语句中预先定义好。

1、 语法结构

由分号（；）分割成三部分即：循环变量初始化；条件表达式；循环变量自增/自减；

for(循环初始条件; 循环条件; 循环一次后执行语句)
{
;// 循环中的动作。
｝

初始化：一个赋值语句，用来循环控制变量赋初值；
条件表达式：一个关系表达式，决定什么时候退出循环；
循环变量（++/ --）：增量定义循环控制变量，每循环一次后按什么方式变化。

2. for语句代码的运行

第一次进入for循环时，对循环控制变量赋初值；
根据判断条件的结果决定是否要继续循环，若判断条件为真，则继续执行循环；若为假，则结束循环执行下面的语句。
注：步骤1（第一次）赋初值是的运行，不做++/ --的操作，执行完循环体内的语句后，系统会根据循环控制变量增/减方式，更改循环控制变量的值，再回到步骤2重新判断是否继续执行循环。

for(var i=1;i<10;i++){
	console.log("执行:i="+i );
｝

(二）、while循环

设定一个布尔型条件，当条件为真时，不断执行一个语句块，直到条件为假。

1. 语法结构：

while (表达式){
//当表达式为真时执行的代码
}；

2. while循环实际的运行：

• 计算表达式的值，判断其true/false；
• 为false，while将结束，执行while之后的语句；
• 为true，执行while语句花括号中的代码块，然后返回第一条执行。

var a=10;
while(a>=0)
{
	console.log("执行：a="+a);
	a--;
}

（三）、 do while循环

do while循环与while循环非常相似，区别在于do while循环表达式的值是在每一次循环结束后检查，do while循环语句必定会执行一次。

1 、 语法结构：

do{
/当表达式为真时，要执行的代码/
} while(/表达式/);

2 、do while循环实际的运行：

• 先执行一遍do {……}花括号中的代码块；
• 然后计算表达式的值，判断其true/false；
• 为false，循环将结束，执行do while之后的语句；
• 为true，返回执行do{……}花括号中的代码块。

var a=10;
do 
{
	console.log("执行：a="+a);
} while(a>10); // 只执行一次。

（四）、 循环的控制语句

1、break语句

中止循环执行。跳出循环。

for(var i=0;i<=36;i++){
    if(i==20){
        console.log(`跳出循环：i=`+i);
        break ; 
    }
}

还可以跳出指定的层：

loop_layer1:
for(var i=0;i<=36;i++){
	for(var j=0;j<=36;j++){
	    if(i+j==20){
	        console.log(`跳出循环：i=`+i);
	        break loop_layer1;  // 跳到最外层。
	    }
    ｝
}

2、continue语句

继续循环执行。循环体中continue后的语句不执行。

for (var i=0;i<=10;i++) {
   if (i%2==0) 
   ｛
   		continue;  // 偶数值不输出
   	｝
   console.log(i);   // 3,5,7,9
}