iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
1
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 6

06 迴圈

前言

因為之後舉例會提到迴圈的概念,為了讓後面講解更順暢,今天我們要暫時離開一下 JS 學徒特訓班教學影片和練習題,聊聊 for 與 while 迴圈。

即使不會 JS ,相信你或多或少曾經聽過這個名詞。迴圈是指不停的輪迴(?),直到因為某個緣故,例如達成條件,讓迴圈停下來,基本上就跟某些恐怖片或懸疑片的設定差不多(喂)。如果沒有讓這個輪迴停下來,迴圈會變成無窮迴圈,電腦一直跑同樣的程式跑到掛掉。相信你不會希望陷入這種鬼打牆的困境,那我們來一起找到迴圈中的綠洲吧!

注意,今天的文章會運用單元運算子和指派運算子,如果還不知道這兩個是什麼,請先回去看 03 運算子!

while 迴圈

while 迴圈的語法相當好懂:

while(判斷){
    符合判斷時,要做的動作;
}

如果判斷的結果是 true ,就執行{}裡的動作,如果是 false ,就跳過整段程式碼不執行。讓我們直接來寫練習題吧!我想要設計一個程式碼,讓他能依序跳出 0<5 、 1<5 、 2<5 、3<5 、 4<5 ,可以怎麼寫呢?

let a = 0; //宣告a一開始是 0
while(a<5){ //當a<5
    alert(a+"<5"); //依序跳出a<5
    a++; //並讓a+1成為新的a,繼續跑這個while迴圈
};

上面的範例,會依序從 0 開始跑,因為 0<5 ,因此執行{}裡的內容,跳出 0<5 ,並讓 0+1 後成為新的 a 。新的 a 是 1 ,還是小於 5 ,所以會繼續跑{}的動作。直到 a 變成 4 ,並跳完 4<5 , 4+1 成為 5 ,離開{}後因為不再小於 5 ,不會再執行內容,迴圈終止。

應該不難理解吧?那我們來練習另一題。我想設計一個程式,讓 1 一路加到 50 ,然後讓電腦直接告訴我答案,要怎麼寫?

想到了嗎?我要公布答案囉。

let sum = 0; //宣告總數一開始是0 
let i =1; //i是要加的數,並設定從1開始加

while (i<=50){ //當要加的數字小於等於50就繼續加
    sum += i; //總數=本來的總數加上要加的數
    i++; //i加一
};

alert(sum); //印出總數

在這個進階題中,我們需要宣告兩個東西:總數和要加的數,總數就等於之前的總數加上要加的數。再運用 while 迴圈,控制要加的數字不要超出 50 的範圍,便能輕易得到答案啦!

for 迴圈

學會比較容易看的 while 迴圈後,讓我們進入 for 迴圈。

for(初始;判斷;迴圈){
    符合判斷時,要做的動作;
}

一開始看語法可能會覺得很複雜,但讓我們回頭拆解剛剛 while 的例題,把它改寫成 for 迴圈,就能理解 for 迴圈在說什麼了。

let sum = 0; //宣告總數一開始是0 
let i =1; //這是初始

while (i<=50){ //i<=50是判斷
    sum += i; //這是要做的動作
    i++; //這是迴圈
};

alert(sum); //印出總數

我想上面比較難判斷的應該是要做的動作和迴圈的部分。可以把迴圈理解成在{}繞出來後會先執行的區塊,執行這部分後才會去進行下一階段的判斷。讓我們開始改寫吧:

let sum = 0; //宣告總數一開始是0 

for(i=1; i<=50; i++){
    sum += i;
}

alert(sum); //印出總數

是不是比 while 迴圈的寫法簡潔多了呢?

break 和 continue

最後,要講的是能強制跳出迴圈的 break 和能強制進行下次迴圈的 continue 。單純講上面的定義應該沒什麼問題,問題是該怎麼應用。讓我們來舉個例子:

let x=0;
while (x<=500){
    if(x==10){
        break;
    }
    x++;
}

你覺得上面的程式跑完以後, x 會是多少呢?

答案是 10 。其實這題很簡單,宣告 x 一開始是 0 ,當 x 小於等於 500 時進入迴圈,如果 x 等於 10 ,迴圈就強制停止,如果不等於, x 就依序加一。也就是 x 會從 0 一路變成 10 之後,迴圈強制被停止。

continue 也來練習看看吧!假設我現在想設計一個迴圈,可以知道 0-30 間有多少不能被 3 整除的數字。我可以利用 continue ,讓它只要不能被整除,次數就加一。能被整除,就強制進行下一次迴圈,不要讓次數加一。

這裡整除會用到 % 這個符號,舉例來說,我要寫能被 3 整除可以這樣表示:z%3==0

那麼就可以開始寫了!

let sum=0; //次數一開始為 0 
for (let z=0; z<=30; z++){
    if(z%3==0){ //能被3整除
        continue; //強制回到for (let z=0; z<=30; z++)這句
    }
    sum++; //次數加一
}

再次強調一下,在上面的例題中,符合條件 z%3==0 時強制進行下一次迴圈,並不是讓 sum++ ,而是回到迴圈頭for (let z=0; z<=30; z++)這句。

此外也需注意, continue 只能在 while 、for 、 do/while 、 for/in 中使用。

學習與參考資料

網頁前端工程入門:Javascript 流程控制 - 迴圈 By 彭彭:https://www.youtube.com/watch?v=uvLMIXuuc-8&list=PL-g0fdC5RMbpqZ0bmvJTgVTS4tS3txRVp&index=12
W3school:https://www.w3school.com.cn/js/js_break.asp
js跳出迴圈的方法區別(break,continue,return)Script:https://www.itread01.com/p/1001077.html


上一篇
05 if 判斷式
下一篇
07 函式
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言