前面學習到了條件判斷式,接著我們來學習有點危險的循環迴圈,好啦!也沒那麼誇張~只是寫不好,容易進入無窮迴圈導致當機!不過我們是寫在網頁上~所以如果真的不小心陷入無窮迴圈,就關掉瀏覽器就可以了!
#什麼是迴圈?
如同字面上的意思,一直反覆輪迴,重複做一樣的事(怎麼好像人生)。
#迴圈流程圖
沒錯!迴圈也有流程圖,但其實也跟判斷流程圖相差不遠,幾乎一模一樣
同樣是要達成所設定的條件來進行循環,是不是跟條件判斷式很像呀!
#while 迴圈
while 迴圈是個最基本、結構簡單的迴圈,使用的語法 while ( 條件表達式 ) { 當條件表達式為 true 時,執行程式碼 }
。
假設我們要印出 12 個月份,除了乖乖的打出 12 個月份,我們也可以發揮工程師精神,使用迴圈來幫我們代勞:
let month = 1; /* 一年由 1 月開始 */
while (month <= 12 /* 一年只有 12 個月,超過就終止 */) {
console.log( `${month} 月` ); // 利用前面所學的樣板字面值,帶入變數
month++; // 重點:需要每執行一次自動 + 1,否則會陷入無限迴圈
}
/*
"1 月"
"2 月"
"3 月"
"4 月"
"5 月"
"6 月"
"7 月"
"8 月"
"9 月"
"10 月"
"11 月"
"12 月"
*/
非常簡單吧~
#do while 迴圈
而 do while 跟 while 非常相似,唯一不同的地方就在於,JavaScript 是由上而下執行程式碼,所以會先執行一次!
let month = 1; /* 一年由 1 月開始 */
do {
// 不管有沒有符合條件,都會先執行"一次"這段程式碼
console.log( `${month} 月` );
month++; // 重點記得加
} while (month <= 12) // 一年不超過 12 個月
/*
"1 月"
"2 月"
"3 月"
"4 月"
"5 月"
"6 月"
"7 月"
"8 月"
"9 月"
"10 月"
"11 月"
"12 月"
*/
#for 迴圈
for 迴圈比較嚴謹,它把設定初始值、條件判斷 與 更新值 集中在一起設定,讓迴圈的操控次數更容易掌控。
for 迴圈的語法 for (初始化表達式; 條件表達式; 更新表達式) { 條件判斷為 true 執行程式碼 }
同樣用上面 12 個月的例子:
/* 同樣設定初始值 1 月; 不超過 12 個月; 每執行一次 + 1 */
for (let i = 1; i <= 12; i++) {
console.log( `${i} 月` );
}
/*
"1 月"
"2 月"
"3 月"
"4 月"
"5 月"
"6 月"
"7 月"
"8 月"
"9 月"
"10 月"
"11 月"
"12 月"
*/
有沒有發現更簡單了!
大多數人會喜歡使用 let i
來初始化元素,是因為 let
是區塊變數,不會汙染到外面的變數,而 i
是 index
的縮寫,當然你變數名取別的也無所謂就是了!
#break & continue
有時候我們並不想讓迴圈直接執行到底,想要跳過幾個選項,或到哪個選項直接停止,就可以利用 break (中斷語法)與 continue (跳過語法),只能使用在循環語法中。
是不是很熟悉~沒錯!就是前面 switch 中的 break
語法,switch 也可以搭配 continue
進行跳過。
break
用法應該都知道了,這裡就介紹 continue
吧~
使用方法也很簡單,假如我想在印出 9 月有幾天紅字:
let holiday = 0; // 統計假日
/* 同樣設定初始值 1 日; 9 月不超過 30 天; 每執行一次 + 1 */
for (let i = 1; i <= 30; i++) {
// 1 號是從星期三開始的,判斷如果是星期一到五的話 continue 跳過
if ( (i + 2) % 7 >= 1 && (i + 2) % 7 <= 5 ) continue;
// 沒被 continue 跳過的,會在這行程式碼進行 + 1
holiday++;
}
holiday += 1; // 不能忘了中秋節是在星期二
console.log(`紅字有 ${holiday} 天`); // 紅字有 9 天
#for 迴圈 與 while 迴圈 的差別
就如同我上一篇所說,既然 for 迴圈 和 while 迴圈 使用的情況與結果都差不多,那為什麼還會存在,一定是有它的意義在!
大多數的情況,都會使用 for 迴圈,是因為 for 迴圈把控制迴圈次數的條件都集中一起寫,閱讀性比較高,適合 條件次數明確 的情況使用。
而當條件次數不明確呢? 沒錯!就要利用 while 迴圈來達成了!while 迴圈在面對隨機性的時候,只要條件的部分符合,不用像 for 迴圈要設定好三個值,while 迴圈就比 for 迴圈會更加靈活好用且更直覺。
這邊舉一下 008 天 重新認識 JavaScript 書中很好的例子,當大樂透要使用「電腦選號」時,迴圈要如何判定呢? 規則:「從 1~49中,隨機選9個不重複的號碼」,這就留給各位思考了。