iT邦幫忙

2024 iThome 鐵人賽

DAY 17
1

https://ithelp.ithome.com.tw/upload/images/20240829/20166952tYMFYdUtYM.jpg

嗨嗨~大家有沒有一直重複作相同事情的經驗呢~
或許是需要改進的壞習慣,或是讓人讚美的好習慣
突然發現我的人生中,很多時候都陷入迴圈中耶
是應該要跳出迴圈辣~那我們今天就來講迴圈囉!


甚麼是迴圈呢?

迴圈可以重複執行同一組程式碼,幫我們處理不斷重複的事情。
迴圈會檢測條件,如果條件為 true,便會執行程式碼;
接著條件繼續被檢測、程式碼繼續執行,直到條件為 false 為止。

好啦!上面定義很饒口
其實簡而言之就是解決重複發生的事情囉
那我們直接看下去,若有任何想補充或是特殊案例就會放在下篇文章囉:)

常見的迴圈有三種:

for 迴圈

for ([initialExpression]; [condition]; [incrementExpression])
  statement

我們可以來看一下這裡的程式碼,可以知道~
1.initialExpression: 開始情況的表達式
2.condition: 判斷情況
3.incrementExpression: 更新表達式,每次for迴圈中的執行動作完成即會執行一次這個表達式

for (let i = 0; i < 5; i++) {

    console.log(i);  // 輸出 0, 1, 2, 3, 4
}
第一次迴圈:初始化 i = 0,條件檢查:0 < 5 為 true,執行 console.log(i),輸出 0
增值操作:i++,i 的值變為 1。
第二次迴圈:條件檢查:1 < 5 為 true,執行 console.log(i),輸出 1,增值操作:i++,i 的值變為 2
第三次迴圈:條件檢查:2 < 5 為 true,執行 console.log(i),輸出 2,增值操作:i++,i 的值變為 3
第四次迴圈:條件檢查:3 < 5 為 true,執行 console.log(i),輸出 3,增值操作:i++,i 的值變為 4
第五次迴圈:條件檢查:4 < 5 為 true,執行 console.log(i),輸出 4,增值操作:i++,i 的值變為 5
終止條件:條件檢查:5 < 5 為 false,迴圈終止,程序繼續執行(如果有的話)。

while 迴圈


let i = 0;
while (i < 5) { 
    console.log(i);  // 輸出 0, 1, 2, 3, 4
    i++;//i = i + 1 的簡寫,它會將 i 的值增加 1

}

第一次迴圈:初始化 i = 0,條件檢查:0 < 5 為 true,執行 console.log(i),輸出 0,增值操作:i++,i 的值變為 1
第二次迴圈:條件檢查:1 < 5 為 true,執行 console.log(i),輸出 1,增值操作:i++,i 的值變為 2
第三次迴圈:條件檢查:2 < 5 為 true,執行 console.log(i),輸出 2,增值操作:i++,i 的值變為 3
第四次迴圈:條件檢查:3 < 5 為 true,執行 console.log(i),輸出 3,增值操作:i++,i 的值變為 4
第五次迴圈:條件檢查:4 < 5 為 true,執行 console.log(i),輸出 4,增值操作:i++,i 的值變為 5
終止條件:條件檢查:5 < 5 為 false,迴圈終止,程序繼續執行後續代碼(如果有的話)。


那我們來看,對我而言比較少用到的這塊~
do...while 迴圈
類似 while,即使條件為 false 還是會執行程式碼至少一次喔


let i = 0;
do 
{
    console.log(i);  // 輸出 0, 1, 2, 3, 4
    i++;
} while (i < 5);

第一次執行 do 區塊:執行 console.log(i),輸出 0,執行增值操作 i++,使 i 的值變為 1,條件檢查:1 < 5 為 true。因為條件為 true,迴圈再次執行。
第二次執行 do 區塊:執行 console.log(i),輸出 1,執行增值操作 i++,使 i 的值變為 2,條件檢查:2 < 5 為 true,因為條件為 true,迴圈再次執行
第三次執行 do 區塊:執行 console.log(i),輸出 2,執行增值操作 i++,使 i 的值變為 3,條件檢查:3 < 5 為 true,因為條件為 true,迴圈再次執行。
第四次執行 do 區塊:執行 console.log(i),輸出 3,執行增值操作 i++,使 i 的值變為 4,條件檢查:4 < 5 為 true,因為條件為 true,迴圈再次執行。
第五次執行 do 區塊:執行 console.log(i),輸出 4,執行增值操作 i++,使 i 的值變為 5
條件檢查:5 < 5 為 false,因為條件為 false,迴圈終止。

我是超級新手,若有任何建議或是錯誤的部分,歡迎底下留言唷thanks
我們下篇文章見掰掰~

對自己多用點心,日益努力,而後風生水起。盡情玩耍,盡情學習,盡情熱愛,盡情討厭,在需要的時候釋放善意,在必要的時候展現強硬,把這不得不過完的一生,變成值得慶賀的一生。


上一篇
JS漫遊記-16-流程判斷if、else if 、else舉例應用
下一篇
JS漫遊記-18-迴圈應用
系列文
JS漫遊記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言