JavaScript 迴圈 -親愛的,我逃不出這個循環


迴圈

迴圈是甚麼?就是一直在重複做某件事,而且通常是 遞增遞減,如果條件式是true便會繼續執行,
條件會依植被檢測,直到條件變成false為止。
薯條有三兄弟,常見的迴圈也有三兄弟,究竟是哪三個呢?

  • for迴圈,它包含了三個參數初始值終止條件每次迴圈結束時要做的事
  • while 迴圈,有點像是for迴圈的簡單版,聽說適合使用在迴圈執行次數不確定的時候。
  • do...while 迴圈,跟while迴圈很像,但是他會先執行一次區塊中的程式,再進行判斷,即使條件為false 他還是會執行程式碼至少一次喔!

for迴圈

for (初始值; 終止條件; 結束時的變動){
要執行的程式碼;
}

我今天想要用for迴圈,寫出1~5。

for(var i = 1; i <= 5; i++){        //初始為 1 ;如果 i 小於等於 5 時就會終止 ;每一圈做 i+1
    console.log(i)
}

>1
>2
>3
>4
>5

while迴圈

while( 終止條件 ){
要執行的程式碼;
}

我今天想要用while迴圈,寫出1~5。

var i = 1;

while( i <= 5 ){                 //當 i 小於等於 5 時就不再執行
    console.log(i);
    i++;
}

>1
>2
>3
>4
>5

do...while

do {
要執行的程式碼;
}while ( 終止條件 )

最後用do...while迴圈,寫出1~5。

var i = 1;

do{
    console.log(i);
    i++;
}while(i <= 5);       //達成 i <= 5 就跳出來 

>1
>2
>3
>4
>5

如果我想使用 break ,跳出迴圈也可以寫成這樣

var i = 1;
do{
    console.log(i);
    i++;
    if( i > 5){               //如果 i 大於五
       break;                 //那就跳出這個迴圈  
    }
}while(true);

console.log('J個是:',i);     //這是最後i的數字,因為 i > 5 ,所以跳出迴圈 

>1
>2
>3
>4
>5
>J個是: 6

最後還有兩個迴圈好朋友,他們分別是breakcontinue

  • 使用break的話,他會直接跳離迴圈
  • continue則是會跳過一次,然後繼續下次的迴圈

承上面,如果想使用 break ,跳出迴圈也可以寫成這樣

var i = 1;
do{
    console.log(i);
    i++;
    if( i > 5){               //如果 i 大於五
       break;                 //那就跳出這個迴圈  
    }
}while(true);

console.log('J個是:',i);     //這是最後i的數字,因為 i > 5 ,所以跳出迴圈 

>1
>2
>3
>4
>5
>J個是: 6

如果我今天想要取10裡面的偶數,就可以使用continue這樣寫


for(var i = 1; i <= 10; i++){
    if( i % 2 === 1){
        continue;
    }
    console.log(i);
}

>2
>4
>6
>8
>10

參考資料:
Lidemy 鋰學院-Huli老師的課程
[JS] 迴圈筆記
重新認識 JavaScript: Day 09 流程判斷與迴圈
迴圈

#迴圈 #for #while







你可能感興趣的文章

CSS 語法架構 (Cascading Style Sheets)

CSS 語法架構 (Cascading Style Sheets)

[vue] transition 介紹與巢狀用法

[vue] transition 介紹與巢狀用法

Next.js 入門:從 CRA 與 Prerender 進化至 Next.js 的歷程

Next.js 入門:從 CRA 與 Prerender 進化至 Next.js 的歷程






留言討論





2
2
2