JavaScript 流程控制語句詳解：if語句、switch語句、while迴圈、for迴圈等

云端源想發表於2024-05-07
JavaScriptWhile

JavaScript，作為一種廣泛使用的程式語言，它的流程控制語句是構建邏輯和實現功能的基礎。流程控制語句包括條件語句、迴圈語句和轉向語句，它們是程式設計中不可或缺的部分。

接下來，我們將一一解析這些語句，帶你走進JavaScript的世界。

一、什麼是流程控制語句

流程控制語句是用來控制程式中語句執行順序的語句，它們可以影響程式的流程，從而實現不同的邏輯。流程控制語句主要分為以下三類：

順序結構： 這是最基本的流程控制，代表程式碼按照書寫的順序從上到下依次執行。通常程式都是從第一行程式碼開始順序執行到結束的。

選擇結構： 用於根據特定條件來控制程式碼的執行路徑。常見的選擇結構包括if、else、if-else if和switch等。這些語句允許程式在滿足某些條件時執行特定的程式碼塊，而在其他條件下執行另外的程式碼塊或跳過某些程式碼。

迴圈結構： 用於重複執行某段程式碼直到滿足退出條件為止。迴圈語句包括for、foreach、while和do-while等。透過這些語句，可以實現固定次數的迴圈或者當某個條件成立時的持續迴圈。

此外，還有跳轉語句如break、continue和return等，它們可以改變正常的控制流程，例如跳出當前迴圈或者返回函式的結果。

二、條件判斷語句

使用條件判斷語句可以在執行某個語句之前進行判斷，如果條件成立才會執行語句,條件不成立，則語句不執行。

語法一：if(條件表示式){語句…};

執行流程：
if語句在執行時，會先對條件表示式進行求值判斷，

  • 如果條件表示式的值為true，則執行if後的語句，
  • 如果條件表示式的值為false，則不會執行if後的語句if語句只能控制緊隨其後的那個語句。

如果希望if語句可以控制多條語句，可以將這些語句統一放在程式碼塊中，如果就一條if語句，程式碼塊不是必須的，但在開發中儘量寫清楚。

程式碼演示：

<script>
     if(true) console.log('好好學習，天天向上');
       //  加上條件運算子 &&  ||
       var a=20;
       if(a>10&&a<=20){
           alert('a在10-20之間');
           alert("4567")
         }
</script>

語法二：if…else…語句

語法：

if（條件表示式）{
                語句....
        }else{
               語句....
}

執行流程：
當該語句執行時，會先對if後的條件進行判斷，

  • 如果該值為true，則執行if後的語句，

  • 如果該值為false，則執行else後的語句，兩者選其一執行。

語法三：if…else if…else

語法：

if(條件表示式){
                語句....
}else if(條件表示式){

               語句....
}else{
                語句....
}

執行流程：
當該語句執行時，會從上到下依次對條件表示式進行求值，

  • 如果值為true，則執行當前語句。

  • 如果值為false，則繼續向下判斷，如果所有的條件都不滿意，就執行最後一個else或者不執行，該語句中，只會有一個程式碼塊被執行，一旦程式碼塊執行了， 則直接結束語句。

<script>
       var age=16;
       /* if(age>=60){
           alert("你已經退休了～～～")
       }else{
           alert("你還沒退休～～～")
       } */
           
       if(age>=100){
           alert("您老高壽呀～～～");
       }else if(age>=80){
           alert("你也不小了");
       } else if(age>=60){
           alert("你剛退休呀～～～");
       }else if(age>=30){
           alert("你已經中年了");
       }else if(age>=17){
           alert("你剛成年呀～～～");
       }else{
           alert("你還是個小孩子～～")
        };
</script>

三、條件分支語句

switch語句是一種多分支選擇結構，它可以根據表示式的值，來選擇執行不同的程式碼塊。

語法：switch…case…

switch(條件表示式){
   case 表示式:
   語句....
   break;
   case 表示式:
   語句....
   break;
   default:
   語句...
   break;
}

執行流程：

在執行時，會依次將case後的表示式的值和switch後的條件表示式的值進行全等比較。

  • 如果比較結果為true，則從當前case處開始執行程式碼，當前case後的所有程式碼都會執行；

  • 在case的後邊跟著一個break關鍵字，這樣可以確保只會執行當前case後的語句，而不會執行其他的case；

  • 如果比較結果為false，則繼續向下比較；

  • 如果所有的比較結果都為false，則只執行default後的語句；

注意： switch語句和if語句的功能實際上有重複的，使用switch可以實現if的功能，同樣使用if也可以實現switch的功能，所以我們使用時，可以根據自己的習慣選擇。

想要快速入門前端開發嗎？推薦一個免費前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！

程式碼演示：

<script>
       var num=2;
          switch(num){
            case 1:
                console.log("壹");
                //使用break可以退出switch語句
                break;
            case 2:
                console.log("貳");
                break;
            case 3:
                console.log("叄")
                break;
            
            default:
               console.log("非法數字～～～");
               break;              
          }
</script>

四、迴圈語句

迴圈語句，就是讓某段程式碼反覆執行。在JavaScript中，主要有for迴圈、while迴圈、do…while迴圈等。

1） while迴圈

語法：

while(條件表示式){
  語句
 }

while語句執行流程：

先對條件表示式進行求值判斷，如果值為true，則執行迴圈體，迴圈體執行完畢以後，繼續對錶達式進行判斷,如果值為false，則終止迴圈。

2） do…while迴圈

語法：

do{

 語句....

 }while(條件表示式)

執行流程：

do…while 語句在執行時，會先執行迴圈體，迴圈體執行完畢後，再對while後的條件表示式進行判斷，如果結果為true，則繼續執行，執行完畢繼續判斷,如果結果為false，則停止執行。

注意： 實際上以上兩個語句功能類似，不同的是while 是先判斷後執行，而do…while會先執行後判斷，do…while可以保證迴圈體至少執行一次，而while不行。

3）for語句（for迴圈）

在for迴圈中，為我們提供了專門的位置，用來放三個表示式。

  • 初始化表示式
  • 條件表示式
  • 更新表示式

for迴圈的語法：

for(初始化表示式;條件表示式;更新表示式){

語句....

}

for迴圈的執行流程：

  • 初始化表示式，初始化變數（初始化表示式，只會執行一次）；

  • 條件表示式，判斷是否執行迴圈；

  • 如果為true，則執行迴圈，如果為false，終止迴圈；

  • 執行更新表示式，更新表示式執行完畢繼續重複。

<script>
     //第一種寫法
       for(var i=0;i<10;i++){
           alert(i);
       }
       //第二種寫法  for迴圈中的三個部分都可以省略，也都可以寫在外部
       var i=0;
       for(;i<10;){
           alert(i++);
       }
       
       //如果在for迴圈中，不寫任何的表示式，只寫兩個;
        //此時迴圈是一個死迴圈，會一直執行下去，慎用
       for(;;){
           alert("hello");
       }
</script>

五、break和continue語句

break關鍵字

可以用來退出switch或迴圈語句，不能在if語句中使用break和continue，break關鍵字，會立即終止離它最近的那個迴圈語句。

continue關鍵字

可以用來跳過當次迴圈，同樣continue也是預設只會對離它最近的迴圈起作用。

終止指定迴圈

可以為迴圈語句建立一個label（標籤），來標識當前的迴圈。

語法：

label(給起的標籤名字):迴圈語句

使用break語句時，可以在break後跟著一個label，這樣break可以結束指定的迴圈，而不是最近的。

程式碼演示

<script>

   /*   for(var i=0;i<5;i++){
                console.log(i);
                //break;//用來結束for的迴圈語句，for只會迴圈一次
                if(i==2){
                    break;//這個break是對整個for迴圈起作用的
                }
            } */

      /*    for (var i = 0; i < 5; i++) {
                 console.log("@外層迴圈" + i);
                 for (var j = 0; j < 5; j++) {
                     break;//只會結束離他最近的內層迴圈
                     console.log("內層迴圈" + j);
                 }
             } */


      /*   outer: for (var i = 0; i < 5; i++) {
          console.log("@外層迴圈" + i);
          for (var j = 0; j < 5; j++) {
            break outer; //指定結束外層的for迴圈
            console.log("內層迴圈" + j);
          }
        } */


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

JavaScript的流程控制語句，就像是一把魔法棒，它能讓我們的程式碼按照我們的意願去執行。掌握了這些語句，我們就可以在程式設計的世界裡自由翱翔。

希望這篇文章能幫助你更好地理解和使用JavaScript的流程控制語句，讓我們一起在程式設計的道路上，探索更多的可能性。

相關文章