當我們要重複執行一個語句時，可使用迴圈(Loop)來幫助我們快速又簡潔地重複做某件事。

for Loop語句

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

• initialExpression: 初始式
• condition: 條件式
• incrementExpression: 更新表達式，可以解釋為結束迴圈後的變動

簡單的For Loop範例

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

詳細解說：一開始的初始值i是0，當i<5符合條件時，會執行console.log(i)
之後在執行i++（incrementExpression）重複迴圈，直到i<5為false時停止迴圈。

無窮迴圈

有些時候沒設定好條件式(condition)容易造成迴圈無窮執行，無法跳出語句造成瀏覽器當掉，因此需多加注意條件式(condition)的設定。

for (var i = 0; i<5; i--){
  console.log(i);
}

此語句會造成i一直小於5，因此會不斷無窮迴圈。

while Loop語句

while Loop語句看起來比for Loop語句簡單一點，當條件符合時 (結果為 true) ，就會執行大括號 { } 區塊內的陳述式(statement)，通常使用在不知道明確要迴圈的次數時使用。

while (condition){
  statement
}

簡單的while Loop範例

一開始的初始值n等於0，當n < 3符合條件時，會執行console.log("n is "+ n)，之後再執行n++（incrementExpression）重複迴圈，直到n < 3為false時。

var n = 0;
while (n < 3){
  console.log("n is " + n); n++;
}
//n is 0
//n is 1
//n is 2

do…while語句

do…while語句為while loop的變形版本，差別在於do…while語句會先執行區塊中的語句，再進行條件判斷。

do {
  statement
} while (condition)

遍歷方法

以下會介紹幾種遍歷字串、陣列與物件的方法。

for of語句

for of可以幫助我們在可遍歷的物件(iterable objects)上輸出其中的值(value)，諸如陣列(array)、字串(string)等。

for (variable of iterable) {
  statement
}

使用for of遍歷字串

let str = "happy";
for (let value of str){
  console.log(value)
}

//h
//a
//p
//p
//y

使用for Loop / for of遍歷陣列

使用以下為範例操作：

let weather = [
    ['rain', 'drizzle'],
    ['storm', 'thunder', 'lightning'],
    ['snow', 'snowstorm']
]

for Loop

使用for Loop來操作，會稍稍複雜一些，且會建立i或j這些易讀性低的變數。

for (var i = 0; i < weather.length; i++) {
    const row = weather[i];
    for (var j = 0; j < row.length; j++) {
        console.log(row[j])
    };
}

//rain
//drizzle
//storm
//thunder
//lightning
//snow
//snowstorm

for of

相較於for Loop，使用for of較簡單好讀。

for (let row of weather) {
    for (let eachRow of row) {
        console.log(eachRow)
    }
}
//rain
//drizzle
//storm
//thunder
//lightning
//snow
//snowstorm

使用for of 遍歷物件屬性

使用以下為範例操作：

let students = {
    'Denis Wardle': 100,
    'Kavan Hernandez': 90,
    'Lisa Donovan': 80,
    'Ahyan Huerta': 70,
    'Darlene Nava': 60
}

方法1: 可以使用Object.key()先將物件的key找出，再用key去找出對應的value值。

for (let person of Object.keys(students)){
  console.log(`${person} scored ${students[person]}`);
}
//Denis Wardle scored 100
//Kavan Hernandez scored 90
//Lisa Donovan scored 80
//Ahyan Huerta scored 70
//Darlene Nava scored 60

方法2: 比較聰明簡單的做法，使用Object.entries()可讓程式返回[key, value]給我們。

for (let[key, value] of Object.entries(students)){
console.log(`${key} scored ${value}`);
}
//Denis Wardle scored 100
//Kavan Hernandez scored 90
//Lisa Donovan scored 80
//Ahyan Huerta scored 70
//Darlene Nava scored 60

使用for in 遍歷物件屬性

for (let person in students) {
    console.log(`${person} scored ${students[person]}`);
}
//Denis Wardle scored 100
//Kavan Hernandez scored 90
//Lisa Donovan scored 80
//Ahyan Huerta scored 70
//Darlene Nava scored 60

有關Object.entries()詳細語法請參考：Object.entries() — MDN Web Docs

參考資料：
迴圈 — 從ES6開始的JavaScript學習生活
JavaScript Loops - tutorialrepublic
JS-for...in與for...of的差別 - Kanboo Notes
JavaScript 容易混淆的遍歷方法 - Roya's Blog