一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

流程控制

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

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

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

顺序结构

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

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单向选择工作原理如图

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

示例:

<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'时执行此代码
0false
字符串为真
空字符串为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双向选择工作原理如图

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

示例:

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

运行结果

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

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 多向选择工作原理如下图所示

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

示例:

<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流程控制详解之顺序结构和选择结构

对于多向选择,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语句结构工作原理

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

注意:

  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>

运行结果

今天是星期五

原文链接:https://juejin.cn/post/7332301396337344564 作者:小明的Fire计划

(0)
上一篇 2024年2月7日 上午10:11
下一篇 2024年2月7日 上午10:21

相关推荐

发表评论

登录后才能评论