[JavaScript] - Control & Loop(控制判斷與迴圈)
Control Flow
JavaScript 用來控制流程的「條件語法」指的是,當指定的條件為 true 時,就會執行後續所指定的指令。 而 JavaScript 的條件語法有兩種︰ if…else 和 switch。
if..else
如同字面上,如果指定條件為true
就執行某件事,否則else
就做另一件事。
1 | if (指定條件) { |
如果有多個不同的條件也可以藉由 else if 來使用複合的陳述式來測試,如下:
1 | if (指定條件1) { |
switch
JavaScript 遇到 switch 語句會先執行指定的 expression 語句,然後用執行 expression 得到的值,去跟所有 case 的值做比較,如果相等就執行這個 case 區塊的程式碼,都不相等則執行 default 區塊的程式碼。
1 | switch (expression) { |
例子:
1 | switch (i) { |
如果變數 i 的值 1,則執行 case 1 區塊的程式碼,以此類推;如果都不在指定的 case 裡面,則會執行 default 區塊的程式碼。
關鍵字 break
當 JavaScript 執行到 break 這個關鍵字的時後,就會直接跳出整個 switch 區塊,繼續往下執行。
如果沒有break
,程式會從符合的 case 區塊開始一路往下執行,直到遇到 break 為止。
相較來說 switch 得效能比較好一些
- if…else 會先判斷後再執行
- switch 一定會執行,但還是會先比對 case
Loop
迴圈(loop)指的是,想要重複做某件事情,數值則會依次數而有遞增
或遞減
的變化來完成結束的條件。
主要分為
- for
- while
- do..while
for
直接看例子
1 | for (let i = 0; i < 5; i++) { |
先定義初始值let i=0
然後i < 5
是結束條件,意思就是如果 i 大於等於 5 就會結束。i++
為結束每一回合時變動,意思就是i = i + 1
。
while
while 基本上概念與 for 是相同的,看下面兩格結果是相同的例子
1 | // for |
while
的做法是 while(條件){行為},上面的例子 i < 5
是條件,每一次的行為是印出 i
後再讓 i+1 ,之後當 i = 4
這次行為結束後 i+1 變成 5 ,下一次開始判斷條件就不符合,迴圈即終止。
兩者相較
- while 是控制條件的變數在迴圈開始前即存在,迴圈開始後只會定義條件,不會去初始化參數,大多數用在迴圈執行次數『不確定』的時候。
- for 則在迴圈一開始就定義變數,大多數用在迴圈次數『明確』的狀態。
do…while
do…while 則是跟 while 幾乎一樣,只是 do…while 可以確保迴圈的第一次行為被執行。
1 | // do...while |
迴圈操作
break 與 continue 是迴圈中兩種特別的指令
- break
會直接中斷跳離迴圈。 - continue
會讓迴圈跳過這一次的行為繼續執行下一次的迴圈。
Break 例子:如果找到所要的東西,就停止迴圈
1 | while (true) { |
Continue 例子:假設想要印出 1 ~ 10的數字 ,但是不包括 3 的倍數。
1 | for (let i = 1; i <= 10; i++) { |
迴圈應用 - 99乘法表
利用迴圈來印出九九乘法表的結果
這是用到nesting for loops的方式
for 迴圈
1 | for (var i=1; i < 10; i++) { |
while 迴圈
1 | var i = 1; |
do…while 迴圈
1 | var i = 1; |