js：流程控制（分支结构、顺序结构、循环结构）

转载

mob604756f6b718 2020-01-19 17:27:00

1、流程控制

通过控制代码的执行顺序来实现我们完成的功能，js中流程控制有三种结构

顺序结构：按照代码的先后顺序，依次执行
分支结构：根据不同的条件执行不同的代码，如：if和switch... ...case语句
循环结构：while、do.. ...while、for、break、continue语句

2、三元表达式

        <script>
           var b=((6+3)==9 ?true:false)
           console.log(b);
        </script>

js：流程控制（分支结构、顺序结构、循环结构）_循环结构

表达式的值为真，返回的是冒号前的数据，否则，返回冒号后的数据

3、switch...case语句

（1）switch...case的注意点

不匹配的时候无输出：

        <script>
           var num='1';
           switch (num){
               case 1:  console.log(1); break;
               case 2:  console.log(2); break;
               case 3:  console.log(3); break;
           }
        </script>

改成数据类型和值相等：

        <script>
           var num=2;
           switch (num){
               case 1:  console.log(1); break;
               case 2:  console.log(2); break;
               case 3:  console.log(3); break;
           }
        </script>

js：流程控制（分支结构、顺序结构、循环结构）_循环结构_02

（2）switch...case与if ... ... else比较

switch...case通常处理case比较稳定的情况，例如：case为1输出星期一... ... ，cese的值是可以事先确定的，而if ... ... else更加灵活，常需要结合判断语句
switch是进行判断后直接执行与case相等的语句，效率更高，而if ... ... else是需要一个一个条件判断，直到找到符合条件的语句才鞥去执行
分支较多用switch...case效率更高，结构也比较清晰；分支较少用if ... ... else效率更高

4、循环结构

（1）概念

可以重复执行某些语句

（2）continue和break关键字

continue关键字：

continue关键字可以立即跳出本次循环，继续下一个循环

        <script>
           for(var i=1;i<=5;i++){
               if(i==3)continue;
               console.log(i);
           }
        </script>

js：流程控制（分支结构、顺序结构、循环结构）_顺序结构_03

break关键字：立即退出整个循环

        <script>
           for(var i=1;i<=5;i++){
               if(i==3)break;
               console.log(i);
           }
        </script>

js：流程控制（分支结构、顺序结构、循环结构）_数据_04

5、基本语句

（1）if语句

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <title>helloJs</title>
    </head>
    
    <body>
        <p>六点到九点会提示"Good morning"。</p>
    <button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    
    <script>
    function myFunction(){
        
        var x="";
        var time=new Date().getHours();
        alert(time);
        if (time>6&time<9){
            x="Good morning";
        }
        document.getElementById("demo").innerHTML=x;
        
    }
    </script>
    </body>
    
</html>

（2）if... ...else

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <title>helloJs</title>
    </head>
    
    <body>
        <p>六点到九点会提示"Good morning"。</p>
    <button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    
    <script>
    function myFunction(){
        
        var x="";
        var time=new Date().getHours();
        alert(time);
        if (time>6&time<9){
            x="Good morning";
        }
        else if(time>11&&time<13){
            x="Good noon";
        }
        else if (time>18){
            x="Good evening";
        }
        else{
            x="Good day";
        }
        document.getElementById("demo").innerHTML=x;
        
    }
    </script>
    </body>
    
</html>

js：流程控制（分支结构、顺序结构、循环结构）_流程控制_05

（3）switch...case

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <title>helloJs</title>
    </head>
    
    <body>
    <button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    
    <script>
    function myFunction(){
        var x="";
        var time=new Date().getDay();
        alert(time);
        switch (time) 
        { 
          case 0:time="今天是星期日"; 
          break; 
          case 1:time="今天是星期一"; 
          break; 
          case 2:time="今天是星期二"; 
          break; 
          case 3:time="今天是星期三"; 
          break; 
          case 4:time="今天是星期四"; 
          break; 
          case 5:time="今天是星期五"; 
          break; 
          case 6:time="今天是星期六"; 
          break; 
        }
        document.getElementById("demo").innerHTML=time;
        
    }
    </script>
    </body>
    
</html>