Day.16 「重複的事情，交給程式去做！」 —— JavaScript 循環迴圈

Day.16 「重複的事情，交給程式去做！」 —— JavaScript 循環迴圈

「重複的事情，交給程式去做！」 —— JavaScript 循環迴圈

前面學習到了條件判斷式，接著我們來學習有點危險的循環迴圈，好啦！也沒那麼誇張～只是寫不好，容易進入無窮迴圈導致當機！不過我們是寫在網頁上～所以如果真的不小心陷入無窮迴圈，就關掉瀏覽器就可以了！

什麼是迴圈？

如同字面上的意思，一直反覆輪迴，重複做一樣的事（怎麼好像人生）。

迴圈流程圖

沒錯！迴圈也有流程圖，但其實也跟判斷流程圖相差不遠，幾乎一模一樣

迴圈流程圖

同樣是要達成所設定的條件來進行循環，是不是跟條件判斷式很像呀！

while 迴圈

while 迴圈是個最基本、結構簡單的迴圈，使用的語法 while ( 條件表達式 ) { 當條件表達式為 true 時，執行程式碼 }。

假設我們要印出 12 個月份，除了乖乖的打出 12 個月份，我們也可以發揮工程師精神，使用迴圈來幫我們代勞：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let month = 1; /* 一年由 1 月開始 */
while (month <= 12 /* 一年只有 12 個月，超過就終止 */) {
  console.log( `${month} 月` );  // 利用前面所學的樣板字面值，帶入變數
  month++;  // 重點：需要每執行一次自動 + 1，否則會陷入無限迴圈
}

/*
  "1 月"
  "2 月"
  "3 月"
  "4 月"
  "5 月"
  "6 月"
  "7 月"
  "8 月"
  "9 月" 
  "10 月"
  "11 月"
  "12 月"
*/

非常簡單吧～

do while 迴圈

而 do while 跟 while 非常相似，唯一不同的地方就在於，JavaScript 是由上而下執行程式碼，所以會先執行一次！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let month = 1; /* 一年由 1 月開始 */
do {
  // 不管有沒有符合條件，都會先執行"一次"這段程式碼
  console.log( `${month} 月` );
  month++; // 重點記得加
} while (month <= 12) // 一年不超過 12 個月

/*
  "1 月"
  "2 月"
  "3 月"
  "4 月"
  "5 月"
  "6 月"
  "7 月"
  "8 月"
  "9 月" 
  "10 月"
  "11 月"
  "12 月"
*/

for 迴圈

for 迴圈比較嚴謹，它把設定初始值、條件判斷 與 更新值 集中在一起設定，讓迴圈的操控次數更容易掌控。

for 迴圈的語法 for (初始化表達式; 條件表達式; 更新表達式) { 條件判斷為 true 執行程式碼 }

同樣用上面 12 個月的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 同樣設定初始值 1 月; 不超過 12 個月; 每執行一次 + 1 */
for (let i = 1; i <= 12; i++) {
  console.log( `${i} 月` );
}

/*
  "1 月"
  "2 月"
  "3 月"
  "4 月"
  "5 月"
  "6 月"
  "7 月"
  "8 月"
  "9 月" 
  "10 月"
  "11 月"
  "12 月"
*/

有沒有發現更簡單了！
大多數人會喜歡使用 let i 來初始化元素，是因為 let 是區塊變數，不會汙染到外面的變數，而 i 是 index 的縮寫，當然你變數名取別的也無所謂就是了！

break & continue

有時候我們並不想讓迴圈直接執行到底，想要跳過幾個選項，或到哪個選項直接停止，就可以利用 break （中斷語法）與　continue （跳過語法），只能使用在循環語法中。
是不是很熟悉～沒錯！就是前面 switch 中的 break 語法，switch 也可以搭配 continue 進行跳過。

break 用法應該都知道了，這裡就介紹 continue 吧～
使用方法也很簡單，假如我想在印出 9 月有幾天紅字：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let holiday = 0;  // 統計假日

/* 同樣設定初始值 1 日; 9 月不超過 30 天; 每執行一次 + 1 */
for (let i = 1; i <= 30; i++) {

  // 1 號是從星期三開始的，判斷如果是星期一到五的話 continue 跳過
  if ( (i + 2) % 7 >= 1 && (i + 2) % 7 <= 5 ) continue;
  
  // 沒被 continue 跳過的，會在這行程式碼進行 + 1
  holiday++;
}

holiday += 1; // 不能忘了中秋節是在星期二

console.log(`紅字有 ${holiday} 天`); // 紅字有 9 天

for 迴圈 與 while 迴圈 的差別

就如同我上一篇所說，既然 for 迴圈 和 while 迴圈 使用的情況與結果都差不多，那為什麼還會存在，一定是有它的意義在！

大多數的情況，都會使用 for 迴圈，是因為 for 迴圈把控制迴圈次數的條件都集中一起寫，閱讀性比較高，適合 條件次數明確 的情況使用。

而當條件次數不明確呢？ 沒錯！就要利用 while 迴圈來達成了！while 迴圈在面對隨機性的時候，只要條件的部分符合，不用像 for 迴圈要設定好三個值，while 迴圈就比 for 迴圈會更加靈活好用且更直覺。

這邊舉一下 008 天 重新認識 JavaScript 書中很好的例子，當大樂透要使用「電腦選號」時，迴圈要如何判定呢？ 規則：「從 1～49中，隨機選9個不重複的號碼」，這就留給各位思考了。

參考資料