# 【Day11】迴圈while、for
###### tags: `JavaScript` `14th鐵人賽`
假設今天要打印出1~2的數字非常簡單，但若需要執行上百次執行幾乎相同動作打印到10000時，就可以用到迴圈的程式，~~或是手動打印10000次哈哈哈~~。

---
本篇會介紹：

- while
- for
- 嵌套迴圈
- break與continue離開迴圈
- for與while的差別

## while

循環有很多種呈現方式但任何循環都具備三個條件：

1. 起始值：設定循環開始的值
2. 停止值：測試循環是否該繼續的邏輯條件
3. 如何到達下一個項目：遞增或遞減的步驟

let i = 1; // 設定起始值
while(i<=10){ // 設定判斷何時停止 i<=10 為false時
	console.log(i); 
	i+=2 // 如何到下一個步驟：遞增2
} 
/*
1
3
5
7
9
11
*/

以下兩點為設定迴圈時須注意的事項，

- 在設定迴圈時三個條件缺一不可，若缺少將會造成瀏覽器崩潰
- 不管如何執行條件都會判讀會true時，會進行一個無限迴圈，離不開迴圈。

## for

for迴圈是JavaScript中最常見的迴圈類型，與while不同的是必須**明確的定義**，而for loop的使用方式如下：

for ( 起始值; 停止值; 到達下一個項目 ) {
  // 若判斷為true則值型{ }內的動作
}

for (let i = 0; i < 6; i++) { 
  console.log(i);
}
/*
0
1
2
3
4
5
*/

同while執行，若條件為true時將會執行動作，直到條件判斷為false時，跳出迴圈區塊。

## 嵌套迴圈

當迴圈變複雜時可能會有下面這種情況

for (let x = 0; x < 3; x++) {
  for (let y = 0; y < 2; y++) {
    console.log(x + "," + y);
  }
}
/*
0,0
0,1
1,0
1,1
2,0
2,1
*/

用表格的方式較容易理解，可以發現即便內容的迴圈判斷結束，仍然會跳回外圍的迴圈，直到外圍迴圈判斷為false。

| x | x<3 | y | y<2 | console.log |
| --- | --- | --- | --- | --- |
| 0 | true | 0 | true | 0,0 |
| 0 | true | 1 | true | 0,1 |
| 0 | true | 2 | false | / |
| 1 | true | 0 | true | 1,0 |
| 1 | true | 1 | true | 1,1 |
| 1 | true | 2 | false | / |
| 2 | true | 0 | true | 1,0 |
| 2 | true | 1 | true | 2,1 |
| 2 | true | 2 | false | / |

## break與continue離開迴圈

- break：直接離開迴圈
- continue：跳過一次並繼續迴圈

透過上述的內容可以在迴圈中加入條件if讓迴圈離開

let arr=[0,0,0,5,3,4,0];
for(let i=0 ; i<arr.length ; i++){
    if(arr[i] !== 0){
        console.log(arr[i]);
        break;
    }
}

## for與while的差別

- for 明確的迴圈執行次數
- while “不”明確的迴圈執行次數 ex:大樂透

若有問題或補充都歡迎回復唷~