iT邦幫忙

2021 iThome 鐵人賽

DAY 9
1
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 9

[想試試看JavaScript ] for迴圈

迴圈

for 迴圈

for 迴圈,很適合用來處理數值會依照次數,有「遞增」或「遞減」的變化
範例如下

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

會印出

// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// 10

語法如下

for(初始值;條件;結束時變動){ //做某事 }
for(var i=0;i<=10;i++){ // 做某事 }

for 後面的小括弧要輸入三種資料,分別是初始值、條件、結束時變動
初始值:用來初始化for 迴圈中的計數器
條件:指的是當滿足這個條件(結果為true),就會進入大括號執行裡面的程式碼
結束時變動:就是每次執行完大括號裡面的程式碼就會執行這裡面的程式碼

要一次了解要輸入的三種資料有點困難,可以先從條件來了解
假設我要寫一個1到10的迴圈,使用 while 可以這樣寫

//while(判斷){
//    要執行程式碼
//}
var n=1;
while(n<=10){
    console.log(n);
    n++;
}

如果使用 for 迴圈改寫

var n=1;
for(;n<=10;){
    console.log(n);
    n++;
}

我將 while 改寫成 for
小括弧我將 (n<=10) 改寫成 (;n<=10;)
條件前面的初始值和結束時變動先空著(不過前後要記得打分號),一樣可以印出 1 到 10
我們可以知道for迴圈中的條件就等於while迴圈的判斷,只要滿足條件,就會進入大括號執行裡面的的程式碼。
我們可以再進一步的再改一下

for(var n=1;n<=10;n++){
    console.log(n);    
}

初始值放進 var n=1
結束時變動放進 n++
這樣就跟常見的 for 迴圈語法是一樣的
平常還是建議將初始值、結束時變動寫在小括弧裡面,比較方便閱讀。
for 迴圈和 while 迴圈好像都是在做一樣的事情。不過,不同的工程師在不同的狀況,會使用不同的迴圈語法,所以為了增加我們閱讀別人程式碼的速度,所以我們還是要盡量熟悉這兩種語法。

break 與 continue

學了 while迴圈與 for迴圈
假設我們想跳過其中幾次迴圈,或者提早離開迴圈,有什麼方式呢?

我們可以使用 breakcontinue

  • break 會直接跳離迴圈
  • continue 會跳過一迴圈,繼續執行下一次

我想印出1到10,不過如果遇到 5 的話就不印出來離開迴圈,不再繼續
可以使用 break 搭配if這樣寫

for(var i=1;i<=10;i++){
    if(i==5){ // 如果 i 等於 5,就跳出
       break;
    }
    console.log(i);
}

就會印出1、2、3、4
那麼如果是,我想印出1到10,不過如果遇到 5 的話就不印出來,但我想繼續印出接下來的數字
那我就可以使用 continue

for(var i=1;i<=10;i++){
    if(i==5){ // 如果 i 等於 5,就從這裡跳過一次迴圈,繼續執行下一輪迴圈
        continue;
    }
    console.log(i);
}

印出1、2、3、4、6、7、8、9、10

再來一個練習
假如,我想印出1到10之間的偶數
我可以這樣寫

for(var i=1;i<=10;i++){
    if(i%2 == 1){ // 如果 i 除以 2 會餘 1,就是奇數,那麼就跳過這一輪
        continue;
    }
    // 符合條件的都是可以被 2 整除,也就是偶數。
    console.log(i);
}

雖然,看到這裡可能不太理解為什麼會需要做這樣的篩選,不過後面稍微比較複雜的程式,就可以使用這些技巧
例如,班上有10位同學,座號1到10,準備要打籃球打算分成兩個隊伍,奇數座號同學加入藍隊,偶數座號同學加入紅隊。
當我們需要篩選奇數或偶數,就可以用這種方式。


上一篇
[想試試看JavaScript ] 流程控制 迴圈
下一篇
[想試試看JavaScript ] 函式
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30

尚未有邦友留言

立即登入留言