js中的流程控制语句

xqcoco
102 阅读9分钟

流程控制：控制代码执行的过程。

在任何的语言中，流程控制部分分为三类：

1.顺序执行。 从上到下依次执行。

2.分支选择：

  • 根据条件，有选择的执行某些代码，跳过某些代码。
 if：单分支
 if-else：双分支
 if-else if....else：多分支
 switch：多分支

3.循环：

  • 反复执行某些代码。
while
do-while
for

分支选择

if语句

if单分支选择语句
  1. 语法：
if(条件){
    //任意的js代码  if代码块 
}
  1. 解释:
if是js的关键字。
小括号必须要有
条件：要求是一个boolean表达式,返回值为boolean。
如果条件返回的不是boolean值，那么 js底层会进行隐式的类型转换，转换为boolean值。
一对大括号：里面是任意行的js代码。
  1. 执行过程：
1.首先判断if后的条件的返回值。
2.如果返回值为true，那么就执行if 代码块。 然后执行后续的内容。 
3.如果返回为false，那么就跳过if代码块，执行后续的内容。
  1. 注意：
    1. if是一个单分支选择语句，被选择执行的语句，根据条件是否成立，选择执行或者不执行。
    2. 如果if代码块中只有一条js代码。可以省略大括号。 如果是多条js代码，那么必须使用大括号包裹。
    3. if后的条件的小括号后，不能添加;如果添加了分号，那么条件控制的是否执行的代码 就是分号。而不是后面的大括号中的内容了。
if-else双分支选择
  1. 语法：
if(条件){ 
    //if 代码块
     }else{
         //else代码块 
         }
  1. 解释：
条件：和if中的条件一致。
else：是js中的一个关键字。否则的意思。
else后的大括号：里面是任意的js代码。
  1. 执行过程：
1.先计算条件。必须返回一个布尔值，可能存在隐式的转换。 
2.如果条件返回的结果为true，那么就执行if代码块。而不执行else代码块。
3.如果返回的结果为false，那么就跳过if代码块，执行else代码块中的内容。
  1. 注意：
1.if可以单独使用。else 不能单独存在，必须和某一个if 配对使用。
2.if 代码块和else代码块中的内容，如果只有一行js代码，可以省略大括号。
3.不要在条件小括号后添加分号，else就没有配对的if了。报错了。 
4.if 和 else之间，要么是一条js代码，要么是一个if代码块。 
5.if-else 双分支。这两个分支是条件互斥的。两个分支执行且必须执行其中的一个分支。
if-else if..else 多分支选择语句
  1. 语法：
if(条件-1){ 
    //代码块-1
    } else if(条件-2){
        //代码块-2
        } else if(条件-3){ 
            //代码块-3
            } ...... else{
                    代码块-n
                    }
  1. 执行过程：
1.先判断 条件-1，如果成立，执行 代码块-1。后续的所有的分支都被跳过。
2.条件-1 不成立。继续判断 条件-2.成立执行对应的代码块，不成立，继续判断后续的条件。
3.一次类推，只要有一个条件成立了，就执行对应的代码块，其他的代码块都被跳过。
4.如果所有的条件都不成立，那么执行最后的else 的代码块。
  1. 注意：
1.如果代码块中的内容为一条js代码，大括号可以省略。
2.这些所有的分支的条件理论上应该是互斥的。不应该存在重叠的条件。 
3.每个else 都和它前面的距离它最近的if 配对。 
4.if-else 多分支，执行且仅能执行其中的一个分支。 
5.最后的else可以不写。取决于业务的要求。如果最后的else没有，那么这么多的分支可能 一个都不执行。如果前面的所有的条件都不成立，那么就都不执行。

switch-case语句

switch-case 多分支选择
  1. 语法：
switch(变量表达式){ 
    case 常量表达式-1: 
        代码块-1 
        break; 
    case 常量表达式-2: 
        代码块-2 
        break; 
    case 常量表达式-3: 
        代码块-3 
        break; 
    ..... 
    default: 
        代码块-n 
        break; 
    }
  1. 解释：
switch：js关键字，开关的意思。 
小括号中的变量表达式：包含变量的表达式。 
后面是一对大括号。大括号中有若干对 case-break 结构体。 
case: 后通常是常量表达式
代码块：任意行js代码分支语句。 
break：js关键字。后面直接跟分号即可。
  1. 执行过程：
1.首先计算 switch后的变量表达式的结果。 
2.然后从上到下依次计算每个case 后的常量表达式计算的结果。 
    然后依次和switch变量表达式计算的结果进行等值比较。 
    比较是否相等。
    如果和某一个case 后的值相等，那么就执行对应的 代码块的内容。
    如果不相等，就继续比对下一个case 后的值。 
3.如果某一个case 相等了，那么就执行里面的内容，遇到break， 直接结束整个switch语句。
4.如果和每个case后的值都不相等，那么就执行default后的代码块。
  1. 注意：
1.每个case后的常量表达式的值应该是不同的。 
2.多少个case 取决于业务的要求，没有数量的限制。
3.每个case 后的break，都是可以没有的。取决于业务的需求。
如果执行了case后需要结束switch，那就需要添加break。
4.default：是可选择添加的。根据业务要求。 
5: 该机制只且最多比对相等一次。

break：在switch语句中的作用

就是用来结束switch语句的。 
如果执行了case后的代码，但是case后没有break，那么后面的所有的case都将被继续执行。 
直到遇到了一个break，才会结束switch。

石头剪刀布

/* * Rock 石头 * Paper 布 * Scissors 剪刀 * */ 
const ROCK = 0; const SCISSORS = 1; const PAPER = 2; //computer电脑 
let computerInput = ~~(Math.random() * (PAPER + 1 - ROCK) + ROCK); 
let playerInput = parseInt(prompt('请输入石头剪刀布', '0代表石头，1代表剪刀，2代表布')); //用玩家的输入，进入switch语句判断输赢 
switch (playerInput) { 
    case ROCK: 
        if (computerInput === ROCK) {
            console.log('玩家出的石头，电脑出的石头，两者平局'); 
           } else if (computerInput === SCISSORS) { 
               console.log('玩家出的石头，电脑出的剪刀，玩家胜'); 
               } else if (computerInput === PAPER) {
                   console.log('玩家出的石头，电脑出的布，电脑胜'); 
                   } 
        break; 
    case SCISSORS: 
        if (computerInput === ROCK) { 
            console.log('玩家出的剪刀，电脑出的石头，电脑胜'); 
            } else if (computerInput === SCISSORS) { 
                console.log('玩家出的剪刀，电脑出的剪刀，两者平局'); 
                } else if (computerInput === PAPER) { 
                    console.log('玩家出的剪刀，电脑出的布，玩家胜'); 
                    }
        break;
    case PAPER: 
        if (computerInput === ROCK) { 
            console.log('玩家出的布，电脑出的石头，玩家胜'); 
            } else if (computerInput === SCISSORS) { 
                console.log('玩家出的布，电脑出的剪刀，电脑胜'); 
                } else if (computerInput === PAPER) { 
                    console.log('玩家出的布，电脑出的布，两者平局');
                    }
    }

多分支选择语句的使用选择

   1.if-esle多分支：
        既可以进行等值比较，也可以进行不等值的区间的比较。
   2.switch case ：只能进行等值比较。
        switch case 能实现的，if-else一定可以实现。

循环

while循环

  1. 语法：
while(循环条件){
    //循环体 
    }
  1. 解释：
while：关键字 
循环条件：布尔表达式，返回一个布尔值。如果不能返回一个布尔值， 那么就需要隐式转换。 
大括号中是需要反复执行的代码块。
  1. 执行过程：
1.先判断循环条件，如果是true，那么就执行循环体。
    然后执行完循环体，
    再继续判断循环条件 成立，继续执行循环体，
    直到循环条件为false，那么立即结束循环。 
2.如果一开始循环条件就是false，那么循环体一次都不执行。

4. 注意：

  1. 如果循环体就一句代码，那么可以省略大括号。
  2. 千万不要在循环条件后添加;号。如果加了，循环体就是分号了。

5. 循环结构的构成：

1.循环控制部分 
    a：循环条件初始化 
    b：循环条件 
    c：迭代（改变循环条件部分） 
2.循环体

do-while循环

  1. 语法：
do{ 
    //循环体 
    }while(循环条件);
  1. 执行过程：
1.先执行一次循环体。然后再进行条件的判断。
2.如果条件成立，继续执行循环体，周而复始。 
3.直到循环条件为false，结束整个循环。

do-while的事情的情形：

如果循环条件的判断要依赖于一次循环的执行可以使用do-while

总结：while和do-while的区别
  1. 语法不同
  2. while先进行条件的判断，然后在执行循环体。
  3. do-while先执行循环体，然后再进行循环条件的判断。
  4. 【while有可能一次循环体都不执行。do-while至少执行一次循环】

for循环

  1. 语法：
 for(循环条件初始化; 循环条件 ; 迭代){ 
     循环体 
     }
  1. 执行过程：
1.循环条件初始化：执行且仅执行一次。最先被执行。
2.进行循环条件的判断。成立，执行循环体，然后执行 迭代部分。
    然后再进行条件的判断，循环体，迭代，周而复始。直到循环条件为false
    立即结束循环。
  1. 注意：
1.初始化部分可以同时初始化多个变量，迭代部分，可以同时迭代多个变量。
    循环条件只要返回一个布尔值即可。
2.for循环的小括号内使用2个分号分隔成了3部分。这三部分的内容都可以没有，但是2个分号是必不可少的。
            3: 如果循环条件不写，意味着循环条件永远为真。

循环的选择

    1：如果循环的次数是固定的，通常使用for
    2：如果循环的次数不固定，通常使用while

break 和 continue

break

  • 语法： break;
  1. js 的关键字
  2. break 只能在 switch 中 和 循环体中使用。
  3. 在swtich中，用来结束switch语句的。
  4. 在循环体中使用，用来结束当前循环的。只能结束一层循环。

continue

  • 语法： continue;

  1. js的一个关键字。

  2. 只能在循环体中使用。

  3. 作用：用来跳过本次循环，继续下次循环。

  4. while、do-while的循环体中使用continue。

    continue后续循环体中的代码将被跳过，去到下次循环条件的判断处去执行。

  5. for 循环体中使用，会跳过continue 后续的代码，跳到迭代处去执行。

分支的选择嵌套

    单分支if
    双分支 if-else
    多分支 等等`
  • 有嵌套的需求：
    那么嵌套的深度不要太深，不建议超过3层。
    循环的嵌套：循环体中包含了其他的循环。
  • 嵌套循环的特点：
1.外层循环迭代一次，内层循环执行一遍。
2.内层循环体执行的次数 等于 ，每一层循环执行的次数的乘积。
  • 关于使用率：
 单层循环使用最多。双层的使用一般般。三层很少使用。
avatar
文章
阅读
粉丝