JavaScript流程控制语句

在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的。所以,我们必须清楚每条语句的执行流程。而且,很多时候我们要通过控制语句的执行顺序来实现我们想要的业务逻辑和功能。

分类

一般我们把流程控制语句分为以下三类

  • 顺序结构

  • 选择结构:if 语句、switch 语句

  • 循环结构:while 语句、for 语句

顺序结构

按照代码的先后顺序,依次执行。

选择结构

if语句

if 语句有以下三种形式。

形式1:(条件成立才执行。如果条件不成立,那就什么都不做)

if (条件表达式) {
  // 条件为真时,做的事情
}

对于非布尔类型的数据,会先转换成布尔类型再判断。下同。

形式 2:

if (条件表达式) {
  // 条件为真时,做的事情
} else {
  // 条件为假时,做的事情
}

 

形式3:(多分支的 if 语句)

if (条件表达式1) {
  // 条件1为真时,做的事情
} else if (条件表达式2) {
  // 条件1不满足,条件2满足时,做的事情
} else if (条件表达式3) {
  // 条件1、2不满足,条件3满足时,做的事情
} else {
  // 条件1、2、3都不满足时,做的事情
}

以上所有的语句体中,只执行其中一个。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //第一步,输入
const bianhao = parseInt(prompt('您想加什么油?填写92或者97'));
const sheng = parseFloat(prompt('您想加多少升?'));

//第二步,判断
if (bianhao == 92) {
  //编号是92的时候做的事情
  if (sheng >= 20) {
      const price = sheng * 5.9;
  } else {
      const price = sheng * 6;
  }
} else if (bianhao == 97) {
  //编号是97的时候做的事情
  if (sheng >= 30) {
      const price = sheng * 6.95;
  } else {
      const price = sheng * 7;
  }
} else {
  alert('不好意思,没有这个编号的汽油!');
}

alert('价格是' + price);
       
  </script>
</body>
</html>

switch语句

switch(表达式) {
case 值1:
语句体1;
break;

case 值2:
语句体2;
break;

...
...

default:
语句体 n+1;
break;
}

switch 可以理解为“开关、转换” 。case 可以理解为“案例、选项”。

行流程如下:

(1)首先,计算出表达式的值,和各个 case 依次比较,一旦有对应的值,就会执行相应的语句,在执行的过程中,遇到 break 就会结束。

(2)然后,如果所有的 case 都和表达式的值不匹配,就会执行 default 语句体部分。

switch 语句的结束条件【非常重要】

  • 情况 a:遇到 break 就结束(而不是遇到 default 就结束)。因为 break 在此处的作用是,立即结束并退出整个 switch 语句。

  • 情况 b:执行到程序的末尾就结束。

我们稍后讲 case穿透的时候,你就会明白其中的奥妙了。

注意点

1、switch 后面的括号里可以是变量、常量、表达式, 通常是一个变量(一般做法是:先把表达式存放到变量中)。

case 后面的值可以是变量、常量、表达式。

2、case的判断逻辑是===,不是==。因此,字符串'6'和 数字 6 是不一样的。

循环结构

for循环

for(①初始化表达式; ②条件表达式; ④更新表达式){
③语句...
}

//执行流程
①执行初始化表达式,初始化变量(初始化表达式只会执行一次)

②执行条件表达式,判断是否执行循环:
如果为true,则执行循环③
如果为false,终止循环

④执行更新表达式,更新表达式执行完毕继续重复②

while循环

while(条件表达式){
语句...
}
//执行流程
while语句在执行时,先对条件表达式进行求值判断:

如果值为true,则执行循环体:
循环体执行完毕后,继续对表达式进行判断
如果为true,则继续执行循环体,以此类推

如果值为false,则终止循环

do while 循环

do{
语句...
}while(条件表达式)
//执行流程
do...while语句在执行时,会先执行循环体:

循环体执行完毕以后,再对while后的条件表达式进行判断:
如果结果为true,则继续执行循环体,执行完毕继续判断,以此类推
如果结果为false,则终止循环

while 循环和 do...while 循环的区别

这两个语句的功能类似,不同的是:

  • while:先判断后执行。只有条件表达式为真,才会执行循环体。

  • do...while:先执行后判断。无论条件表达式是否为真,循环体至少会被执行一次。

break 与continue

break

  • break 可以用来退出 switch 语句或退出整个循环语句(循环语句包括 for 循环、while 循环。不包括 if。单独的 if 语句里不能用 break 和 continue,否则会报错)。

  • break 会立即终止离它最近的那个循环语句。

  • 可以为循环语句创建一个 label,来标识当前的循环(格式:label:循环语句)。使用 break 语句时,可以在 break 后跟着一个 label,这样 break 将会结束指定的循环,而不是最近的。

continue

  • continue 只能用于循环语句(包括 for 循环、while 循环,不包括 if。单独的 if 语句里不能用 break 和 continue,否则会报错)。可以用来跳过当次循环,继续下一次循环。

  • 同样,continue 默认只会离他最近的循环起作用。

  • 同样,如果需要跳过指定的当次循环,可以使用 label 标签。