JavaScript 流程控制

流程控制

基本概念

JavaScript 提供三种流程结构, 分别是 顺序, 选择, 循环.

1. 顺序结构: 默认的流程结构, 按书写方式从上至下(可没说从左到右)执行每一条语句
2. 选择结构: 对给定的条件进行判断, 再根据判断结果来决定执行哪一段代码
3. 循环结构: 在给定条件成立的情况下, 反复执行某一段代码

选择结构

if, switch

if

1. 第一种形式

   if(/*条件表达式*/){
      /*条件成立执行的语句*/;
      }
   

   特点: 当条件表达式为真的时候就会执行 {} 中所有的代码, 并且只会执行一次

2. 第二种形式

   if(/*条件表达式*/){
       /*条件成立执行的语句*/;
   }else{
       /*条件不成立执行的语句*/;
   }
   

   特点: 当条件满足就执行 if 后面 {} 中的代码 当条件不满足就执行 else 后面 {} 中的代码 并且两个 {} 只有一个会被执行, 并且只会被执行一次

3. 第三种形式

   if(/*条件表达式A*/){
       /*条件A满足执行的语句*/;
      }else if(/*条件表达式B*/){
       /*条件B满足执行的语句*/;
      }
       ... ...
       else{
       /*前面所有条件都不满足执行的语句*/;
      }   
   

   特点: 会从上至下的依次判断每一个条件表达式, 哪一个条件表达式满足, 就执行哪一个条件表达式后面 {} 中的代码 如果前面所有的条件表达式都不满足, 就会执行 else 后面 {} 中的代码 并且众多的大括号只有一个会被执行, 并且只会执行一次

注意点:

1. 对于非布尔类型的数据, 会先转换成布尔类型再判断
2. 对于 ==/=== 判断, 建议将常量写在前面, 这样可以在等号写成赋值号时及时报错, 从而避免可能的 bug
3. if或else if或else 后面的大括号都可以省略, 但是省略之后只有紧随其后的语句受到控制 (所以别省略!)
4. 在 JavaScript 中分号 (;) 也是一条语句 (空语句)
5. if 选择结构可以嵌套使用
6. 当 if 选择结构省略大括号时, else if或else 会自动和距离最近没有被使用的 if 匹配 (这么写代码就该开除)

最佳实践:

在企业开发中, 如果条件满足之后只有一句代码需要执行, 就使用三目运算符 如果条件满足之后有多句代码需要执行, 就使用选择结构

switch

格式: (case 有点像 else if, default 有点像 else)

switch(/*表达式*/){
    case /*表达式A*/:
        /*语句A*/;
        break; /* JS 的 break 可不能省嗷 */
    case /*表达式B*/:
        /*语句B*/;
        break;
        ... ...
        default:
        /*前面所有case都不匹配执行的代码*/;
        break;
}

特点:

• 会从上至下的依次判断每一个case是否和()中表达式的结果相等, 如果相等就执行对应case后面的代码, 如果前面所有的case都不匹配, 那么就会执行default后面的代码
• 并且所有的 case 和 default 只有一个会被执行, 并且只会被执行一次

注意点:

1. case 进行的是三等判断而非双等判断
2. switch() 的 ()中可以是常量也可以是变量还可以是表达式
3. case后面可以是常量也可以是变量还可以是表达式
4. break的作用是立即结束整个switch语句 在switch语句中一旦case或者default被匹配, 其它的case和default都会失效 (js 里才是这样)
5. default 不一定要写在最后 switch 中的 default 无论放到什么位置, 都会等到所有 case 都不匹配再执行
6. 和 if/else 中的 else 一样, default 也可以省略

if 还是 switch

• 如果是对区间进行判断, 建议使用 if
• 如果是对几个固定的值的判断, 建议使用 switch
• 原则: 能用 if 就用 if

循环结构

while, do-while, for

while

格式:

while(条件表达式){
    /*条件满足执行的语句*/;
}

特点:

• 只有条件表达式为真才会执行后面 {} 中的代码
• 大括号中的代码有可能会被执行多次

while 的执行流程

1. 首先会判断条件表达式是否为真, 如果为真就执行后面 {} 中的代码
2. 执行完后面 {} 中的代码, 会再次判断条件表达式是否还为真
3. 如果条件表达式还为真, 那么会再次执行后面 {} 中的代码
4. 重复 1~3, 直到条件表达式不为真为止

书写循环结构的规则

1. 不管三七二十一先写上循环结构的代码
2. 将需要重复执行的代码拷贝到 {} 中
3. 在 () 中指定循环的结束条件

注意点:

1. 条件表达式永远为真的循环结构称之为死循环
2. 循环结构中的 {} 我们称之为循环体
3. 和 if 一样对于非 boolean 类型的值, 会先转换为 boolean 类型再判断
4. 和 if 一样, while 后如果只有一条语句它可以省略大括号
5. 和 if 一样, 不能在 () 后面写分号 (;)
6. 最简单死循环写法: while(1);
7. while 括号内不能为空, 可以为 null, 啊, 真尼玛绕啊

do-while

格式:

do{
    /*需要重复执行的代码*/;
}while(/*条件表达式*/);

特点:

• 无论条件表达式是否为真, 循环体都会被执行一次

  while (false){
      console.log("www.it666.com");
  }
  

  do{
      console.log("www.it666.com");
  }while (false);
  

while 还是 do-while

1. 大部分情况下 while 循环和 do-while 循环是可以互换的
2. 如果循环体中的代码无论如何都需要先执行一次, 使用 do-while 循环
3. 其它的情况都建议使用 while 循环

for

格式:

for(/*初始化表达式*/; /*条件表达式*/; /*循环后增量表达式*/){
    /*需要重复执行的代码*/;
}

特点:

• 和 while 循环的特点一样, 只有条件表达式为真, 才会执行循环体

• 和 while 相比, 少写了一行用于初始化表达式的语句

  // 1.初始化表达式
  let num = 1;
  // 2. 条件表达式
  while (num <= 10){
      console.log("发射子弹" + num);
      // 3.循环后增量表达式
      num++;
  }
  

  // let num = 1;
  for(let num = 1 /*1. 初始化表达式*/; num <= 10 /*2. 条件表达式*/; num++ /*3. 循环后增量表达式*/){
      console.log("发射子弹" + num);
  }
  

for 循环的执行流程

1. 首先会执行初始化表达式, 并且只会执行一次
2. 判断条件表达式是否为真, 如果条件表达式为真, 就执行循环体
3. 执行完循环体就会执行循环后增量表达式
4. 重复 2~3, 直到条件表达式不为真为止

for 与 continue

for 循环里 break 就跳出这个循环了， continue 是略过本次执行的 continue 关键字之后的代码，

实践中在 for 里用 continue 的场景更多

注意点:

1. 在for循环中"初始化表达式""条件表达式""循环后增量表达式"都可以不写, 如果不写就相当于while(1);
2. 其它注意点和 while 循环一样

while 还是 for

• 如果是while循环, 在循环结束之后还可以使用用于控制循环结束的变量

  let num = 1;
  while (num <= 10){
      console.log("发射子弹" + num);
      num++;
  }
  console.log(num);
  

• 如果是for循环, 在循环结束之后可以让外界使用, 也可以不让外界使用

  for(num = 1; num <= 10; num++){
      console.log("发射子弹" + num);
  }
  console.log(num); // 报错
  

  let num = 1;
  for(; num <= 10; num++){
      console.log("发射子弹" + num);
  }
  console.log(num); // 11
  

break 和 continue

break

1. 什么是 break 关键字?
   • break 关键字可以用于 switch 语句和循环结构中
   • 在 switch 语句中 break 关键字的作用是立即结束==当前==的 switch 语句
   • 在循环结构中 break 关键字的作用也是立即结束==当前==的循环结构
2. 注意点
   • break 关键字后面不能编写任何的语句, 因为永远执行不到
   • 如果在循环嵌套的结构中, break 结束的是当前所在的循环结构(只影响一层嵌套!)

continue

1. 什么是 continue 关键字?
   • continue 关键字只能用于循环结构
   • 在循环结构中 continue 关键字的作用是跳过本次循环, 进入下一次循环
2. continue 关键字的注意点
   • continue 关键字后面和 break 一样, 不能编写其它的代码, 因为执行不到
   • 和 break 一样, 如果 continue 出现在循环嵌套结构中, 只会跳过当前所在的循环

break 和 continue 区别

• break 是结束当前整个循环
• continue 是结束当前当次循环

循环嵌套的规律

在循环嵌套中外循环控制的是行数, 内循环控制的是列数 (当然要配合换行符)

/*

需求: 在界面中输出如下图形
*****
****
***
**
*

*/

for(let i = 0; i < 5; i++){
    console.log(i);
    for(let j = i; j < 5; j++){
        document.write("*");
    }
    document.write("<br>");
}

 /*
需求: 在界面中输出如下图形
*
**
***
****
*****

*/
for(let i = 0; i < 5; i++){
    console.log(i);
    for(let j = 0; j <= i; j++){
        document.write("*");
    }
    document.write("<br>");
}