流程控制
流程控制，指的是控制程序按照怎样的顺序执行
在JavaScript中，共有3种流程控制方式
- 顺序结构
- 选择结构
- 循环结构
顺序结构
在JavaScript中，顺序结构是最基本的结构，所谓的顺序结构，指的是代码按照从上到下、从左到右的顺序执行
JavaScript执行的顺序结构如图所示
示例
<script>var str="hello";var str1=" world";var str2=str+str1;console.log(str2);
</script>
运行结果
hello world
按照从上到下、从左到右的顺序，JavaScript会按照以下顺序执行
- 执行 var str=“hello”;
- 执行 var str1=" world";
- 执行 var str2=str+str1;
- 最后执行console.log(str2);
一般情况下，JavaScript引擎就是按照顺序结构来执行的。但有时单独使用顺序结构可能无法解决问题，所以就引用了选择结构和循环结构
选择结构
在JavaScript中，选择结构指的是根据条件判断是否为真假来决定执行哪一段代码。
选择结构有：
- if分支语句
- switch语句
if 单向选择
语法形式：
if(condition) {// 满足条件要执行的语句statement;
}
怎么运行的？
-
condition可以是一个值或一个表达式，它的计算结果为布尔值。
-
condition值结果是布尔值，为 true 时，则会执行大括号中{}内部的代码；如果值结果为false，则直接跳过大括号{}内部的代码，然后按照顺序执行后面的程序
-
如果condition计算结果若不是布尔类型时，JavaScript引擎会自动调用Boolean()函数将其结果隐式转换为布尔值。
-
如果大括号只有一个语句，大括号可以省略
if单向选择工作原理如图
示例：
<script>//单向选择ifif(true){console.log("条件结果为true就执行此代码");}//1.如果大括号内只有一个语句，大括号可省略if(true)console.log("省略大括号");//2.条件为trueif(5>2){console.log("5大于2");}if(10=="10"){console.log("10=='10'");}//3.条件为falseif(10==="10"){console.log("10==='10'为true时执行此代码");}console.log("10不等于'10'时执行此代码");//4. 除了0 所有的数字都为真if(0){console.log("数字0为true时执行此代码");}console.log("0为false");//5.除了 '' 所有的字符串都为真 trueif("真"){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语句结构工作原理
注意：
- switch case语句一般用于等值判断, if适合于区间判断
- switchcase一般需要配合break关键字使用 没有break会造成case穿透
- 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>
运行结果
今天是星期五
