JavaScript 的大名鼎鼎 for 迴圈

for 迴圈

到了這一個章節我個人感到相當的高興，因為當初在台大的 Python 課程時，我就是在這一個環節徹底陣亡，雖然當時沒有學好，但至少還是有一點點基礎，也了解到程式語言果然是共通的，頂多是寫法不同而已。

回想六個月前，for (var i = 0; i < 3; i++)，這一小段對我來說根本天書阿，i 為什麼總是等於0，還有到底什麼是i++，現在想起來當時的自己竟然糾結在這個地方這麼久，不免覺得可笑阿！

for 寫法

• 先來一個最簡單的起手式，請瞧瞧以下程式碼。

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

// console 顯示 0
// console 顯示 1
// console 顯示 2
// console 顯示 3
// console 顯示 4

我們用 for 迴圈的方式讓 console 分別顯示 1~5，for 的寫法是這個樣子，for (){}，() 內是 for 要迭代的內容，而 {} 則是要執行的程式。

而 for ( var i = 0; i < 5; i++) 的意思，是 for 要迭代的內容為 (var i = 0; i < 5; i++)，這個 () 內的意思為，宣告一個變數為 i 且 i=0，這就是指迭代的起點，再來用分號 ; 隔開，後接 i < 5，這的意思是說迭代至哪裡為止，也就是終點，再來繼續用一個分號 ; 隔開，後接 i++,這個指的意思就是 i=i+1，所以 i 每一次重新迭代以後都被加了 1，這就是 () 內，跌帶內容的意思。

然後 {} 內要執行的內容為 console.log(i);，就是分別地顯示 i 就是了，所以 console 就依序的顯示了 0、1、2、3、4 了，是不是不難呀，就是這麼簡單呢。

• 若是稍稍的複雜一點呢，來個九九乘法表吧

for (var i = 2; i < 4; i++){
    for (var j = 1; j <10; j++){
        console.log(i+'*'+j+'='+i*j);
    }
}

console 顯示 2*1=2
console 顯示 2*2=4
console 顯示 2*3=6
console 顯示 2*4=8
console 顯示 2*5=10
console 顯示 2*6=12
console 顯示 2*7=14
console 顯示 2*8=16
console 顯示 2*9=18
console 顯示 3*1=3
console 顯示 3*2=6
console 顯示 3*3=9
console 顯示 3*4=12
console 顯示 3*5=15
console 顯示 3*6=18
console 顯示 3*7=21
console 顯示 3*8=24
console 顯示 3*9=27

竟然出現了兩個 for，不是說稍微複雜一點嗎？這樣會不會有點複雜太多了呢？不會不會的，我們靜下心來好好看就好。

今天我們想要呈現一個 a*b=c 的九九乘法表 (2 的倍數與 3 的倍數)，a 是被乘數，b 是乘數，c 是積(小五數學)，所以 a 與 b 是需要被置換的變數值，在程式中我們用 i 與 j 來表示 a 與 b，首先第一個 for (var i = 2; i < 4; i++)，i 從 2 開始止於 3，當第一個 i = 2 開始迭代進去時，就進入到了第二個 for (var j = 1; j <10; j++)，j 從 1 開始止於 9，再進入下一層的 console.log(i+'*'+j+'='+i*j);，此時 i 仍為 2，但 j 卻從 1 開始被迭代到了 9，所以 console 依序的顯示了 2*1=2 ~ 2*9=18，當 j = 9 結束時，程式從第二個 for 跳出回到第一個 for，此時 i = 2 也結束了，開始進入到 i = 3，接著又進去第二個 for，j 又開始從 1 迭代至 9，所以 console 接續顯示 3*1=3 ~ 3*9=27，此時程式結束，跳出。

如何用 for 迴圈依序取用物件內的資料

之前我們曾經介紹過陣列物件是如何存取物件的，現在我們要搭配 for 迴圈的寫法，來依序取出再物件裡的資料，請看下面的程式碼。

var house = [
    {
        person: 'Alec',
        pets: ['小蜜', '波比']
    },
    {
        person: 'Eason',
        pets: ['吉利', '寶寶']
    }
];


for (var i = 0; i < house.length; i++){
    console.log('第' + (i+1) 
                +'個家的主人是 '
                + house[i].person
                +'，他的寵物叫'
                +house[i].pets[0]
                +'與'
                +house[i].pets[1]);
}

// console 顯示'第1個家的主人是 Alec，他的寵物叫小蜜與波比'
// console 顯示'第2個家的主人是 Eason，他的寵物叫吉利與寶寶'

首先我們建立了 var house 的內容，var house 內是一個物件資料，分別記載了兩組陣列，而我們先來一個 for 迴圈起手式 for (var i = 0; i < house.length; i++)，其中 house.length 的意思就是計算 var house 內到底有幾組資料，也就是我們的 i 要迭代幾次的意思，在這個範例裡 house.length的值會等於 2，後面的 console.log 內，我們就組了一個字串，其中 house[i].person，就會依序地讀取出 person 的值，而 house[i].pets[0] 與 house[i].pets[1]，則依序讀出了 pets 的值，當 i = 0 時，就會將第一組陣列的資料帶入 (Alec組)，所以 console 就顯示了 第1個家的主人是 Alec，他的寵物叫小蜜與波比，而 i = 1時，第二組陣列 (Eason) 組就會被帶入，所以 console 就顯示了 第2個家的主人是 Eason，他的寵物叫吉利與寶寶。

若是我們只要撈出來物件中的部分資料而已怎麼辦，這時候就需要 for 搭配 if 了

var companies = [
    {
        boss:'Alec',
        staff:50,
        asset:20000000
    },
    {
        boss:'Rita',
        staff:150,
        asset:12000000
    },
    {
        boss:'Eason',
        staff:500,
        asset:400000000
    }
];

// Question：請問誰的公司員工數量超過 200 位以上？

for (i = 0 ; i < companies.length ; i++){
    if(companies[i].staff > 200){
        console.log(companies[i].boss
        +' 的公司員工超過 200 位以上');
    }else{
        console.log('沒有公司符合這個條件');
    }
}

// console 顯示 'Eason的員工超過200位以上'

//Question：請問誰的公司員工數量少於 120 位，並且資產超過 15000000 元？

for (i = 0 ; i < companies.length ; i++){
    if(companies[i].staff < 120 
        && companies[i].asset >15000000){
        console.log(companies[i].boss
        +' 的公司員工少於 120 位並且公司資產超過 15000000 元');
    }else{
        console.log('沒有公司符合這個條件');
    }
}

// console 顯示 'Alec 的員工少於 200 位並且公司資產超過 15000000 元

一樣的，我們先 var comapnies 一個物件資料，裡面紀錄了三間公司的資訊，老闆、員工數及資產，今天我們提出了兩個問題。

• 第一個問題是：請問誰的公司員工數量超過 200 位以上？

透過 for 迴圈加上 if，我們可以從物件中撈出答案來，仍然先來一個 for (i = 0 ; i < companies.length ; i++) 起手式，再來後接if 條件式，條件是什麼呢？這個條件 (companies[i].staff > 200)，用 companies[i].staff 撈出每一間公司的 staff 數量一一比對是否有大於 200，若有即符合，便可執行後續程式 console.log(companies[i].boss+' 的公司員工超過 200 位以上');，若都無符合此條件的話，else{console.log('沒有公司符合這個條件');}，就會顯示 沒有公司符合這個條件 的文字，於是我們得到了答案，console 顯示 Eason的員工超過200位以上。

• 第二個問題是：請問誰的公司員工數量少於 120 位，並且資產超過 15000000 元？

這個問題只有 if 內的條件寫法不一樣，其他都一樣，條件改為 (companies[i].staff < 120 && companies[i].asset >15000000)，companies[i].staff 依序撈出每間公司的 staff 數量比對是否少於 120，並且 companies[i].asset 再撈出公司的資產，並一一比對是否大於 15000000，若這兩個條件均同時成立，就執行後續程式碼 console.log(companies[i].boss +' 的公司員工少於 120 位並且公司資產超過 15000000 元');，若都無符合此條件的話，else{console.log('沒有公司符合這個條件');}，就會顯示 沒有公司符合這個條件 的文字，所以我們得到了答案，console 顯示 Alec 的員工少於 200 位並且公司資產超過 15000000 元。

利用 for 來加總數量

利用 for 迴圈，我們還可以逐一的加總裡面的數量來做統計，現在我們利用同一份物件資料來做計算。

var companies = [
    {
        boss:'Alec',
        staff:50,
        asset:20000000
    },
    {
        boss:'Rita',
        staff:150,
        asset:12000000
    },
    {
        boss:'Eason',
        staff:500,
        asset:400000000
    }
];

// Question：請問這三間公司的員工合計是多少？

var staffTotal = 0;

for (i = 0; i < companies.length; i++){
    staffTotal += companies[i].staff;
}

console.log('這 ' + companies.length + ' 間公司的員工數量合計為 '+ staffTotal + ' 位');

// console 顯示 '這 3 間公司的員工數量合計為 700 位'

• 問題：請問這三間公司的員工合計是多少？

我們先 var staffTotal = 0 這個變數，是要給三間公司合計用的，先給他一個起始值為 0，然後開始我們的 for 迴圈，for (i = 0; i < companies.length; i++)，再來將 staffTotal 逐一的加總起來，staffTotal += companies[i].staff;，這裡要解釋一下 += 是甚麼意思？

x += y → x = x+y (簡單來說就是，新的 x 是舊的 x 加上 y 的值的意思)

所以當放進 for 迴圈內時，+= 可以逐一的累加，讓變數一直成為新的值，staffTotal += companies[i].staff;，staffTotal 原本是0，透過 += 並且用 companies[i].staff; 將值依序取出並且加上，最後 staffTotal 就變成了 (50+150+500=700)，最後用 console.log 組一個字串，console 就顯示這 3 間公司的員工數量合計為 700 位 了。

for 與 break 的結合

有時候，我們不想要 for 迴圈全部跑完，當它滿足了條件以後，我們就想要他停止運行後面的程式直接跳出，這時就可以搭配 break來應用。

var loanList = [
    {
        bankName:'匯豐銀行',
        interestRate:0.04,
        quota:2000
        },
    {
        bankName:'星展銀行',
        interestRate:0.02,
        quota:1500
    },
    {
        bankName:'花旗銀行',
        interestRate:0.03,
        quota:1800
    }
];

// Question：今天想要和銀行貸款 1600 萬元，請問這三間銀行，哪一個額度足夠並且利率最低呢？

for (var i = 0; i < loanList.length; i++){
    if (loanList[i].quota > 1600){
        console.log(loanList[i].bankName + '的額度已足夠');
        break;
    }
}

// console 顯示 '匯豐銀行的額度已足夠'

• 問題：今天想要和銀行貸款 1600 萬元，請問這三間銀行，哪一個額度足夠呢？

當然，我們先 var loanList 了一個物件，內存了三間銀行的貸款資料，再來我們用 for 迴圈來一一比對，起手式在這裡 for (var i = 0; i < loanList.length; i++)，然後 if 的條件這麼下 (loanList[i].quota > 1600)，這樣就可以比對出哪一間銀行額度是足夠的了，再來我們組一個字串來顯示哪一間銀行額度足夠，我們用肉眼觀察可以發現匯豐銀行和花旗銀行的額度是足夠，但是我們只需要和一間銀行貸款就好，所以條件符合就可以不用找另外一間了，所以我們配合 break 語法放在最後面，這樣 console 就只會顯示 匯豐銀行的額度已足夠 了。

結語

以上就是今天介紹與說明的 JavaScript for 迴圈，謝謝大家。

參考資料

• 六角學院課程：JavaScript 入門篇 - 學徒的試煉