3.1分支结构

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

JavaScript 流程控制-分支 流程控制-循环_断点调试

JS语言提供了两种分支语句

  • if语句
  • switch 语句 

3.2 if 语句

1.语句结构

//条件成立执行代码,否则什么也不做

if(条件表达式){

        //条件成立执行的代码语句

        }

 2.执行流程

JavaScript 流程控制-分支 流程控制-循环_javascript_02

 3.3 if else 语句(双分支语句)

1.语句结构

//条件成立 执行 if 里面代码,否则执行else 里面的代码

if (条件表达式) {

        //[如果] 条件按成立执行代码

        } else {

        //[否则] 执行的代码

       }

3.4 if else if 语句 (多分支语句)

1.语法结构

    if (条件表达式1) {

            // 语句1;

        } else if (条件表达式2) {

            // 语句2;

        } else if (条件表达式3) {

            // 语句3;

        } else {

            // 最后的语句;

        }

 2.执行流程

JavaScript 流程控制-分支 流程控制-循环_前端_03

 4.三元表达式

三元表达式也能够做一些简单的条件选择。有三元运算符组成的式子称为三元表达式。

5. 分支流程控制 switch 语句

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用switch。

        switch (表达式) {

             case value1:

                 执行语句1;

                 break;

             case value2:

                 执行语句2;

                 break;

                 ...

                 default:

                     执行最后的语句;

         }

switch 语句使用注意事项:

  1. 我们开发里面 表达式我们经常写成变量
  2.  我们num 的值 和 case 里面的值相匹配的时候是 全等   必须是值和数据类型一致才可以 num === 1
  3.  break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case

 5.2switch 语句和 if else if 语句的区别

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

JavaScript 流程控制-循环

 在JS中,主要有三种类型的循环语句:

  • for 循环
  • while 循环
  • do ... while 循环

2.for 循环

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

2.1 语法结构

for 循环主要用于把某些代码循环若干次,通常跟技术有关系。其语法结构如下:

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

        //循环体

        } 

 断点调试:

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停止,然后你一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

断点调试可以帮助我们观察程序的运行过程

浏览器按住 f12 --》 sources --> 找到需要调试的文件 --> 在程序的某一行设置断点

WAtch:监视,通过watch 可以监视变量的值的变换,非常的常用

f11 程序单步执行,让程序一步一步的执行,这个时候,观察watch 中的变量的值的变换

代码调试的能力非常重要,只要学会了代码调试,才能够学会如何自己解决bug 的能力。初学者不要觉得调试代码比较麻烦就不去调试。

3.5 for 循环小结

  • for 循环可以重复执行某些相同的代码
  • for 循环可以重复执行些许不同的代码,因为我们有计数器
  • for 循环可以重复执行某些操作,比如算数运算符加法操作
  • 随着需求增加,双层for 循环可以做的更多,更好看的效果
  • 双层for 循环,外层循环一次,内层for 循环全部执行
  • for 循环是循环条件和数字直接相关的循环 

4.while 循环

while语句可以在表达式为真的前提下,循环执行指定的代码,直到表达式不为真时结束循环。

while 语句的语法结构如下:

while(条件表达式){

        //循环体代码

        } 

执行思路:

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

5. do... while 循环 

do ... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。

do ... while 语句的语法格式如下:

do {

        //循环体代码 - 表达式为真 true 时 重复执行循环体代码

        } while(条件表达式);

执行思路:

  1. 先执行一次循环体代码
  2. 在执行条件代码,如果结果为true, 则继续执行循环体代码,如果为false,则退出循环,继续执行后面的代码

注意:先执行循环体,在判断,我们会发现do... while 循环语句会少会执行一次循环体代码 

6.continue break

6.1 continue 关键字 

continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中continue 之后的代码就会少执行一次)。

6.2 break 关键字 

break 关键字用于立即跳出整个循环(循环结束)