js 中默认是从上到下一行一行执行的，这种按照顺序执行在程序中就被称作顺序结构，流程控制就是指控制程序代码的执行顺序

三种基本程序结构：

流程控制

顺序结构

顺序结构是程序中最简单、最基本的程序结构，它没有特定的语法，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的

分支结构

分支结构在执行代码的时候，可以根据条件进行选择，条件越多对应的结果越多，分支也就越多。在 Js 中通过 if...else... 语句、switch 语句 来实现分支结构

单路分支

语法：

1
2
if(条件)
  //条件为 true 时执行此处语句;

例：

1
2
3
var a = prompt("请输入...","");
if(a > 4)
  alert("输入的数字大于4");

块语句

如果 if(条件) 后的语句有多个( 默认只匹配第一条语句 )，需要使用{}来对代码进行分组，写在{}中的代码会作为一个整体一起执行，如果只有一条语句可以省略大括号{}

语法：

1
2
3
{
	//一组语句
}

双路分支

语法：

1
2
3
4
5
if (条件) {
    //条件为 true 时执行此处语句
} else {
    //条件为 false 时执行此处语句
}

例：

1
2
3
4
5
6
var pwd = prompt("请输入密码","");
if (pwd == 123) {
    alert("密码正确");
} else {
    alert("密码错误");
}

PS：if…else…语句可以根据 条件 来选择执行，而条件是一个返回值为true或false的表达式

多路分支

if..else...语句中要实现多路分支，可以使用else if从句

语法：

1
2
3
4
5
6
7
8
9
if (条件1) {
    //条件1为 true 时执行此处语句
} else if (条件2) {
    //条件2为 true 时执行此处语句
} else if (条件3) {
    //条件3为 true 时执行此处语句
} ... else {
    //上述所有条件都为 false 时执行此处语句
}

例：

1
2
3
4
5
6
7
8
9
10
11
12
var score = prompt("请输入你的成绩","");
if (score < 60) {
    alert("不及格");
} else if (score >= 60 && score <= 70) {
    alert("及格");
} else if (score > 70 && score <= 80) {
    alert("良好");
} else if (score > 80 && score <= 90) {
    alert("优秀");
} else {
    alert("人才");
}

PS：在多路分支中当执行到某个分支且该分支的条件成立时，则执行该分支中的语句，执行完成后会自动从所有分支中跳出，如果该分支不成立则继续判断下一分支( else if )是否成立，以此类推…

switch语句

在 Js 中还可以使用switch语句来实现分支结构

语法1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch(表达式){
  case 值1:
    //当 "表达式" 与 "值1" 全等时，执行此处语句
    break;
  case 值2:
    //当 "表达式" 与 "值2" 全等时，执行此处语句
    break;
  case 值3:
    //当 "表达式" 与 "值3" 全等时，执行此处语句
    break;
  ......
  default:
    //当上述都不成立时执行的语句
}

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var num = prompt("请输入...","");
switch(num) {
  case "1":
    alert("星期一");
    break;
  case "2":
    alert("星期二");
    break;
  case "3":
    alert("星期三");
    break;
  case "4":
    alert("星期四");
    break;
  case "5":
    alert("星期五");
    break;
  case "6":
    alert("星期六");
    break;
  case "7":
    alert("星期日");
    break;
  default:
    alert("请输入1-7以内的数字");
}

执行流程

将switch后括号内的 表达式 与case后的 表达式 逐一进行全等(===)比较

  • 当比较结果为 true 时，则停止比较，并从当前 case处向下执行( 不会自动跳出switch语句 )
  • 当比较结果为 false 时，则继续比较下一个 case后的表达式

case

用于匹配switch(表达式)括号中表达式的子句

它会从第一个 case 子句开始匹配，直到匹配成立( 全等, === )，则匹配结束( 不再匹配 )，执行其后的相关语句

break

break 语句用于跳出 switch语句的执行( 结束switch语句 )

default

default 后的语句无需比较，直接执行，因此要放到最后

循环结构

循环结构就是重复不断的做一件事，在 Js 中通过for语句、while语句、do...while语句 来实现循环结构

for语句

语法：

1
2
3
for(初始化; 条件; 更新表达式) {
    // 循环体
}

执行步骤：

  1. 执行初始化(初始化变量)，初始化只会执行一次
  2. 执行条件，如果条件为 true，则执行循环体，并继续步骤③，如果为 false，跳出循环(循环结束)
  3. 执行更新表达式，更新表达式执行完毕重复步骤②

例：

1
2
3
4
//输出数字1-10
for(var i=0; i<=10; i++) {
  console.log(i);
}

初始化

初始化只会在第一次循环执行，通常为一个赋值语句。典型地被用于初始化一个计数器( 初始化条件 )

条件

条件被用于确定每一次循环是否能被执行。如果条件为 true，则执行循环体。如果条件为 false，则从循环体中跳出( 循环结束 )，如果条件为空，则每次循环条件都为 true，即无限循环

更新表达式

每次循环体执行完后都会自动跳回更新表达式。更新表达式会在下一次条件执行前执行。通常被用于更新或者自增计数器变量( 更新条件 )

while语句

语法：

1
2
3
while(条件) {
  //循环体
}

例：

1
2
3
4
5
6
var n=0;	//初始化
var x=0;
while(n < 3) {
  n++;		//更新表达式
  console.log(x+=n);
}

执行流程

当条件为 true 时执行循环体，执行完成后则自动跳回条件判断，直到当条件为 false 时则从循环体中跳出( 循环结束 )

按照顺序结构，while语句需要将更新表达式写在循环体中，初始化需要写在whlie语句前面

do…while语句

语法：

1
2
3
do {
   //循环体
} while(条件);

例：

1
2
3
4
5
6
//输出数字1-10
var i = 1;  //初始化
do{
	console.log(i);
  i++;	//更新表达式
}while(i <= 10);

执行流程

先执行循环体，循环体执行完后，执行条件，如果条件为 true，则继续执行循环体，如果条件为 false 则停止循环向下执行

break与continue

break 语句可以中止当前循环、switch语句或label语句

语法：

1
break [label]

例：

1
2
3
4
for(var i=0; i<5; i++){
	console.log(i);
	break	//终止当前循环
}

continue 语句可以终止当前循环或标记循环的当前迭代中的语句，并在下一次迭代时继续执行循环

语法：

1
continue [label]

例：

1
2
3
4
5
6
for(var i=0; i<5; i++){
  if(i==2){
    continue;
  }
  console.log(i) //输出0 1 3 4
}

label（标记语句）

break 和 continue语句包含一个可选的标签(label)，可允许程序跳出一个被标记的语句。

语法：

1
2
3
标签名: 被标记的语句
//标签名建议遵循标识符规范命名
//被标记的语句可以是一个循环语句、switch语句，也可以直接是一个块语句

例1：

1
2
3
4
5
6
7
8
9
outer: for(var i=0; i<5; i++){
	console.log("@外层循环"+i)
	for(var j=0; j<5; j++){
		if(j==3){
		break outer //终止外层循环(按照顺序结构，外层循环跳过，内层循环也不会执行)
		}
		console.log("@内层循环"+j)
	}
}

例2：

1
2
3
4
5
6
7
8
9
outer: for(var i=0; i<5; i++){
console.log("@外层循环"+i)
for(var j=0; j<5; j++){
		if(j==1){
			continue outer
		}
		console.log("@内层循环"+j)
	}
}

break和continue的区别

break语句可以在循环语句( 如for、while等 )、switch语句中使用，而 continue 只能在 循环语句 中使用

continue 与 break 语句的区别在于，continue 并不会终止整个循环，而是：

  • 在 while 循环中，会跳回条件判断

  • 在 for 循环中，会跳回更新表达式