iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

我的JavaScript日常系列 第 16

JavaScript Day 16. 迴圈(for、while、do while、break、continue)

  • 分享至 

  • xImage
  •  

今天要寫的內容,是我完全沒有練習過,也沒有在課堂上學過的方法,那麼為什麼我還是要寫這篇文章呢?原因是因為,即使在我的課程裡 for 迴圈算是被 forEach 取代,我卻仍然可以在各個地方看到 for 迴圈,這其實讓我蠻慌的....

因此今天我就逼自己自學 for 迴圈了,嚴格來說在寫這篇文章前,其實已經有對 for 迴圈做了一點筆記,但因為疏於練習,其實也忘的差不多了(汗),今天就當作複習吧。

迴圈

重複執行一組程式碼,並且檢測條件,如果檢測結果為 true 就會繼續執行,直到檢測到 false 才會停止執行;我們可以想像成倉鼠跑滾輪,如果都沒有任何 false,就會無限的跑下去。

迴圈有很多種形式,但在這裡只會拿幾個出來討論:

  1. for
  2. while
  3. do...while
  4. break
  5. continue

for

當變數值與設定值的條件符合就會執行,直到不符合為止。

語法:

for ( 變數 = 初始值 ; 變數 < 條件值 ; 變數 + 步進值 ) {
 // 要執行的程式碼
}

執行 for 迴圈時,會有以下過程:

  • 如果條件符合,變數 = 初始值便會被執行。變數的部分可以自定義。
  • 變數 < 條件值 這裡的條件會先被檢測,如果符合 true 便會執行,如果是 false 便會終止迴圈,這邊如果沒有設定條件,則會形成無限迴圈。
  • 變數 + 步進值 會對每一次的執行產生變化。

簡易實例操作:

我有一座農場,裡面有 400 隻豬、700隻雞、2000 隻牛、10 隻羊,我的農場動物加總。

let farmAnimals = [ 400, 700, 2000, 10 ];
let animal_num = 0;

for ( let i=0; i<farmAnimals.length; i++) {
    animal_num += farmAnimals[i];
}

console.log( animal_num ); // 3110

如果情境改成這樣:

我有一座農場,裡面有 400 隻豬、700隻雞、2000 隻牛、10 隻羊,除了豬以外我有多少動物。

let farmAnimals = [ 400, 700, 2000, 10 ];
let animal_num = 0;

for ( let i=1; i<farmAnimals.length; i++) {
    animal_num += farmAnimals[i];
}

console.log( animal_num ); // 2710

以上兩個範例,大略的解釋一下發生了什麼事,第一個範例 animal_num = 0 因此我們初始值為 0 ,i=0 於是從 farmAnimals 陣列第 0 筆資料開始跑,跑到 farmAnimals 陣列資料的最後一筆數量 10,並且設定跑到第四次就會停止,也就是上面 i<farmAnimals.length 這個條件,在步進值(每一次迴圈產生變化)的地方設定 i = i + 1 最後獲得了所有資料的加總。

那麼第二個範例為什麼數字變了?因為 i=1 的情況下,是從 farmAnimals 陣列第 1 筆資料開始跑,因此豬的部分就沒有被計算進去了。

while

只要指定的條件為 true 就執行,直到條件不符合為止,不過與 for 迴圈不同的地方是,for 適合需要跑完全部陣列的情況;while 比較適合用在以條件當作終止條件的時候,譬如:比較大小、布林值。

語法:

while (condition)
  statement

直接進行範例:

// 範例:印出 1 ~ 5
let i = 1;
// i <= 5 為終止條件
while (i <= 5){
   console.log(i);
   i++
}
//1, 2, 3, 4, 5

這裡要注意的是,如果底下 i++ 忘記放,會造成嚴重的後果,這個迴圈會不停的運轉,瀏覽器會直接爆炸,因此在練習的時候也要注意不要忘了寫上去。

這個範例為,只要 a 小於 3,便會不斷的重複執行:

let a = 0;
let b = 0;
while (a < 3) {
  a++;
  a += b;
}

每一次疊代都會增加 a 的值,並且把值加到 b 上面,分析起來為以下狀況:

  • 第一次迴圈 a = 1、b = 1
  • 第二次迴圈 a = 2、b = 3
  • 第三次迴圈 a = 3、b = 6

所以在第三次會判斷 a 不小於 3 (不是 true),而終止迴圈。

每進入一次循環體我們就稱為一次疊代,假設進入三次就稱為三次疊代

do while

while 是先檢查終止條件,再執行迴圈;do while 則是先執行迴圈,再檢查終止條件,因此 do while不管條件是否為 true,都會至少跑一次,接著 while 判斷條件是否要繼續執行,若要執行就會進行第二輪,不執行則跳出迴圈;要注意的是,while 的小括號是迴圈結束的地方,後面要加上分號,並且要確認無誤後再開始測試迴圈。

語法:

do
  陳述式
while (條件式);

這個範例中,do 迴圈重複至少一次,並且他會繼續不斷重複到 a 不再小於 5。

let **a = 0;
do {
  a += 1;
  console.log(a);
} while (a < 5);**

break

break 意思為中斷整個迴圈,當我們希望他滿足條件就停下來而不用全部跑完的時候,就可以使用 break。

範例:

let farmAnimals = [
    {
        animal: 'pig',
        num: 400,
    },
    {
        animal: 'chick',
        num: 700,
    },
    {
        animal: 'cow',
        num: 2000,
    },
		{
        animal: 'sheep',
        num: 1000,
    }
]

我們先建立一個陣列資料,然後示範一個正常能夠撈出資料的迴圈,可以看見他會跑完所有的資料:

for(var i=0; i<farmAnimals.length; i++){
    console.log(farmAnimals[i].num); // 400, 700, 2000, 10
}

假如我們希望這個迴圈只幫我們撈出豬,這時候就可以使用 break 方法。

for(let i=0; i<farmAnimals.length; i++){
    if(farmAnimals[i].num < 1000){
        console.log(farmAnimals[i].animal);
        break;
    }
}

另外,這裡不會跳出數量也小於 1000 的雞,是因為迴圈在跑了一次之後,已經達成了條件並且被中斷,因此不會再跑第二次,此時就不會檢測到第二筆雞的資料了。

continue

continue 會滿足條件後直接繼續下一次的迴圈。

我們知道除了 break 方法以外,其他迴圈方法都會跑滿每一個步驟,在這裡 continue 則是只跑滿足的條件。

舉例來說,我有一座農場,農場裡有好幾座場房,每一個場房都要隔出三個區塊,這三個區塊裡面至少要有一個區塊是養雞,以其他迴圈來說,100個場房裡面的三個區塊都會跑過一遍,而 continue 則是在一個場房的區塊裡面只要檢查到有一區是養雞的,則會跳過另外兩區,直接檢查下一間場房,範例如下:

for(let i = 0; i <= 100; i++){
    console.log(`正在找第 ${i} 間場房`);
    if(左邊){
        console.log("找到了,下一間")
        continue;
    }
    if(中間){
        console.log("找到了,下一間")
        continue;
    }
    if(右邊){
        console.log("找到了,下一間")
        continue;
    }
    console.log("沒有雞")
}

使用 continue 如果在一間場房裡面發現一個區塊有養雞,就會直接進行下一間,不會再跟你說「還有兩區沒有養雞哦」,但是跑完 100 間場房後發現都沒有養雞的時候,就會跟你說「你這個農場都沒有雞」。

為了介紹迴圈方法,自己也在撰寫的過程中努力的嘗試理解,很開心替自己的小腦袋增加了新的知識。另外,在使用迴圈的時候,為了避免無限迴圈,確定迴圈內的判斷式終究會變成 false 這件事真的很重要,否則造成程式大當機可是會很麻煩的,我在測試的過程中有好幾次瀏覽器動彈不得,這篇文讓我不停的冷汗直流.......

參考資料:
MDN
30 天 Javascript 從入門到進階:迴圈
迴圈筆記


上一篇
JavaScript Day 15. every() 與 some()
下一篇
JavaScript Day 17. 認識物件
系列文
我的JavaScript日常31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言