迴圈 (Loop) 在 JavaScript 中,當遇到需要重複做某件事時,是個非常好用的方法。而迴圈又分為幾種不同的方式,本篇將會介紹如何使用比較常見的作法。

迴圈


如果一件重要的事,想要說三次的話,可能會這樣表達:

1
2
3
console.log('很重要'); // "很重要"
console.log('很重要'); // "很重要"
console.log('很重要') // "很重要"

但是在 JavaScript 中,可以使用迴圈來幫助我們更省時省力地來處理這件事:

for 迴圈


for 迴圈的用法:

1
2
3
var i;

for () {}

{ }中,要重複一直做的事情,例如:
{console.log('很重要')}

( )中,要從哪裏開始,到那裏結束,還有每回合會做什麼事情,例如:
for (i = 0; i < 3; i++)
上面那段的意思是:i 從 0 開始計算;到 3 的時候結束;i + 1
寫出來就是這樣:

1
2
3
4
var i
for (i = 0; i < 3; i++) {
console.log('很重要')
} // "很重要" "很重要" "很重要"

也可以這樣寫:

1
2
3
for (var i = 0; i < 3; i++) {
console.log('很重要')
} // "很重要" "很重要" "很重要"

Image

畫紅線的是「初始值」,用來初始化 for 迴圈中的計數器。
雖然在這裡可以用 var 來宣告變數,但要小心,這裡的變數並不是專屬 for 迴圈內的變數,變數 i 的有效範圍其實跟 for 迴圈是相同的。

綠線的部分是「執行迴圈的條件」,指的是當滿足這個條件 (結果為 true) 的時候,就會進入大括號 { } 的區塊,然後執行內部程式。

藍線的部分是,在每一次執行完大括號 { } 區塊的程式碼之後,會執行這段程式碼。

while 迴圈


使用 while 迴圈做出上面的動作:

1
2
3
4
5
6
var i = 0;

while (i < 3){
console.log('很重要');
i++
}

Image

括號 () 內代表的是「執行迴圈的條件」,指的是當滿足這個條件 (結果為 true) 的時候,就會進入大括號 { } 的區塊,然後執行內部程式。

要注意的是在迴圈中,如果第三個條件 i++ 沒寫的話,會發生什麼事呢?
第一圈 i = 0,第二圈 i 沒有 + 1,所以一樣是 0,以此類推會一直無線迴圈,所以要特別注意。

for 的運用


因為 for 迴圈比較常用,所以以下的範例將會使用 for 迴圈來做示範。

for - 加總

下方有一個陣列,裡面紀錄著 iPhone 11 系列的價錢,如果想要使用 for 迴圈把價錢全部加總的話,該怎麼做呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var alliphone11 = [
{
name: 'iPhone 11',
price: 24900
},

{
name: 'iPhone 11 Pro',
price: 35900
},

{
name: 'iPhone 11 ProMax',
price: 39900
}
]

可以設一個變數,值給數字 0,讓它使用 for 迴圈去跑加總:

1
2
3
4
5
6
7
8
var totalPrice = 0;
var alliphonelength = alliphone11.length;

for(var i=0; i<alliphonelength; i++) {
totalPrice += alliphone11[i].price
}

console.log(totalPrice) // 100700

最後 3 次的加總得到 100700。

for 加上判斷式的運用

for 迴圈也可以加入 if 來判斷,例如想找出價格超過 3 萬的 iPhone 的話,就可以這麼做:

1
2
3
4
5
6
7
8
9
10
var alliphonelength = alliphone11.length;

for(var i=0; i<alliphonelength; i++) {
if(alliphone11[i].price > 30000) {
console.log(alliphone11[i].name + '的價格超過 3 萬')
}
}

// "iPhone 11 Pro的價格超過 3 萬"
// "iPhone 11 ProMax的價格超過 3 萬"

break 與 continue

如果在迴圈中,想要提早離開或是跳過其中幾項的話,這時候就可以使用 break 或是 continue。

來看看最近熱門的動物森友會範例,今天如果身上一堆大頭菜想賣的話,可以去 在線等! 動森揪團工具 我賣菜都來這裏,島主都會打上目前菜價多少,要多少張機票一趟。

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
var turnipExchange = [
{
name: '莫妮卡',
sell: 540,
tripTicket: 2
},

{
name: '小潤',
sell: 640,
tripTicket: 4
},

{
name: '傑克',
sell: 600,
tripTicket: 3
},

{
name: '阿保',
sell: 560,
tripTicket: 2
}
]

那麼我們可以來設條件,如果找到符合菜價 550 以上,機票 3 張就可以賣,就不用繼續找下去了。

1
2
3
4
5
6
7
8
var teLength = turnipExchange.length;

for (var i=0; i<teLength; i++) {
if(turnipExchange[i].sell >= 550 && turnipExchange[i].tripTicket <=3) {
console.log('我要跟' + turnipExchange[i].name + '賣菜')
break;
}
} // "我要跟傑克賣菜"

跑完的結果是 - 我要跟傑克賣菜。
如果沒有加上 break 會怎麼樣呢?
如果沒有加上 break 的條件,for 迴圈會一直跑,再繼續找下一個符合條件的並印出來,會是這樣:

“我要跟傑克賣菜”
“我要跟阿保賣菜”

除非你有很多大頭菜啦,不然找一個島主來賣就夠了。


而 break 跟 continue 兩者的功能差別:

  • break 會直接跳離迴圈。
  • continue 會跳過一次,然後繼續下一次迴圈。

看看 continue 的用法:

假設想要出島找居民,以下是我們找的居民:

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
var villagers = [
{
species: 'cat',
name: '艷后'
},

{
species: 'deer',
name: '彼得'
},

{
species: 'koala',
name: '簡培拉'
},

{
species: 'cat',
name: '莎莎'
},

{
species: 'chicken',
name: '烏骨雞'
}
]

我們鎖定的對象是貓,所以只要考慮貓就好,其他動物就不考慮了,所以可以這麼做:

1
2
3
4
5
6
7
8
var length = villagers.length;

for (var i=0; i<length; i++) {
if(villagers[i].species !== 'cat') {
continue;
}
console.log(villagers[i].name);
}

最後得到的是艷后跟莎莎。