迴圈（loop）

迴圈的目的是重複執行某個動作，例如按下開始鈕開始報數 1、2、3、…，直到完成目的才停止。
JS 提供了許多簡便的方法來完成這些重複的事。

for

會一直重複執行，直到條件被滿足。
可指定迴圈的執行次數。

// 語法
for ([initialExpression]; [condition]; [incrementExpression]) {
	statement;
}

• initialExpression：
  • 最初開始時的表達式
  • 通常是用來作為迴圈計數器的初始值。
• condition：
  • 若 condition 為 true，迴圈會繼續進行
  • 若 condition 為 false，迴圈中止。
  • condition 若被省略，就會被當作 true。
  • 通常做為迴圈的執行圈數最大值。
  • 有多個條件需判斷時，記得使用邏輯運算子（ &&、||、! ）連接，並用逗號分隔不同表達式
• incrementExpression：
  • 更新表達式。
  • 每次完成迴圈，都會執行一次 incrementExpression。
  • 通常用來修改迴圈計數器。
• statement：若只有一行，可省略大括號 { }

來個練習吧！

// 問題 from GPT
// 創建一個陣列，包含一些數字。使用 for 迴圈計算這些數字的總和，然後將結果顯示在控制台上。
let arr = [1, 5, 10, 20, 35];
let res = 0;

for (let i = 0; i < arr.length; i++) {
  res = res + arr[i];
}

console.log(res); // 71

for...in

• 使用在物件上，將迭代物件內的可列舉的屬性（enumerable properties）。
• 不建議使用在陣列上，因為陣列是有順序性的。
• 白話就是把可迭代物件內的 key 拉出來的方法；拿到 key 了後，就可以拿到 value 了。
• key 的屬性類型若是 symbol，便無法被迭代。
• 大多數物件的屬性都是可列舉的。

// 語法
for (key in obj) {
	statement
}

來個練習吧！

// 問題 from GPT
// 問題：請使用 for...in 迴圈遍歷以下物件 tag 的所有屬性，並將它們輸出到控制台。
const obj = {
  a: "A",
  b: "B",
  c: "C"
};

for (let key in obj) {
  console.log(`${key}：${obj[key]}`);
}
/*
a：A
b：B
c：C
*/

for...of

• 將可迭代物件的 value 取出的方法。
• 可迭代物件的範圍包含陣列、字串、Map、Set、arguments 等等

for (variable of iterable) {
    //statements
}

與 for...in 的差別？

• for...in 拿到的是無序迭代物件的 key；若是陣列，key 指的是 index。
• for...of 拿到的是迭代物件的 value。

// 例子 from MDN
let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); // logs 3, 5, 7
}

來個練習吧！

// 問題 from GPT
// 問題：請使用 for...of 迴圈遍歷以下字串 text 中的字元，並將它們輸出到控制台。
const text = "Hello!";

for (let word of text) {
  console.log(word);
}
/*
H
e
l
l
o
!
*/

break

• 終止迴圈，並將控制權交給迴圈後的句子
• 若在巢狀迴圈中，指的是跳出當前這層迴圈

來點例子吧！

// 範例來自 MDN
let i = 0;

while (i < 6) {
  if (i === 3) {
    break; // i=3 時，強制終止並跳出迴圈
  }
  i = i + 1;
}

console.log(i); // 3

continue

• 回到下一次迴圈語句的起始，無視 continue 後面的句子。
• 能少用就少用，會破壞迴圈的執行結構

來點例子吧！

// 範例來自 MDN, 略加修改
var i = 0;
var n = 0;
while (i < 5) {
  console.log("迴圈開始");
  i++;
  console.log("i", i);
  if (i == 3) {
    continue;
  }
  n += i;
  console.log("n", n);
}
/*
迴圈開始
i 1
n 1
迴圈開始
i 2
n 3
迴圈開始
i 3
迴圈開始
i 4
n 7
迴圈開始
i 5
n 12
*/

while

只要 condition 為 true，就會一直執行 statement。
無法指定迴圈次數，小心無限迴圈。

while (condition)
  statement

• 若 condition 為 false 時，會將流程交給 while 後面的句子。
• 需要執行多個句子時，可以用 { } 將句子們包起來。
• 為了避免無限迴圈，定義條件時要多注意。

來個練習吧！

// 問題 from GPT
// 問題：使用 while 迴圈計算 1 到 100 之間的所有偶數的總和。
let sum = 0;
let num = 2;

while (num <= 100) {
  sum = sum + num;
  num = num + 2;
}
console.log(`總和為 ${sum}`); // 2550

do...while

會反覆執行直到條件為 false 為止。
小心無限迴圈。

// 語法
do {
  statement
}
while (condition);

• 會先執行 statement，才檢查 condition。
• condition 為 false 時，會結束迴圈，並將流程交給 do...while 後面的句子。
• 若要執行多個 statement，最外層用大括號 { } 包起即可。

來個練習吧！

// code from MDN
var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

參考資料

• Loops and iteration - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#for_%E9%99%B3%E8%BF%B0%E5%BC%8F
• Loop 迴圈 - JavaScript 教學｜ALPHA Camp - JavaScript 入門指南，https://javascript.alphacamp.co/loop.html
• for 語法 - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/for
• do...while 語法 - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/do...while
• while 語法 - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/while
• for...in - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/for...in
• break - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/break
• continue 語法 - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/continue
• 迴圈 · 從ES6開始的JavaScript學習生活，https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/loop.html