JavaScript 中的各種迴圈(for, for in, for of, while, do while)

for 迴圈

for 迴圈是用在有明確範圍時使用,例如從 0 到 4 、Array 的所有內容等。

正向迴圈

從 0 開始,在 5 之前結束,所以是 0, 1, 2, 3, 4
    
for (let i = 0; i < 5; i = i + 1) {
    console.log(i);
}
// 結果: 0, 1, 2, 3, 4
    

i = i + 1 可以縮寫為 i += 1 ,還可以再簡寫為 i++

假設要印出 0, 2, 4, 6, 8 ,中間間隔 2 ,可以使用 i = i + 2 或是 i += 2
    
for (let i = 0; i < 10; i += 2) {
    console.log(i);
}
// 結果: 0, 2, 4, 6, 8
    

反向迴圈

    
for (let i = 4; i >= 0; i = i - 1) {
    console.log(i);
}
// 結果: 4, 3, 2, 1, 0
    

上面的 i = i - 1 同樣可以簡化為 i -= 1 和 i--

跳過(繼續執行)

有許多飯店因為 4 不吉利,所以沒有「4 樓」。假設我們要印出 1 樓到 5 樓,但是遇到 4 的時候要跳過執行的程式碼,直接繼續往下執行迴圈可以使用 continue 關鍵字
    
for (let i = 1; i < 6; i++) {
    if (i === 4) continue;
    console.log(i);
}
// 結果: 1, 2, 3, 5
    

終止迴圈

假設遇到 4 就停止,不再繼續執行,可以使用 break 關鍵字停止執行迴圈
    
for (let i = 1; i < 6; i++) {
    if (i === 4) break;
    console.log(i);
}
// 結果: 1, 2, 3
    

使用總數歷遍 Array

在 Array 中可以透過取得總數的方式來歷遍 Array 的所有項目
    
let array = ['A', 'B', 'C', 'D', 'E'];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}
// 結果: A, B, C, D, E
    

使用 key 歷遍 Array (for in)

使用 for in 的方式會取得 array 的 key,也就是 index,可以透過 index 再去取得 array 中該位置的資料
    
let array = ['A', 'B', 'C', 'D', 'E'];
for (const key in array) {
    console.log(array[key]);
}
// 結果: A, B, C, D, E
// key: 0, 1, 2, 3, 4
    

使用 Array 可能無法很好的解釋為什麼要用 for in ,為什麼不用上面的從 0 到 array.length 的方式就好了?

如果使用物件應該就會比較容易了解 key 的意思
    
let obj = {k1: 'v1', k2: 'v2', k3: 'v3'};
for (const key in obj) {
    console.log(key, obj[key]);
}
// 結果: k1 v1, k2 v2, k3 v3
    

歷遍 Array,直接取得 value(for of)

    
let array = ['A', 'B', 'C', 'D', 'E'];
for (const value of array) {
    console.log(value);
}
// 結果: A, B, C, D, E
    

for of 在物件中的用法稍稍有點不同,會取得 key 和 value
    
let obj = {k1: 'v1', k2: 'v2', k3: 'v3'};
for (let [key, value] of Object.entries(obj)) {
    console.log(key, value);
}
// 結果: k1 v1, k2 v2, k3 v3
    

while 迴圈

和 for 迴圈不同, while 通常沒有預先知道的範圍,而是等待指定條件達成

基本 while 迴圈

while 後面括號內的條件成立才會執行大括號({}) 內的程式碼
    
let i = 0;
while (i < 5) {
    i++;
    console.log(i);
}
// 結果: 1, 2, 3, 4, 5
    

do while 迴圈

do while 迴圈執行後才會檢查條件,條件成立後才會再次執行迴圈
    
let i = 0;
do {
    i++;
    console.log(i);
} while (i < 5);
// 結果: 1, 2, 3, 4, 5
    

上面的 while 和 do while 迴圈看起來沒甚麼不同,來看看下面的範例:
    
let a = 0;
while (a < 0) {
    a++;
    console.log("a", a);
}
// 結果: (沒有輸出)

let b = 0;
do {
    b++;
    console.log("b", b);
} while (b < 0);
// 結果: b 1
    

兩者最大的差別在於 while 迴圈可能不會執行,而 do while 迴圈至少會執行一次

留言