iT邦幫忙

2024 iThome 鐵人賽

DAY 10
1
JavaScript

從零開始學習JavaScript 30天系列 第 10

[Day 10] JavaScript 流程控制:迴圈指令

  • 分享至 

  • xImage
  •  

Hi,大家好,我是Tony,是一個對於程式設計有一點點概念的新手。

挑戰來到第十天啦!已經完成三分之一了,加油~
今天的學習內容是:JavaScript流程控制:迴圈指令

學習內容來自
彭彭老師JavaScript 流程控制:迴圈指令
https://www.youtube.com/watch?v=cgXWJlIKJb4&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=17

昨天的學習內容:[Day 9] JavaScript 迴圈基礎練習-計算1+2+...+10
https://ithelp.ithome.com.tw/articles/10344749


1. 什麼是 迴圈指令?

迴圈指令是一種只能寫在迴圈中的指令,
寫在迴圈外面就會產生錯誤。
主要語法有兩個:break 與 continue

2. break指令

break指令,可以強迫中斷迴圈
來看範例:

<script>
    let n=0;
    while(n<3){
        if(n==1){
            break;
        }
        console.log(n);
        n++
    }
</script>

迴圈的走法:
一開始n=0,while判斷true,經過if(n==1)為false,不執行break,
往下走到console.log(n)印出結果n=0
執行n++,n=1,進入下一圈。
第二圈n=1,while判斷true,經過if(n==1)為true,執行break,
中斷迴圈,跳出,結束。

網頁結果,只印出0
https://ithelp.ithome.com.tw/upload/images/20240816/20168410unfql0QicE.jpg


3. continue指令

continue指令,是強迫跳到迴圈開頭,忽略下面的程式,進入下一圈。
來看範例:

<script>
    for(let n=0;n<3;n++){
        if(n==1){
            continue;
        }
        console.log(n);
    }
</script>

迴圈的走法:
一開始n=0,for判斷為true,經過if(n==1)為false,不執行continue,
往下走到console.log(n)印出結果n=0
執行n++,n=1,進入下一圈。
第二圈n=1,for判斷為ture,經過if(n==1)為true,執行continue,
(不執行console.log(n)印出n=1)
執行n++,n=2,跳到迴圈一開頭,進入下一圈。
第三圈n=2,for判斷為true,經過if(n==1)為false,不執行continue,
執行n++,n=3,進入下一圈。
第四圈n=3,for判斷為false,跳出迴圈,結束。

網頁結果,只會印出0、2
https://ithelp.ithome.com.tw/upload/images/20240816/20168410YD4ztUa3eq.jpg


今天的學習相對輕鬆一點,因為練習的部分我就跟範例一起了。
很開心堅持了10天,雖然學習進度不是很快,
但自己有漸漸熟悉並學會運用很不錯。
謝謝大家,下次見。


上一篇
[Day 9] JavaScript 迴圈基礎練習-計算1+2+...+10
下一篇
[Day 11] JavaScript 函式基礎(function)
系列文
從零開始學習JavaScript 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言