流程控制
流程控制，指的是控制程序按照怎样的顺序执行
在JavaScript中，共有3种流程控制方式
- 顺序结构
- 选择结构
- 循环结构
顺序结构
在JavaScript中，顺序结构是最基本的结构，所谓的顺序结构，指的是代码按照从上到下、从左到右的顺序执行
JavaScript执行的顺序结构如图所示
示例：
js
<script>
var str="hello";
var str1=" world";
var str2=str+str1;
console.log(str2);
</script>运行结果
js
hello world按照从上到下、从左到右的顺序，JavaScript会按照以下顺序执行
- 执行 var str="hello";
- 执行 var str1=" world";
- 执行 var str2=str+str1;
- 最后执行console.log(str2);
一般情况下，JavaScript引擎就是按照顺序结构来执行的。但有时单独使用顺序结构可能无法解决问题，所以就引用了选择结构和循环结构
选择结构
在JavaScript中，选择结构指的是根据条件判断是否为真假来决定执行哪一段代码。
选择结构有：
- if分支语句
- switch语句
if 单向选择
语法形式：
js
if(condition) {
// 满足条件要执行的语句
statement;
}怎么运行的？
-
condition可以是一个值或一个表达式，它的计算结果为布尔值。
-
condition值结果是布尔值，为 true 时，则会执行大括号中{}内部的代码；如果值结果为false，则直接跳过大括号{}内部的代码，然后按照顺序执行后面的程序
-
如果condition计算结果若不是布尔类型时，JavaScript引擎会自动调用Boolean()函数将其结果隐式转换为布尔值。
-
如果大括号只有一个语句，大括号可以省略
if单向选择工作原理如图
示例：
js
<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>运行结果
js
条件结果为true就执行此代码
省略大括号
5大于2
10=='10'
10不等于'10'时执行此代码
0为false
字符串为真
空字符串为false条件表达式结果为false的值
-
false
-
undefined
-
null
-
除了0 所有的数字都为真
-
NaN
-
除了 '' 所有的字符串都为真 true
if 双向选择
如果有两个条件的时候，可以使用 if else 双分支语句。当一个逻辑条件为真，用if语句来执行一个语句，当这个条件为假时，使用可选择的else从句来执行这个语句 语法形式：
js
if (condition){
// 满足条件要执行的语句
statement1;
} else {
// 不满足条件要执行的语句
statement2;
}怎么运行的？
-
condition可以是任何返回结果为true或false的表达式。
-
如果condition计算结果返回的是true，statement1语句会被执行；否则，statement2被执行。如果计算结果为非布尔值，则该if...else语句会将其转换为布尔值
-
statement1和statement2可以是任何语句，甚至还可以将一个if语句嵌套其中。
if双向选择工作原理如图
示例：
js
<script>
//1.保存信息
var usname=prompt("请输入你的用户名");
var pwd=prompt("请输入你的密码");
//2.判断条件
if(usname === "tom" && pwd === "123456"){
alert("恭喜登录成功");
}
else{
alert("用户名或密码输入错误");
}
</script>运行结果
if 多向选择
if 多向选择，就是在双向选择的基础上增加单个或多个选择分支
语法形式：
js
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 多向选择工作原理如下图所示
示例：
js
<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。
语法形式：
js
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更重要，使用也更多
示例：
js
<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>运行结果
js
今天是星期五