流程控制分支结构
流程控制导读
简单理解:流程控制就是控制代码按照什么顺序来执行
流程控制主要有三种结构:顺序结构、分支结构、循环结构
顺序流程控制
顺序结构是程序中最简单、最基本的流程控制,没有特定的语法结构,程序按照代码的先后顺序,依次执行
分支流程控制
由上到下执行代码过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
if 分支语句
if (条件表达式) {执行语句;}
执行思路:
- 如果条件表达式为
true
,则执行语句 - 如果条件表达式为
false
,则执行if
后面的代码
if else 双分支语句
if (条件表达式) {执行语句1;} else {执行语句2;}
执行思路:
- 如果条件表达式为
true
,则执行语句1 - 如果条件表达式为false,则执行
else
里面的执行语句2
if else if 多分支语句
if (条件表达式1) {
执行语句1;
} else if (条件表达式2) {
执行语句2;
} else if (条件表达式...){执行语句...}
else {
最后的语句;
}
执行思路:
- 执行第一个条件表达式为
true
的执行语句 - 如果都无法执行,则执行
else
里面最后的语句
switch 语句
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}
执行思路:
- 如果表达式的值和
case
后面的选项值相匹配,就执行该case
里面的语句 - 如果没有匹配上,那么执行
default
里面的语句
注意:
- 开发时,表达式常用变量表示
- 表达式和
case
里面的值相匹配的时候是全等(===
) - 如果当前
case
里面没有break
,则不会退出switch
,会继续执行下一个case
let s = 2;
switch (s) {
case 1:
alert('输出1');
break;
case 2:
alert('输出2');
break;
default:
alert('输出3');
// 输出2
switch
语句也用是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时使用
三元表达式
条件表达式 ? 表达式1 : 表达式2
执行思路:
- 如果条件表达式为
true
,则执行表达式1 - 如果条件表达式为
false
,则执行表达式2
swith 语句与 if else if 语句的区别
- 一般情况下
swith
语句与if else if
语句可以相互替换 swictch
语句通常处理case
为比较确定值的情况,而if else if
语句更加灵活,常用于范围判断switch
语句进行条件判断后直接执行到程序的条件语句,效率更高。而if else if
语句有几种条件,就得判断多少次- 当分支比较少时,
if else if
语句的执行效率更高 - 当分支比较多时,
switch
语句的执行效率更高,且结构更清晰
循环流程控制
循环
在程序中,一组被重复执行的语句被称为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,称为循环语句
for 循环
for
循环主要用于把某些代码循环若干次,通常跟计数有关系
for (初始化变量;条件表达式;操作表达式) {
循环体
}
初始化变量:声明的普通变量,作为计数器使用
条件表达式:用来决定每一次循环是否继续执行,也就是终止的条件
操作表达式:每次循环最后执行的代码,常用于计数器变量进行更新(递增或递减)
for (let i = 1; i <= 10; i++) {
console.log('abc');
}
以上代码执行过程:
- 首先执行里面的计数器变量
let i = 1
,在for
里面只执行一次 - 接着判断
i <= 10
是否满足条件,如果满足条件,就去执行循环体,不满足条件退出循环 - 最后执行
i++
,递增,第一轮结束 - 重复第二步
断点调试:
浏览器中`f12`进入开发者模式--> `sources` -->找到需要调试的文件-->在程序的某一行设置断点
`Watch`:监视,通过`watch`可以监视变量的值的变化
`f11`:程序单步执行,让程序一行一行的执行,这个时候,观察`watch`中变量的值的变化
双重 for 循环
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
执行语句;
}
}
执行思路:
- 把里面的循环看作是外层循环的语句
- 外层循环一次,里层循环执行全部
while 循环
while (条件表达式) {
循环体代码
}
执行思路:
- 如果条件表达式结果为
true
,则执行循环体;否则退出循环 - 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为
true
,则继续执行循环体,直到循环条件为false
时,整个循环过程才会结束
里面应有计数器,初始化变量
应有操作表达式,完成计数器的更新,防止死循环
let s = 1;
while (s <= 10){
console.log('abc');
s++;
do while 循环
do {
循环体
} while (条件表达式)
执行思路:
- 先执行一次循环体
- 如果条件表达式为
true
,则继续执行循环体;否则退出循环
continue 和 break
continue
用于立即跳出本次循环,继续下一次循环(本次循环体中continue
之后的代码就会少执行一次)
for (let i = 1; i <= 5; i++){
if (i == 3) {
continue;
}
console.log(i);
}
// 1 2 4 5
break
用于立即跳出整个循环(循环结束)
for (let i = 1; i <= 5; i++){
if (i == 3) {
break;
}
console.log(i);
}
// 1 2