JavaScript流程控制详解之顺序结构和选择结构

流程控制

流程控制，指的是控制程序按照怎样的顺序执行

在JavaScript中，共有3种流程控制方式

• 顺序结构
• 选择结构
• 循环结构

顺序结构

在JavaScript中，顺序结构是最基本的结构，所谓的顺序结构，指的是代码按照从上到下、从左到右的顺序执行

JavaScript执行的顺序结构如图所示

示例

<script>
		var str="hello";
		var str1=" world";
		var str2=str+str1;
		console.log(str2);
</script>

运行结果

hello world

按照从上到下、从左到右的顺序，JavaScript会按照以下顺序执行

1. 执行 var str=“hello”;
2. 执行 var str1=" world";
3. 执行 var str2=str+str1;
4. 最后执行console.log(str2);

一般情况下，JavaScript引擎就是按照顺序结构来执行的。但有时单独使用顺序结构可能无法解决问题，所以就引用了选择结构和循环结构

选择结构

在JavaScript中，选择结构指的是根据条件判断是否为真假来决定执行哪一段代码。

选择结构有：

1. if分支语句
2. switch语句

if 单向选择

语法形式：

if(condition) {
  // 满足条件要执行的语句
     statement;
}

怎么运行的？

• condition可以是一个值或一个表达式，它的计算结果为布尔值。

• condition值结果是布尔值，为 true 时，则会执行大括号中{}内部的代码；如果值结果为false，则直接跳过大括号{}内部的代码，然后按照顺序执行后面的程序

• 如果condition计算结果若不是布尔类型时，JavaScript引擎会自动调用Boolean()函数将其结果隐式转换为布尔值。

• 如果大括号只有一个语句，大括号可以省略

if单向选择工作原理如图

示例：

<script>
		//单向选择if
			if(true)
			{
				console.log("条件结果为true就执行此代码");
			}
		//1.如果大括号内只有一个语句，大括号可省略
		if(true)
		console.log("省略大括号");
		//2.条件为true
		if(5>2)
		{
			console.log("5大于2");
		}
		if(10=="10")
		{
			console.log("10=='10'");
		}
		//3.条件为false
		if(10==="10")
		{
			console.log("10==='10'为true时执行此代码");
		}
		console.log("10不等于'10'时执行此代码");
		//4. 除了0 所有的数字都为真
		if(0){
			console.log("数字0为true时执行此代码");
		}
		console.log("0为false");
		//5.除了 '' 所有的字符串都为真 true
		if("真")
		{
			console.log("字符串为真");
		}
		if("")
		{
			console.log("执行此代码");
		}
		console.log("空字符串为false");
		</script>

运行结果

条件结果为true就执行此代码
省略大括号
5大于2
10=='10'
10不等于'10'时执行此代码
0为false
字符串为真
空字符串为false

条件表达式结果为false的值

• false

• undefined

• null

• 除了0 所有的数字都为真

• NaN

• 除了 ‘’ 所有的字符串都为真 true

if 双向选择

如果有两个条件的时候，可以使用 if else 双分支语句。当一个逻辑条件为真，用if语句来执行一个语句，当这个条件为假时，使用可选择的else从句来执行这个语句
语法形式：

if (condition){
  // 满足条件要执行的语句
    statement1;
} else {
  // 不满足条件要执行的语句
    statement2;
}

怎么运行的？

• condition可以是任何返回结果为true或false的表达式。

• 如果condition计算结果返回的是true，statement1语句会被执行；否则，statement2被执行。如果计算结果为非布尔值，则该if…else语句会将其转换为布尔值

• statement1和statement2可以是任何语句，甚至还可以将一个if语句嵌套其中。

if双向选择工作原理如图

示例

<script>
	//1.保存信息
	var usname=prompt("请输入你的用户名");
	var pwd=prompt("请输入你的密码");
	//2.判断条件
	if(usname === "tom" && pwd === "123456"){
		alert("恭喜登录成功");
		}
	else{
		alert("用户名或密码输入错误");
		}
</script>

运行结果

if 多向选择

if 多向选择，就是在双向选择的基础上增加单个或多个选择分支

语法形式：

if(condition1)
 {
 // 满足条件要执行的语句
     statement1;
 }   
else if(condition2)
{
    // 满足条件要执行的语句
     statement2;
}
 else if(condition3)
 {
      // 满足条件要执行的语句
     statement3;
 }
...
else if(conditionn)
{
	// 满足条件要执行的语句
     statement n;
}
else{
    //当以上条件都不满足时就执行此代码
}

怎么运行的？

• if…else if…else语句会从上到下进行检查条件，如果条件为true则执行相应的语句
• if…else if…else语句中有condition一旦条件为true,该语句就会停止检查其余condition计算结果。例如，如果condition2计算结果为true，则只会执行这语句，不会计算其他condition，执行完毕condition2内的statement2代码则会直接退出if…else if…else选择结构语句
• 如果所有条件均为false,则该if…else if…else语句执行分支中的else语句中的代码

if 多向选择工作原理如下图所示

示例：

<script>
			var grade=prompt("请输入你的成绩");
			if(grade>=90)
			{
				alert("你的成绩为优秀");
			}
			else if(grade>=80)
			{
				alert("你的成绩为良好");
			}
			else if(grade>=70)
			{
				alsert("你的成绩为中等");
			}
			else if(grade>=60)
			 {
				alert("你的成绩为合格");
			 }
			 else{
				 alert("你的成绩为不合格");
			 }
</script>

运行结果

对于多向选择，JavaScript会从第一个if条件开始判断，如果第一个不满足，则会判断第二个if条件；如果还是不满足，则判断第三个if条件，直到满足条件为止。一旦满足，就会跳出整个if结构

switch语句

switch语句会根据条件判断的计算结果，将其结果与case值进行比较，然后执行与匹配值关联的语句case。

语法形式：

switch(expression)
   {
       case 取值1:
          statement1;[break;]
       case 取值1:
          statement1;[break;]
        .....
        case 取值n:
           statementn;[break;]
       	default:
           statement;
   }

怎么运行的

• 首先，计算switch选择结构中的expression结果

• 其次，将表达式的结果与从上到下的case分支中的取值1、取值2，…进行比较。switch语句使用严格比较（===）

• 第三，执行case分支中的语句，其中expression表达式的结果等于case关键字后面的值。break语句退出switch语句。如果跳过break语句，代码执行会从原始case分支进入下一分支。如果表达式中的结果不严格等于任何值，switch语句将执行default分支中的语句

• 只要找到匹配项，switch语句就会停止将表达式的结果与剩余的case值进行比较

switch语句结构工作原理

注意：

1. switch case语句一般用于等值判断, if适合于区间判断
2. switchcase一般需要配合break关键字使用 没有break会造成case穿透
3. if 多分支语句开发要比switch更重要，使用也更多

示例：

<script>
			var day =5;
			var dayName;
			switch (day) {
			case 7:
				dayName = '今天是星期日';
				break;
			  case 1:
			    dayName = '今天是星期一';
			    break;
			  case 2:
			    dayName = '今天是星期二';
			    break;
			  case 3:
			    dayName = '今天是星期三';
			    break;
			  case 4:
			    dayName = '今天是星期四';
			    break;
			  case 5:
			    dayName = '今天是星期五';
			    break;
			  case 6:
			    dayName = '今天是星期六';
			    break;
			  default:
			    dayName = '输入错误';
			}
		alert(dayName);
		</script>

运行结果

今天是星期五