JavaScript流程控制

流程控制导读

简单理解：流程控制就是控制代码按照什么顺序来执行

流程控制主要有三种结构：顺序结构、分支结构、循环结构

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，没有特定的语法结构，程序按照代码的先后顺序，依次执行

分支流程控制

由上到下执行代码过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

if 分支语句

if (条件表达式) {执行语句;}

执行思路：

1. 如果条件表达式为true，则执行语句
2. 如果条件表达式为false，则执行if后面的代码

if else 双分支语句

if (条件表达式) {执行语句1;} else {执行语句2;} 

执行思路：

1. 如果条件表达式为true，则执行语句1
2. 如果条件表达式为false，则执行else里面的执行语句2

if else if 多分支语句

if (条件表达式1)  { 
	执行语句1; 
} else if (条件表达式2) {
	执行语句2;
} else if (条件表达式...){执行语句...}
	else {
	最后的语句;
}

执行思路：

1. 执行第一个条件表达式为true的执行语句
2. 如果都无法执行，则执行else里面最后的语句

switch 语句

switch (表达式) {
	case value1:
		执行语句1;
		break;
	case value2:
		执行语句2;
		break;
	...
	default:
		执行最后的语句;
}

执行思路：

1. 如果表达式的值和case后面的选项值相匹配，就执行该case里面的语句
2. 如果没有匹配上，那么执行default里面的语句

注意：

1. 开发时，表达式常用变量表示
2. 表达式和case里面的值相匹配的时候是全等（===）
3. 如果当前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

执行思路：

1. 如果条件表达式为true，则执行表达式1
2. 如果条件表达式为false，则执行表达式2

swith 语句与 if else if 语句的区别

1. 一般情况下swith语句与if else if语句可以相互替换
2. swictch语句通常处理case为比较确定值的情况，而if else if语句更加灵活，常用于范围判断
3. switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if else if语句有几种条件，就得判断多少次
4. 当分支比较少时，if else if语句的执行效率更高
5. 当分支比较多时，switch语句的执行效率更高，且结构更清晰

循环流程控制

循环

在程序中，一组被重复执行的语句被称为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，称为循环语句

for 循环

for循环主要用于把某些代码循环若干次，通常跟计数有关系

for (初始化变量;条件表达式;操作表达式) {
	循环体
}

初始化变量：声明的普通变量，作为计数器使用
条件表达式：用来决定每一次循环是否继续执行，也就是终止的条件
操作表达式：每次循环最后执行的代码，常用于计数器变量进行更新（递增或递减）

for (let i = 1; i <= 10; i++) {
	console.log('abc');
}

以上代码执行过程：

1. 首先执行里面的计数器变量let i = 1，在for里面只执行一次
2. 接着判断i <= 10是否满足条件，如果满足条件，就去执行循环体，不满足条件退出循环
3. 最后执行i++，递增，第一轮结束
4. 重复第二步

断点调试：

浏览器中`f12`进入开发者模式--> `sources` -->找到需要调试的文件-->在程序的某一行设置断点
`Watch`：监视，通过`watch`可以监视变量的值的变化
`f11`：程序单步执行，让程序一行一行的执行，这个时候，观察`watch`中变量的值的变化

双重 for 循环

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
	for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
		执行语句;
	}
}

执行思路：

1. 把里面的循环看作是外层循环的语句
2. 外层循环一次，里层循环执行全部

while 循环

while (条件表达式) {
	循环体代码
}

执行思路：

1. 如果条件表达式结果为true，则执行循环体；否则退出循环
2. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则继续执行循环体，直到循环条件为false时，整个循环过程才会结束

里面应有计数器，初始化变量
应有操作表达式，完成计数器的更新，防止死循环

let s = 1;
while (s <= 10){
	console.log('abc');
	s++;

do while 循环

do {
	循环体
} while (条件表达式)

执行思路：

1. 先执行一次循环体
2. 如果条件表达式为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