Js流程控制的三种结构

流程控制是什么？

流程控制也叫（控制流程），是计算机领域的用语，也用在js中，

顾名思义就是：一个程序运行时，它的指令（或子程序）运行或求值的顺序

js有哪三种结构？

通过图片可以大概了解一下，接下来就跟着脚步一起学习js的三种结构吧！

一、顺序结构:从上到下执行的代码就是顺序结构

二、分支结构:
分支结构又分为两种语句，分别是：if语句和switch语句

其中，if语句有、又有3种分支：单分支，双分支和多分支。

（1）if语句——单分支：

(1)单分支
    //   if(条件语句) {
    //         要执行的代码块
    //               }

    //写一个判断年龄是否大于18，大于等于就输出成年了
     var age = 100;
     if (age >= 18) {
         console.log("成年了");
     }

（2）if语句——双分支

//(2)双分支
    /* 
     if(条件语句) {
             要执行的代码块
     }else{
        要执行的代码块
            }    
             */            
             var score = 99;
            if (score >= 60) {
             document.write("及格");
            } else {
                document.write("不及格");
             } 

（3）if语句——多分支 

 （4）switch语句——多分支

举个栗子：

三、循环结构：

满足一定条件重复去做一件事（语句有：while,do…while,for循环）

其中for循环是我们常用到的一种循环，现在就跟着我一起了解和掌握第一种循环语句。

（1）while循环

while的循环语法：

栗子：输出10行hello

 (2)do...while循环

特点：不管条件表达式成不成立，都会执行一次循环体

下面代码就是它的语法结构

 现在来举个栗子，更好的理解它。

<script>
    //do...while例子：打印1-100
    var i = 1;                      //这里var一个变量i=1；
    do {
        document.write(i + " ");  //循环体；要打印输出的结果
        i++;                       //变量更新；++递增
    } while (i < 100);        //括号里的i就是声明的条件，让i的上限是100
</script>

这是运行 输出的结果就是：

 这里再说一下，while和do...while他们之间的区别：

1.while是先判断条件表达式再来执行循环体

2.do...while是先执行一下循环体，再来判断条件表达式是否成立，不管条件表达式成不成立，循环体都会执行一次。

（3）for循环

while循环和do...while循环一般用于解决确认次数的循环，而我们讲到的for循环则一般用在循环次数确定的时候使用。

下面让我们一起看看它的语法结构：

<script>
        //语法：for(初始变量；条件表达式；变量更新){
        // 循环体
        //  }
        
        //使用for循环打印1-10
        //1.var一个变量，i=1；给i条件，让它<=10; i++变量更新，递增
        for(var i = 1 ; i <= 10; i++) {   
        //2. 输出打印
            document.write(i + " ");
        }
</script>

运行结果：

 接下来再使用for循环来打印一个99乘法表，代码如下：

<script>
    //for循环 打印99乘法表
    var str = '<table border="1" rules="all" width="500">';
    for(var i = 1; i<=9; i++) {
        str += "<tr>";
            for(var j = 1; j <= i; j++) {
                str += "<td>" + j + "x" + i + "=" + i * j + "</td>";
            }
            str += "</tr>";
    }
    str += "</table>";
    document.write(str);
</script>

运行结果：

js的三种结构就讲到这里啦~我们下期见！