---
tags: 投稿文章
---


# 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 入門篇 - 學徒的試煉