for 與 break 運用

Posted on In

這裡要介紹 for 搭配 break 的用法、使用時機

在farms陣列中，有三個物件

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var farms = [
    {
        farmer: '卡斯伯',
        field: 6,
        chick: 200,
        banana: 5000
    },
    {
        farmer: '查理',
        field: 10,
        chick: 40,
        banana: 1000
    },
    {
        farmer: '約翰',
        field: 8,
        chick: 120,
        banana: 3215
    }
]

🎃 先計算出陣列中的「資料有幾筆」： var farmsTotal = farms.length;

如果我在「for迴圈」裡面，帶入console.log(i);，那麼這個「for迴圈」就會「跑三次」（i依序會帶入 0, 1, 2）

JS:

1
2
3
4
5
var farmsTotal = farms.length;

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

只跑一次for迴圈：加上「break;」

🎃 我想讓「for迴圈」只「跑一次」，就可以在大括號裡面加上「break;」

🍋 利用「break;」語法，來跳出迴圈

🍋 「break;」代表：程式碼「從上到下」依序執行到「break;」時，就不會再繼續執行後面的「for迴圈」了

JS:

1
2
3
4
5
6
var farmsTotal = farms.length;

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

break;使用時機

什麼情況下，會需要使用到break;呢？

請看以下的範例說明

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var farms = [
    {
        farmer: '卡斯伯',
        field: 6,
        chick: 200,
        banana: 5000
    },
    {
        farmer: '查理',
        field: 10,
        chick: 40,
        banana: 1000
    },
    {
        farmer: '約翰',
        field: 8,
        chick: 120,
        banana: 3215
    }
]

在farms陣列中，有三個物件（三個農場）

🎃 目的：我要找一個農場，買 50 隻小雞

🎃 在for迴圈的大括號裡面，先用if寫條件：小雞要「大於 50 隻」： if(farms[i].chick > 50)

  • 用console.log()將有符合if條件的「farmer名字」列出來

🎃 加上「break;」：一旦找到「小雞 > 50 隻」的農場，就可以停止「for迴圈」了

1
2
3
4
5
6
7
8
9
10
// 我要找一個農場，買 50 隻小雞

var farmsTotal = farms.length;

for(var i = 0;i < farmsTotal;i++){
    if(farms[i].chick > 50){
        console.log(farms[i].farmer+'的小雞有大於 50 隻');
        break;
    }
}

🎃 雖然符合if條件的有兩個農場（‘卡斯伯’ 、 ‘約翰’），但是因為有加上break;，「for迴圈」找到第一個結果後（只跑了一次），就停止了

可以看到，在 Console 就只會顯示一個結果「卡斯伯的小雞有 > 50 隻」

完整 JS 程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var farms = [
    {
        farmer: '卡斯伯',
        field: 6,
        chick: 200,
        banana: 5000
    },
    {
        farmer: '查理',
        field: 10,
        chick: 40,
        banana: 1000
    },
    {
        farmer: '約翰',
        field: 8,
        chick: 120,
        banana: 3215
    }
]

// 我要找一個農場，買 50 隻小雞

var farmsTotal = farms.length;

for(var i = 0;i < farmsTotal;i++){
    if(farms[i].chick > 50){
        console.log(farms[i].farmer+'的小雞有 > 50 隻');
        break;
    }
}

數字做運算（在for迴圈裡面）

接續上面的結果，我想要知道：
'卡斯伯’的農場，賣出 50 隻小雞後，還剩下幾隻小雞？

🎃 把小雞數量「減 50」： farms[i].chick -= 50;

JS:

1
2
3
4
5
6
7
8
9
10
11
12
// 我要找一個農場，買 50 隻小雞

var farmsTotal = farms.length;

for(var i = 0;i < farmsTotal;i++){
    if(farms[i].chick > 50){
        console.log(farms[i].farmer+'的小雞有 > 50 隻');
        farms[i].chick -= 50;
        console.log(farms[i].farmer+'的小雞還剩下'+farms[i].chick);
        break;
    }
}

🎃 在 Console 就會顯示「卡斯伯的小雞還剩下150」（200 - 50 = 150）

🎃 這種數字運算的做法，也可以用在：設計遊戲時，答對一題「+ 10 分」