初級免費 ⏱ 19m7s

8-2 迴圈 For, do... while, while 陳述式是什麼？

Lesson: 8-2 迴圈 For, do... while, while 陳述式是什麼？

JavaScript

8-2 迴圈 For, do… while, while 陳述式是什麼？

Original: https://course.andys.pro/Javascript-Intro/08-2-loop-for-do-what-is-the-while-while-statement/

講義

1. For 迴圈 (最常用)

for 迴圈通常用於已知執行次數的場景。

語法結構：for (初始值; 條件式; 遞增/遞減表達式) { ... }
執行流程：
1. 設定初始值 (例如 var i = 0)。
2. 檢查條件式是否為 true。
3. 執行區塊內的陳述式。
4. 執行遞增表達式 (例如 i++)。
5. 重複步驟 2~4，直到條件為 false。

應用：走訪字串或陣列。

var str = "hello";
for (var i = 0; i < str.length; i++) {
    console.log(str[i]); // 依序印出 h, e, l, l, o
}

2. While 迴圈

while 迴圈適合用於「不知道要跑幾次，但知道結束條件」的場景。

原理：先檢查條件，條件成立才進入區塊執行。
注意：務必在區塊內更新控制變數，以免變成「無窮迴圈」導致瀏覽器當機。

3. Do…While 迴圈

與 while 類似，但最大的差別在於：它會先執行一次區塊內容，才進行條件檢查。

特點：不論條件是否成立，區塊內容至少會被執行一次。

4. 小結與建議

縮排：在大括號 { } 內的程式碼應使用 Tab 縮排，以區分區塊層級。
無窮迴圈警告：若迴圈條件永遠為 true（例如忘記寫 i++），電腦效能會被佔滿，甚至導致程式崩潰。

影片逐字稿 (AI 生成)

好我們現在接著來看八支耳迴圈那這個章節其實我覺得是最重要的那有兩個東西是很好用的第一個是FOR迴圈再來是WHILE迴圈那DO WHILE就是大家也要知道可是我們實際有時候用的時候比較少好有這三個東西首先我們剛才前面一直看到FOR迴圈可是看到卻不知道它怎麼運作的那現在我們就來學習它怎麼運作首先在FOR的時候呢我們一進去到這個FOR迴圈它有一個初始表達式就通常在這個地方我們會去做預設就是初始條件比如說像I等於0那它的條件是放在這裡的它的條件是說比如說像我們會比如說像I小於2然後像逆增表達式可能這邊就會做I++或I加等於2或I加等於3通常都是做I++因為我們都喜歡做順序的比如說像01234那假如我們要做偶數地增可能就是I加等於202468那你如果說是欸老師我想要做2468就好那你的初始條件是不是就可以剛開始先寫I等於2然後再去做地增的時候寫加等於2然後是2468然後你的條件可能就是I小於10對不對因為你到10的時候就是你在10的時候就變成是I就是10然後可是它小於10然後它這條件不符合就跳出OK好那如果條件是會被評估如果是true的話它裡面的乘數式就會跑如果是false的話它就會跳出這個回圈OK所以它跟if其實有點像它是比較複雜的if就是說它會一直去檢查這個條件欸條件有沒有符合有沒有符合那它每跑一次乘數跑完一次這個block它會再地增一次然後跑再跑一次乘數式再地增一次再跑乘數式再地增一次然後每次都會檢查有沒有假如條件不符合它就跳出好的我們先來看call如果我們不使用回圈的寫法印出1到10我們可以console log1234567890好那如果我們用for來寫的話我們可以做到的是我們開始說我們有一個var這個var是i就是這個var叫i然後它是1然後它小於等於10i++然後所以當我第一次跑的時候是不是它會先去印出1加加完以後它會檢查檢查說i等於2的時候是不是有小於10有小於等於10有然後它就繼續2然後這樣子一直檢一直檢查一直跑然後就會一直跑然後就變成是1 2 3 4 5 6 7 8 9 10好那我們來跑一下這個call然後記得喔在block裡面我們通常前面會補一個tab然後記得喔在block裡面我們通常前面會補一個tab就讓它的我們知道說它這個block是在裡面我們可以用tab來區隔說這個裡面是一個區塊的call這樣1 2 3 4 5 6 7 8 9 10那當然我們也可以有時候我們可以測試一下就是它應該第一次就是比如說像我如果初始條件是11它會不會跑它就不會跑喔OK當我初始是11的時候它是不是就已經大於就是這個條件為非所以它裡面的call就不會跑了那還有一些條件比如說像你看我剛開始是我剛開始是0好了通常我們都是用0開始跑然後我們小魚的話那請問10會不會跑這時候10就不會跑0 1 2 3 4 5 6 7 8 9可是它是跑10次喔0 1 2 3 4 5 6 7 8 9那通常會建議大家就是i都是建議從0開始跑因為這樣子的寫法有什麼好處呢當我們有個字串的時候是否可以直接把它的lens寫在這裡好那我們直接把欸我們剛才call已經在這裡了嘛對不對欸 sorry已經在這裡好那我們放一個放一個剛剛我們把它改成00跟10這個好接下來我想要把call變得再複雜一點就是讓大家可以再看一點東西不過大家不要太害怕就是可以好好看理解一下就是我們有a我們在一個字串裡面我們a我們有b我們有c我先跑這個東西給大家看我們一步一步來不要怕好那這時候我們x是不是就是有三個東西然後我們把它打開裡面有012index是012有abc這三個東西它的長度是3ok所以我們x0我就可以叫出ax1x1就叫出bx2就叫出cx.length就叫出3這個數字它有三個東西好不好這個字串有三個東西那我們現在開始用for來處理它我不想要這樣子012這樣子打我覺得如果我有100個我就混倒那我們把我們剛剛的這個概念拿過來我這分塊還沒改好沒關係我先把它拿過來我們配合上面的知識我們知道說它012對不對那它到什麼時候會結束到它的長度會結束到它的長度會結束可是又要比它小所以我們要小於什麼x.length可以接受嗎那我們試試看012對不對i是012對不對那012欸012那我們可以做什麼事情我們可以用x然後把它刮在裡面這時候它就會給我abcok嗎好所以我把這邊都放放過去好好繼續來講不好意思好好我們現在開始講DawileDawile那Dawile就是說我先做了再說我先做了再說我先做了我先做了成數是我再來檢查條件當如果條件都是為真的情況下我就會我就會就是如果都是真的我就會一直跑如果為非的情況下我就不跑是不是跟Ford有點像只是它的寫法不太一樣就是它寫法不太一樣就是它寫法不太一樣就是它寫法不太一樣就是它寫法不太一樣好我們現在開始講Dawile那Dawile那Dawile就是說我先做了再說就是我先做的成數是我再來檢查條件當如果條件都是為真的情況下我就會就是如果都是真的我就會一直跑如果為非的情況下我就不跑是不是跟Ford有點像只是它的寫法不太一樣所以當我要做起始條件的時候我的起始條件必須要放在外面VarI放在外面對不對然後開始加等於1然後印出東西來那我們可以跑一下那我先把它放到這邊然後把它標題化OK好然後這邊我記得我這邊喔少Tab要Tab喔要我這邊有時候沒有對得很準啊可是我就是Tab這樣子好然後我們到剛才這邊的這個然後我把它清掉Clear好的我們換我看這段扣你看它是0對不對因為喔它這裡這樣這樣比較清楚吧好這裡因為它原本起始條件是0喔可是它因為它先加等於1了對不對所以它是開始16345678910OK那它當它是10的時候它跑完以後再檢查條件它發現我已經大魚10了所以它才跳出OK接下來可以測試一下如果說我的加等於放在的位置不一樣比如說喔喔喔喔喔喔好這個Tab要從這有時候你有遇到這種狀況就是它關不掉完蛋了電腦起飛了有時候會有這種狀況很可怕喔就是它會跑無限迴圈然後電腦就開始起飛這樣開始起飛這樣所以我還是先在前面先把扣改好好那我們這邊這邊我們如果把這兩行互換呢這兩行互換呢這時候它是不是會先印出0然後然後再加所以這樣的話就會應該是會是跟剛剛不一樣現在應該是0到90到10欸它回傳是10那我們剛剛前面是它有回傳這件事剛剛會從E開始對不對它回傳是Undefine為什麼會有回傳這件事情回傳我們先不要看它它這邊呢它會跑的事情是回傳我們先不看因為我們如果在VS我們也可以用VS code好好看這其實這是第幾8支11好我們要不要跑這個我們要不要跑這個我們要跑這個我們要跑這個我們要不要跑這個我們要跑這個我們要跑這個8支11111111111113他有跑嗎?喔沒存1到10然後我如果是再建一個8-11-1然後把這兩行互換然後跑一次有沒有 0到9ok因為他先印出來嘛然後他再加嘛然後就檢查所以他0到9當他加好1然後發現i等於10小於10的時候他就會怎麼樣他就會先跳出來那剛剛這邊是因為他是怎樣他是剛剛這個這個8-11他是加完了以後馬上印出來才檢查條件所以他到10的時候他一看他原本i是9進來加1變10然後印出來變10印出來完了以後他才檢查條件ok那這個東西會有一個可以有趣的地方或是大家要小心的地方好就是呃我拿這個這個例子好我們再我們再看一下這個這個存先先記得說這邊跑完跑完之後他是什麼0到9對不對可是如果我今天起始條件是10他會不會跑會不會跑DowhileDojust do it所以他會怎樣先做了再說他先做了才發現欸我的條件他會先做一次做完他才檢查ok所以他會先做第一次做完以後才檢查說欸我好像超過了那這個這其實有時候會蠻可怕的比如說我如果是100他一定會先做一次他不會先檢查喔他會先做一次我先做一次好這份call先放給大家好的我們再來看while好的while跟dowhile不太一樣的事情是他會先檢查ok那我們開始來跑這份call講義的寫法是先習慣先夾夾可是我的習慣是把夾夾都放在最後面所以不太一樣哇LAGLAG有點嚴重啊把其他的先關掉好了好好跑我看這邊記得喔要TAB然後這邊記得要換行TAB這樣會比較清楚好我們把剛剛這邊清掉好這邊跑的話你看因為他先加加所以他會跑1到10ok因為他先加加嘛跟加加嘛那如果我們把加加這件事情這樣我們把加加放在console.log後面的話跑他會是0到9回傳這個先不要看好因為他會先檢因為他會先檢查所以當我如果今天條件是10直接進去的話請問他會不會跑不會因為他條件要到壞的時候他說欸你那個已經太大了所以不要進來那個我們幼兒園這樣好所以我這邊把範例的call都給大家好好好好好好好好好,那再來是Level 2,要做99懲罰表好的,那先給大家休息三分鐘

影片逐字稿largev2

我們現在接著來看8-2回圈那這個章節其實我覺得是最重要的那有兩個東西是很好用的第一個是4回圈再來是Y回圈那doY就是大家也要知道可是我們實際有時候用的時候比較少好有這三個東西首先我們剛才前面一直看到4回圈可是看到卻不知道它怎麼運作的那現在我們就要來學習它怎麼運作首先在4的時候呢我們一進去到這個4回圈它有一個初始表達式就通常在這個地方我們會去做預設條件就是初始條件比如說像i等於0那它的條件式是放在這裡的它的條件式是說比如說像我們會比如說像i小於2然後像遞增表達式是可能這邊就會說i++或i++等於2或i++等於3通常都是做i++因為我們都喜歡做順序的比如說像0、1、2、3、4那假如我們要做偶數遞增可能就是i++等於20、2、4、6、8那你如果說是老師我想要做2、4、6、8就好那你的初始條件是不是就可以剛開始先寫i等於2然後再去做遞增的時候寫加等於2然後是2、4、6、8然後你的條件可能就是i小於10嘛對不對因為你到10的時候就是你在10的時候就變成是i就是10然後可是它小於10然後它的條件不符合就跳出OK好那如果條件式會被評估如果是true的話它裡面的乘數式就會跑如果是false的話它就會跳出這個迴圈OK所以它跟if其實有點像它是比較複雜的if就是說它會一直去檢查這個條件條件有沒有符合那它每跑一次乘數跑完一次這個block它會再遞增一次然後再跑一次乘數式再遞增一次再跑乘數式再遞增一次然後每次都會檢查假如條件不符合它就跳出好的我們先來看code如果我們不使用迴圈的寫法印出1到10我們可以console.log1、2、3、4、5、6、7、8、9、10好那如果我們用for來寫的話我們可以做到是我們開始說我們有一個var這個var是i就是這個var叫i然後它是1然後它小於等於10i++然後所以當我們第一次跑的時候是不是它會先去印出1然後再來它會檢查呃++++完以後它會檢查檢查說欸i等於2的時候是不是有小於10有小於等於10有然後這樣子一直檢查一直跑然後就會一直跑然後就變成是1、2、3、4、5、6、7、8、9、10好那我們來跑一下這個code呃是b好然後記得喔在block裡面我們通常前面會補一個tab就讓它的呃我們知道說它這個block是在裡面我們可以用tab來區隔說喔這個是裡面是一個區塊的code1、2、3、4、5、6、7、8、9、10ok那當然我們也可以有時候我們可以測試一下就是它應該第一次就是比如說像我如果初始條件是11它會不會跑它就不會跑喔ok當我初始是11的時候它是不是就已經大於就是這個條件為非所以它裡面的code它就不會跑了那還有一些條件比如說像我剛開始是呃我剛開始是0好了通常我們都是用0開始跑然後我們小於的話那請問10會不會跑這時候10就不會跑0、1、2、3、4、5、6、7、8、9可是它是跑10次喔對不對0、1、2、3、4、5、6、7、8、9那通常會建議大家就是i都是建議從0開始跑因為這樣子的寫法有什麼好處呢當我們有一個字串的時候是否可以直接把它的length寫在這裡好那我們直接把我們剛才code已經在這裡了嘛對不對sorry已經在這裡好那我們放一個放一個剛剛我們把它改成0跟10這個好接下來我想要把code變得再複雜一點就讓大家可以再看一點東西不過大家不要太害怕就是可以跑跑看理解一下就是我們有A我們在一個字串裡面我們有A我們有B我們有C我現在跑這個東西給大家看我們一步一步來不要怕好那這時候我們X是不是就是有三個東西然後我們把它打開裡面有012index是012有ABC這三個東西它的長度是3ok所以當我X0我就可以叫出AX1就叫出BX2就叫出CX.length就叫出3這個數字它有三個東西好不好這個字串有三個東西那我們現在開始用4來處理它我不想要這樣子012這樣子打我覺得如果有100個我就昏倒那我們把我們剛剛的這個呃概念拿過來我這分框還沒改沒關係我先把它拿過來我們配合上面的姿勢我們知道說它012對不對那它到什麼時候會結束到它的長度會結束可是又要比它小所以我們要小於什麼X.length可以接受嗎那我們試試看012對不對I是012對不對那012012那我們可以做什麼事情我們可以用X然後把它掛在裡面這時候它就給我ABCOK嗎所以我把這邊都放過去好了好好繼續來講我們現在開始講都會那都會就是說我先做了再說就我先做了乘數式我再來檢查條件當如果條件都是為真的情況下我就會就是如果都是真的我就一直跑如果為非的情況下我就不跑是不是跟4有點像只是它的寫法不太一樣所以當我要做起始條件的時候我的起始條件必須要放在外面var i放在外面對不對然後開始加等於1然後印出東西來那我們可以跑一下那我先把它放到這邊標題好這邊我記得我這邊要tab要我這邊有時候沒有對的很準這樣子然後我們到剛才這邊的這個然後我們把它清掉好的我們好好看這一段你看它是0對不對因為它這裡這樣比較清楚吧這裡因為它原本起始條件是0喔可是因為它先加等於1了對不對所以它是開始1.2.3.4.5.6.7.8.9.10ok當它是10的時候跑完以後再檢查條件它發現我已經大於10了所以它才跳出ok那大家也可以測試一下如果說我的加等於放在的位置不一樣比如說這個tab比較聰明有時候狀況就是它關不掉完蛋了有時候會有這種狀況很可怕喔就是它會跑無限迴圈然後電腦就開始起飛所以我還是在前面先把code改好那我們今天這邊我們如果把這兩行互換呢如果把這兩行互換呢這時候它是不是會先印出0然後再加所以這樣的話就會跟剛剛不一樣現在應該是0到90到10它回傳是10那我們剛剛前面是它有回傳剛剛會從1開始對不對它回傳是undefined為什麼會有回傳這件事情回傳我們先不要看它它這邊呢它會跑的事情是回傳我們先不看因為我們如果在VSCode我們也可以用VSCode跑跑看這是第幾8-11它有跑嗎1-10然後我如果是再建一個8-11-1然後把這兩行互換跑一次有沒有0-9因為它先印出來然後再加然後就檢查當它加好1然後發現i等於10小於10的時候它就會先跳出來那剛剛這邊是因為它是剛剛這個11加完了馬上印出來才檢查條件所以它到10的時候原本i是9進來加1變10然後印出來變10它才檢查條件那這個東西會有一個可以有趣的地方或是大家要小心的地方好就是我拿這個這個例子好我們再我們再看一下這個存好先記得說這邊跑完之後它是什麼0-9對不對可是如果我今天起始條件是10它會不會跑會不會跑do while dojust do it所以它會怎樣先做了再說它先做了才發現我的條件所以它會先做一次做完它才檢查所以它會先做第一次做完以後它才檢查說我好像超過了那這個其實有時候會蠻可怕的比如說我如果是100它一定會先做一次它不會先檢查喔它會先做一次這份code先放給大家ok好的我們再來看whilewhile跟do while不太一樣的事情是它會先檢查ok那我們開始來跑這份code講義的寫法是先習慣先++可是我的習慣是把++都放在最後面所以不太一樣lag有點嚴重把其他的先關掉好這邊記得喔要tab這邊記得要換行這樣會比較清楚好我們把剛剛這邊清掉好這邊跑的話你看因為它先++所以它會跑1到10ok因為它先++嘛那如果我們把++這件事情這個shift enter這樣如果要放在console log後面的話它會是0到9這個先不要看因為它會先檢因為它會先檢查所以當我如果今天條件是10直接進去的話請問它會不會跑不會因為它條件一進去要到while的時候它會說你那個已經太大了不要進來我們的幼兒園好所以我這邊把範例的code都給大家ok好那再來是lab2要做久久的懲罰表好的那先給大家休息3分鐘