前言

今天我們將說明JavaScript中的用來控制流程的『條件語法』以及可滿足自動化重複工作的『迴圈』。

說明

條件語法(Conditional statement)：

如昨天所提到的三元運算子，我們透過設置條件的達成與否(True或False)，來決定如何執行後續的指令。
常見的JavaScript條件語法為if statement，其語法如下：

單一執行內容時：

if (條件){
  執行內容
}

兩個執行內容時：

if (條件){
  執行內容
}else {
  第二個執行內容
}

那如果需要設置複數個『條件』時呢？ 這時可透過else if來新增條件

if (條件1){
  條件1達成時，會執行此區塊內容
} else if (條件2) {
  條件2達成時，會執行此區塊內容
} else {
  若條件1,2都沒達成，才會執行此區塊內容
}

了解完語法後，現在就來實際練習一下

let score = 75;
let grade;

if (score >= 90) {
    grade = "A";
} else if (score >= 80) {
    grade = "B";
} else if (score >= 70) { //此條件符合，grade變數將賦值C
    grade = "C";
} else {
    grade = "D";
}
console.log("您的等級是：" + grade) 

在上述例子中，我們只先宣告grade變數，賦值方面是透過if statement中的條件判斷並決定值為何

迴圈(Loop)：

試想一下如果要讓JavaScript執行顯示數字1~5的話，該如何做呢？

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

是否會覺得頭疼了？
此時我們能透過迴圈，快速又簡潔地完成這些重複性高的事情
這邊我們主要講解for loop以及while loop兩種常見迴圈。

For loop：

其語法為

for (initialization; condition; final expression){
  執行內容
}

• initialization：初始值，循環開始前的變數聲明
• condition：終止條件，當條件為true時執行{}中內容，而當為false時，停止迭代
• final expression：循環迭代結束時要執行的程式碼

以上方的顯示數字1~5為例，若使用for loop程式碼本身可簡化成以下：

for (let i = 1; i <= 5 ; i++){
  console.log(i)
}

迭代流程：

1. 初始化 (Initialization)：執行let i = 1，初始化變數i，並將其設置為1

2. 條件檢查 (Condition Check)：每次迭代之前，檢查條件是否為真。此處條件是i <= 5，即當 i 小於或等於5時，條件成立

3. 迭代操作 (Iteration Operation)：若條件為真，執行迭代操作

4. 遞增/遞減 (Increment/Decrement)：完成一次迭代後，執行final expreession。即i++將i的值增加1，以便下一次迭代

5. 重複 (Repeat)：重複步驟2到步驟4，直到條件不再滿足。換句話說，在每次迭代中，都會檢查條件，如果條件為真，則執行迭代操作，然後再次檢查條件

6. 結束 (Termination)：當條件不再滿足時，迴圈結束。在這個程式碼中，當 i 的值增加到6時，條件 i <= 5 不再成立，迴圈停止執行

While loop：

While Loop迴圈，只要條件為True，就會執行{}中內容

let i = 1;
while (i <= 5){
  console.log(i)
  i++;
}

For loop特別適合用於『知道要重複幾次』的事上，相對地While loop就適合在『不確定要重複幾次』的事上。