今天要寫的內容,是我完全沒有練習過,也沒有在課堂上學過的方法,那麼為什麼我還是要寫這篇文章呢?原因是因為,即使在我的課程裡 for 迴圈算是被 forEach 取代,我卻仍然可以在各個地方看到 for 迴圈,這其實讓我蠻慌的....
因此今天我就逼自己自學 for 迴圈了,嚴格來說在寫這篇文章前,其實已經有對 for 迴圈做了一點筆記,但因為疏於練習,其實也忘的差不多了(汗),今天就當作複習吧。
重複執行一組程式碼,並且檢測條件,如果檢測結果為 true 就會繼續執行,直到檢測到 false 才會停止執行;我們可以想像成倉鼠跑滾輪,如果都沒有任何 false,就會無限的跑下去。
迴圈有很多種形式,但在這裡只會拿幾個出來討論:
當變數值與設定值的條件符合就會執行,直到不符合為止。
語法:
for ( 變數 = 初始值 ; 變數 < 條件值 ; 變數 + 步進值 ) {
// 要執行的程式碼
}
執行 for 迴圈時,會有以下過程:
變數 = 初始值
便會被執行。變數的部分可以自定義。變數 < 條件值
這裡的條件會先被檢測,如果符合 true 便會執行,如果是 false 便會終止迴圈,這邊如果沒有設定條件,則會形成無限迴圈。變數 + 步進值
會對每一次的執行產生變化。簡易實例操作:
我有一座農場,裡面有 400 隻豬、700隻雞、2000 隻牛、10 隻羊,我的農場動物加總。
let farmAnimals = [ 400, 700, 2000, 10 ];
let animal_num = 0;
for ( let i=0; i<farmAnimals.length; i++) {
animal_num += farmAnimals[i];
}
console.log( animal_num ); // 3110
如果情境改成這樣:
我有一座農場,裡面有 400 隻豬、700隻雞、2000 隻牛、10 隻羊,除了豬以外我有多少動物。
let farmAnimals = [ 400, 700, 2000, 10 ];
let animal_num = 0;
for ( let i=1; i<farmAnimals.length; i++) {
animal_num += farmAnimals[i];
}
console.log( animal_num ); // 2710
以上兩個範例,大略的解釋一下發生了什麼事,第一個範例 animal_num = 0
因此我們初始值為 0 ,i=0
於是從 farmAnimals 陣列第 0 筆資料開始跑,跑到 farmAnimals 陣列資料的最後一筆數量 10,並且設定跑到第四次就會停止,也就是上面 i<farmAnimals.length
這個條件,在步進值(每一次迴圈產生變化)的地方設定 i = i + 1
最後獲得了所有資料的加總。
那麼第二個範例為什麼數字變了?因為 i=1
的情況下,是從 farmAnimals 陣列第 1 筆資料開始跑,因此豬的部分就沒有被計算進去了。
只要指定的條件為 true 就執行,直到條件不符合為止,不過與 for 迴圈不同的地方是,for 適合需要跑完全部陣列的情況;while 比較適合用在以條件當作終止條件的時候,譬如:比較大小、布林值。
語法:
while (condition)
statement
直接進行範例:
// 範例:印出 1 ~ 5
let i = 1;
// i <= 5 為終止條件
while (i <= 5){
console.log(i);
i++
}
//1, 2, 3, 4, 5
這裡要注意的是,如果底下 i++
忘記放,會造成嚴重的後果,這個迴圈會不停的運轉,瀏覽器會直接爆炸,因此在練習的時候也要注意不要忘了寫上去。
這個範例為,只要 a 小於 3,便會不斷的重複執行:
let a = 0;
let b = 0;
while (a < 3) {
a++;
a += b;
}
每一次疊代都會增加 a 的值,並且把值加到 b 上面,分析起來為以下狀況:
所以在第三次會判斷 a 不小於 3 (不是 true),而終止迴圈。
每進入一次循環體我們就稱為一次疊代,假設進入三次就稱為三次疊代
while 是先檢查終止條件,再執行迴圈;do while 則是先執行迴圈,再檢查終止條件,因此 do while不管條件是否為 true,都會至少跑一次,接著 while 判斷條件是否要繼續執行,若要執行就會進行第二輪,不執行則跳出迴圈;要注意的是,while 的小括號是迴圈結束的地方,後面要加上分號,並且要確認無誤後再開始測試迴圈。
語法:
do
陳述式
while (條件式);
這個範例中,do 迴圈重複至少一次,並且他會繼續不斷重複到 a 不再小於 5。
let **a = 0;
do {
a += 1;
console.log(a);
} while (a < 5);**
break 意思為中斷整個迴圈,當我們希望他滿足條件就停下來而不用全部跑完的時候,就可以使用 break。
範例:
let farmAnimals = [
{
animal: 'pig',
num: 400,
},
{
animal: 'chick',
num: 700,
},
{
animal: 'cow',
num: 2000,
},
{
animal: 'sheep',
num: 1000,
}
]
我們先建立一個陣列資料,然後示範一個正常能夠撈出資料的迴圈,可以看見他會跑完所有的資料:
for(var i=0; i<farmAnimals.length; i++){
console.log(farmAnimals[i].num); // 400, 700, 2000, 10
}
假如我們希望這個迴圈只幫我們撈出豬,這時候就可以使用 break 方法。
for(let i=0; i<farmAnimals.length; i++){
if(farmAnimals[i].num < 1000){
console.log(farmAnimals[i].animal);
break;
}
}
另外,這裡不會跳出數量也小於 1000 的雞,是因為迴圈在跑了一次之後,已經達成了條件並且被中斷,因此不會再跑第二次,此時就不會檢測到第二筆雞的資料了。
continue 會滿足條件後直接繼續下一次的迴圈。
我們知道除了 break 方法以外,其他迴圈方法都會跑滿每一個步驟,在這裡 continue 則是只跑滿足的條件。
舉例來說,我有一座農場,農場裡有好幾座場房,每一個場房都要隔出三個區塊,這三個區塊裡面至少要有一個區塊是養雞,以其他迴圈來說,100個場房裡面的三個區塊都會跑過一遍,而 continue 則是在一個場房的區塊裡面只要檢查到有一區是養雞的,則會跳過另外兩區,直接檢查下一間場房,範例如下:
for(let i = 0; i <= 100; i++){
console.log(`正在找第 ${i} 間場房`);
if(左邊){
console.log("找到了,下一間")
continue;
}
if(中間){
console.log("找到了,下一間")
continue;
}
if(右邊){
console.log("找到了,下一間")
continue;
}
console.log("沒有雞")
}
使用 continue 如果在一間場房裡面發現一個區塊有養雞,就會直接進行下一間,不會再跟你說「還有兩區沒有養雞哦」,但是跑完 100 間場房後發現都沒有養雞的時候,就會跟你說「你這個農場都沒有雞」。
為了介紹迴圈方法,自己也在撰寫的過程中努力的嘗試理解,很開心替自己的小腦袋增加了新的知識。另外,在使用迴圈的時候,為了避免無限迴圈,確定迴圈內的判斷式終究會變成 false 這件事真的很重要,否則造成程式大當機可是會很麻煩的,我在測試的過程中有好幾次瀏覽器動彈不得,這篇文讓我不停的冷汗直流.......
參考資料:
MDN
30 天 Javascript 從入門到進階:迴圈
迴圈筆記