# 迴圈(Loop)
###### tags: `NKFW 網頁設計入門`

---

# 迴圈的用處

* 用來執行不斷重複的動作。
* 使程式較為簡化、易讀。
* 可以執行指令特定次數、在某些條件發生時停下或不斷執行。

---

# while loop

i = 0;
while (true) {
    alert(i);  // 不要用console.log(i)
    i += 1;
}

:::info
試試看執行這段程式會發生什麼事。
:::

---

## 基本語法

while (條件判斷式) {
    執行指令;
    //......
}

---

## 介紹

* 若是條件判斷式為`true`，則瀏覽器會不斷執行迴圈中的動作，直到條件判斷式為`false`。
* 上面出現過的`while(true) {}`被稱為無限迴圈，會無限執行迴圈內的指令。
* 一般我們不會讓迴圈無限執行，會對迴圈設定終止條件，否則將無法執行迴圈後的程式或無法正常結束程式。

---

i = 0
while (i < 10) {
    alert(i);
    i++;
}

上圖程式的執行結果為，依次在跳出視窗顯示整數0到9後結束。

---

## Project1：計算數列和

:::info
數列是一串有限或無限的數字，是數學中的重要概念，我們一般可以透過累加法或公式計算其和。

請運用while迴圈，設計一個函數接收正整數n，計算0+1+2+...+(n-1)+n的數列和回傳。
:::

---

:::spoiler 參考答案

function sumOfSequence(n) {
    sum = 0;
    i = 0;
    while (i <= n) {
        sum += i;
        i += 1;
    }
    return sum;
}

:::

---

## for loop

for (i = 0; i < 3; i++) {
    console.log(i);
}

:::info
試試看執行這段程式會發生什麼事。
:::

---

## 常用語法

for (i = 0; i < n; i++) {
    //......
}

---

## 介紹

* i 是一個變數，可以任意更改名稱。
* 「i = 0」代表將0設為i的初始值。
* 「i < n」相當於while迴圈中的執行條件，在i < n為true時，迴圈中的內容才會執行。
* 「i++」在每次迴圈中的內容執行完後執行。
* 上面示範的程式其實就相當於：

i = 0;
while (i < n) {
    ......
    i++;
}

---

* 大部分使用while達成的功能可以用for達成，大部分使用for達成的功能也可以用while達成，但for更加適合用來執行特定次數的指令。

---

## continue & break
* 說明: 大部分都會搭配while跟for loop使用，主要是在某個條件觸發時，進行操作。兩者操作則在下面會進行解釋
* continue: 跳過這一次迴圈。

for(let i=0; i<5;i++){
    if(i==3){
        continue;
    }
    console.log(i);
}

---

* break: 直接結束迴圈。

let i = 0;
while(True){
    if(i > 10) break;
    i++;
}

---

## Project2：計算數列和

:::info
試著用for迴圈來實作Project1。
:::

---

:::spoiler 參考答案

function sumOfSequence(n) {
    sum = 0;
    for (i = 1; i <= n; i++) {
        sum += i;
    }
    return sum;
}

:::

---

## Project3：巢狀迴圈

:::info
迴圈如同html中的各種標籤可以具有巢狀結構，也就是在for迴圈中在放入另外一個for迴圈。

有一數列為1+2+2+3+3+3+4+4+4+4+...+n*n，請試著寫一個函數，使用兩層的巢狀迴圈以累加法計算這個數列的和。
:::

---

:::spoiler 參考解答

function sumOfSequence(n) {
    sum = 0;
    for (i = 1; i < n + 1; i++) {
        for (j = 1; j < i + 1; j++) {
            sum += i;
        }
    }
    return sum;
}
console.log(sumOfSequence(5));

:::

---

## Project4: continue&break

:::info
使用continue與break的語法，修改下方的程式碼；使num在為3的倍數時不要輸出在控制臺，並在num為50時跳出迴圈、結束程式。
:::

let num = 1;
while (true) {
    // 在這裡撰寫程式
    console.log(num);
    num++;
}

:::spoiler 參考答案

let num = 1;
while (true) {
    if (num % 3 == 0) {
        num++
        continue;
    }
    if (num == 50)
        break;
    
    console.log(num);
    num++
}

:::