iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
自我挑戰組

追憶JS年華系列 第 10

Day-10 迴圈

  • 分享至 

  • xImage
  •  

正如人需要重複呼吸。在程式中,多數時候都與「重複進行某動作」有關,而這,就是迴圈。視執行次數、過程與結果,還可分為「遞增」與「遞減」兩種情形。

舉例來說,若不使用迴圈,要印出英文字母A~Z,就必須逐行逐句:

console.log(A);
console.log(B);
console.log(C);
console.log(D);
//中略
console.log(Z);

for迴圈

for迴圈是最常見的迴圈類型,其結構為:

for (初始值; 繼續循環的條件; 每回合在 { } 做的事)

舉例來說,一個「初始值為3,值小於10之前繼續循環,每次迴圈加1」的迴圈,可以寫成:

var x;

for (var x = 3; x < 10; x++){
    console.log(x) //印出結果
}

然而,迴圈不總是單純的,若遇到乘法的情形,就會需要雙迴圈。
在雙迴圈中:

  1. 程式會先滿足「外」迴圈的條件
  2. 再進入「內」迴圈做判斷,直到不滿足條件為止。
  3. 回到「外」迴圈做「每回合做的事」,若滿足條件則立刻再進入內迴圈。
  4. 反之亦然。

在下例中,雙迴圈會依序得出此結果:
0、0、0、0、1、2、0、2、4、0、3、6、0、4、8

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

在乘法計算中,「外」迴圈成為「被乘數」(依迴圈條件轉出0~4),而為「內」迴圈成了「乘數」(依迴圈條件轉出0~2)。所以其實際計算了:

0 * 0 = 0
0 * 1 = 0
0 * 2 = 0

1 * 0 = 0
1 * 1 = 1
1 * 2 = 2

2 * 0 = 0
2 * 1 = 2
2 * 2 = 4

3 * 0 = 0
3 * 1 = 3
3 * 2 = 6

4 * 0 = 0
4 * 1 = 4
4 * 2 = 8

依此,可再運用for迴圈寫出九九乘法:

for (var i = 1; i <= 9 ; i = i + 1) {
  for (var j = 1; j <= 9; j = j + 1) {
    console.log(`${i} x ${j} = ${i * j}`)
  }
}

while迴圈

while迴圈也是常用的迴圈類型,其結構為:

宣告初始值
while(條件) {
條件為true時執行的動作
}

舉例來說,一個「初始值為3,值小於10之前繼續循環,每次迴圈加1」的迴圈,可以寫成:

var x = 3;

while (x < 10){
    console.log(x); //印出結果
    x++; //轉一圈x加1
}

可以發現,while(當...如何如何時)迴圈可以用更簡單的語意,達成與for迴圈相同的效果。另一個相同之處,是一定要設定「明確的結束條件」,否則會變成無限迴圈,不斷執行直到吃光資源,當機......

迴圈的停止及比較

一個完整的迴圈,在滿足「明確的結束條件」後,即會停止。若想提早結束,或跳過其中幾次迴圈,就必須使用特殊的方法。這些方法,就是「break」與「continue」。

使用 break 會立即結束迴圈。例如:

var result = 0;
for (var x = 1; x <= 100; x++) {
    result += x //就是 result = result + x 的意思
    if (result >1000) {break;} //結果合計超過1000時,停止
}
console.log(x) //印出合計超過1000的值,是45

使用 continue 會跳過本次迴圈,繼續下一次的。例如:

var result = 0;
for (var y = 1; y < 100; y++) {
    if (y % 2 === 0) {continue} //若y為偶數,就跳過(只挑出奇數相加)
}
console.log(result) //印出1到100之間的奇數相加,結果是2500

在多數情況下,for與while沒有顯著不同,都是迴圈,但使用情境有些微出入:

  • for迴圈,大多用在「執行次數明確」的情境
  • while迴圈,大多用在「執行次數『不』明確」的情境

此一出入,源於兩者結構的根本差異。如前所述,for迴圈擁有「初始值、滿足條件、每回合做的事」三個部份,而while迴圈只擁有「條件」可資控制流程。


上一篇
Day 09 流程控制
下一篇
Day-11 函式入門
系列文
追憶JS年華30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言