前端开发_JavaScript_流程控制语句_选择语句:if/switch

流程控制语句_选择语句:if/switch

1.引入

   我们之前学习了运算符，可以进行一些数据的计算，但是在实际的开发中，有时候我们需要选择性的执行一些代码，或者是多次执行一些代码，为了解决类似的问题，我们一起来学习流程控制语句。

2.流程控制语句概述以及分类

   流程控制语句是用来解决代码执行流程的技术，流程控制语句可以分为三类结构:顺序结构、选择结构、循环结构。下面我们逐一的讲解三个内容.

3.顺序结构

   顺序结构是代码的默认结构，也就是从上到下的执行我们写的代码，哪一行代码先写就先执行哪一行代码。

4.选择结构

   选择结构主要分为两种:if条件判断和switch选择判断。

  (1)、if选择结构语法

if选择结构的三种语法:

1.单一分支判断选择

if(条件表达式){

   //代码块
}

注意:
    条件表达式的结果必须为bool类型。

执行流程:如果条件表达式的结果为true,则执行{}里面的代码块，否则不执行里面的代码块。


2.双分支判断选择

if(条件表达式){
   
  //代码块1

}else{

  //代码块2

}

执行流程:如果条件表达式的结果为true,则执行代码块1，否则执行代码块2

3.多分支语句的语法结构

if(条件表达式1){
  
   //语句块1
}else if(条件表达式2){
   //语句块2
   
}else if(条件表达式3){
   //语句块3
}
......
else{
   //语句块n
}

执行流程:通过判断条件表达式是否成立确定执行哪一个语句块，如果都不成立，那么就执行else后面的语句块。
一般情况条件表达式是互斥的，如果说存在多个条件表达式都满足条件，那么它会执行满足条件的第一个表达式。

选择结构代码实现以及效果截图

<script type="text/javascript">
		  var a = 5;
		  var b = 15;
		  var c = 180;
		  
		  //单一条件判断
		  if(a > 0){
			  document.write(a + "这是一个正数" + "<br>");
		  }
		  
		  //双分支语句语法结构
		  if(b < 10){
              document.write(b + "这是一个小于10的数字" + "<br>");		  
		  }else{
			  document.write(b + "这是一个大于10的数字" + "<br>");		 
		  }
		  
		  //多分支语句
		  if(c < 0){
			  document.write(c + "这是一个小于0的数字" + "<br>");
				  
		  }else if(c >=0 && c<=100){
			  
			  document.write(c + "这是一个介于0~100的数字" + "<br>");	
		  }else{
			  document.write(c + "这是一个大于100的数字" + "<br>");	
		  }
</script>

 (2)、switch选择结构语法

switch选择结构语法:

switch(值表达式){

    case 取值1:语句或者语句块1; break;
    case 取值2:语句或者语句块2; break;
    case 取值3:语句或者语句块3; break;
    ......
    case 取值n:语句或者语句块n; break;
    default: 语句或者语句块n;break;
}

执行流程:
    先判断值表达式的结果是什么，然后把值表达式的值和case后面的取值进行匹配，如果哪一个匹配上就执行匹配上的后面的语句或语句块。如果说都不满足，那么就执行default后面的语句块。

switch选择结构代码实现以及效果截图

<script type="text/javascript">
		var season = "春季";
		switch (season){
			case "春季":
			     document.write("春季是一个万物复苏的季节");
				break;
		    case "夏季":
			    document.write("夏季是一个炎热的季节");
				break;
			case "秋季":
			    document.write("秋季是一个收获的季节");
				break;
			case "冬季":
			    document.write("冬季是一个寒冷的季节");
				break;
			default:document.write("没有输入一个正确的季节");
				break;
		}
</script>