JavaScript——流程控制

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/actionActivity/article/details/89789726

流程控制语句

在 JS 中，程序是从上往下一行一行执行的，通过流程控制语句可以控制程序的执行流程，使程序可以根据一定的条件来选择执行。

流程控制语句分为三大类

1. 条件判断语句
2. 条件分支语句
3. 循环语句

条件判断语句

使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立，则执行语句，如果条件不成则不执行语句。

语法 1

// 第一种语法
if(条件表达式){
	语句1;	
}

语法1的执行流程
if 语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为 true，则会执行 if 后的语句1 ，如果条件表达式的值为 false，则不会执行 if 后的语句。

var a = 20;  //如果 a 的值为 20 则会进入判断，输出结果.

if(a > 10){
	// 条件判断(如果 a 的值比 10 大,则输出结果.)
	alert("a 比 10 大..");
}

运行结果

注意：

1. if 语句只能控制紧随其后的那个语句，如果希望if语句控制多条语句，可以将语句统一放到代码块中。
2. if 语句后的{}不是必须的，但是在开发中尽量写上 {} ，即使if 语句后边就有一行语句。

语法 2

if(条件表达式){
	语句1
}else{
	语句2
}

语法 2 的执行流程
当该语句执行的时候，会先对条件表达式进行判断，如果条件成立则执行语句1，如果条件不成立则执行语句2.

var a = 5;
if(a > 10){
	alert("a 比 10 大..");
}else{
	alert("a 比 10 小..");
}

运行结果

语法 3

if(条件表达式){
	语句....	
}else if(条件表达式){
	语句....	
}else if(条件表达式){
	语句....	
}else{	
	语句....	
}

语法 3 的执行流程
当该语句执行时，会从上到下依次对条件表达式进行判断，如果值为 true ，则执行当前语句，如果值为 false，则继续向下判断。如果所有的条件都不满足，则执行最后的 else 语句后的内容。

**注意：**该语句中，只会有一个代码块执行，一旦代码块执行了，则直接结束语句。

var score = 70;  //定义一个变量，存放成绩

if(score == 100){
	alert("哇~ 100 分耶,好棒!!");
}else if(score > 90){
	alert("虽然这次没有满分，但是也很棒!");
}else if(score > 60){
	alert("成绩不是很理想呢!");
}else{
	alert("还要加油哦~");
}

条件分支语句

条件分支语句也叫 switch...case 语句

switch(条件表达式){
	case 表达式:
		语句...
		break;
	case 表达式:
		语句...
		break;
	case 表达式:
		语句...
		break;
	default:
		语句...
}

条件分支语句的执行流程
switch…case… 语句在执行时会依次将 case 后的表达式的值和 switch 后的条件表达式的值进行全等比较。如果比较结果为 true，则从当前 case 处开始执行代码，当前 case 后的所有代码都会执行。

如果比较结果为 false ，则继续向下比较。如果所有的比较结果都为 false，则会执行 default 后的语句。

使用 break 可以来退出 switch 语句。
我们可以在 case 后边跟着一个 break 关键字，这样可以确保只会执行当前的 case 语句，而不会执行 其他的 case 语句。

注意： 使用 switch 语句和 if 语句的功能实际上是有重复的，使用 switch 可以实现 if 的功能，同样使用 if 也可以实现 switch 的功能，所以在使用的时候可以根据自己的习惯选择。

var day = +prompt("请输入一个数字(1-7):");   // 接收用户输入的数字，转换成 int 
switch(day){
	case 1:
		console.log("今天星期一");
		break;
	case 2:
		console.log("今天星期二");
		break;
	case 3:
		console.log("今天星期三");
		break;
	case 4:
		console.log("今天星期四");
		break;
	case 5:
		console.log("今天星期五");
		break;
	case 6:
		console.log("今天星期六");
		break;
	case 7:
		console.log("今天星期天");
		break;
	default:
		console.log("数值非法!");
}

如果输入的是一个其他的值

循环语句

通过循环语句可以反复执行一段代码多次

while 循环

while(条件表达式){
	语句....
}

while 循环的执行流程
while 语句在执行时，先对条件表达式进行求值判断，如果值为 true 则执行循环体。循环体执行完毕以后，则继续对条件表达式进行判断，如果为 true 则继续执行循环体。以此类推…
直到条件表达式的值为 false 时，才会终止循环。

创建一个循环往往需要三个步骤
第一步：初始化一个变量
第二步：在循环中设置一个条件表达式
第三步：定义一个更新表达式，每次更新初始变量。

var i = 0;  // 1. 初始化一个变量

while(i < 10){  // 2. 在循环中设置一个条件表达式
	console.log("i 的值为:" + i);
	i++;  // 3. 更新表达式  每次循环自增 1
}

控制台运行结果

do…while 循环

do {
	循环体...
}while(条件表达式);

do…while 循环的执行流程
do…while 语句在执行时，会先执行循环体，循环体执行完毕以后，再对 while 语句后的 条件表达式进行判断，如果判断的结果为 true ，则继续执行循环体，执行完毕后会再判断条件表达式的值，依次类推…
如果结果为 false ，则终止循环。

实际上这两个语句功能类似，不同的是，while 先判断后执行，do…while() 会先执行，后判断。
do…while() 会保证循环体至少执行一次，而 while 不会执行。

var i = 0 ;  //1. 初始化一个变量
do{
	console.log("i 的值为:"+i);  //循环体
	i++;  // 3. 更新表达式
}while(i < 10);  //2. 条件表达式

控制台的输出结果

for 循环

在 for 循环中，为我们提供了专门的位置用来放三个表达式：初始化表达式，条件表达式，更新表达式。

for(初始化表达式;条件表达式;更新表达式){
	循环体...
}

for 循环的执行流程
1. 执行初始化表达式，初始化变量（只会执行一次）
2. 执行条件表达式，判断是否执行循环，如果为 true ，则执行循环。
3. 如果为 false ，就终止循环。
4. 执行更新表达式。更新表达式执行完毕继续重复第二步。

注意：for 循环中的三个部分都可以省了，或者写在外边。
如果在 for 循环中不写任何的表达式则只写2个分号，此时循环是一个 死循环，慎用！！

for(;;){}    // 这是一个死循环

for(var i = 0;i < 10;i++){
	console.log("i 的值为:" + i);
}

控制台的输出结果

break && continue

break 和 continue 语句可以用来控制循环

break

break关键字可以用来退出 switch 或者循环语句，break 关键字会立即终止离他最近的那个循环语句。

注意： 不能在 单独的 if 语句中使用 break 关键字

for(var i = 0;i < 10;i++){
	if(i == 5){
		break;  //当 i = 5 的时候退出循环
	}
	console.log("i 的值为:" + i);
}

控制台的输出结果

可以为循环语句创建一个 label ，来标识当前的循环。使用 break语句时，可以在break语句后跟着一个label，这样 break语句就会结束指定的循环，而不是结束离他最近的那个循环。

hello:
for(var i = 0;i < 10;i++){
	console.log(i);
	if( i == 5 ){
		break hello;
	}
}

控制台的输出结果

continue

使用 continue 关键字可以跳过本次循环，继续执行下一次循环。同样 continue 也是对离他最近的那个循环起作用.

for(var i = 0;i < 10;i++){
	if(i == 5){
		continue;  //如果 i = 5，则跳过本次循环，继续执行下一次循环
	}
	console.log("i 的值为:" + i);
}

控制台的运行结果

循环的嵌套

/* 打印一个正方形 */
for (var a = 0; a < 5; a++) {
    for (var b = 0; b < 5; b++) {
        document.write("*" + "&nbsp;&nbsp;");
    }
    document.write("<br />");
}

打印一个正方形

/* 打印一个三角形 */
for (var a = 0; a < 5; a++) {
    for (var b = 0; b < a + 1; b++) {
        document.write("*&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br />");
}

打印一个三角形

/* 九九乘法表 */
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        document.write(j + "*" + i + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br />");
}

打印 九九乘法表