[JavaScript] - Control & Loop(控制判斷與迴圈)

Control Flow

JavaScript 用來控制流程的「條件語法」指的是,當指定的條件為 true 時,就會執行後續所指定的指令。 而 JavaScript 的條件語法有兩種︰ if…else 和 switch。

if..else

如同字面上,如果指定條件為true就執行某件事,否則else就做另一件事。

1
2
3
4
5
if (指定條件) {
陳述式 1;
} else {
陳述式 2;
}

如果有多個不同的條件也可以藉由 else if 來使用複合的陳述式來測試,如下:

1
2
3
4
5
6
7
8
9
if (指定條件1) {
陳述式 1;
} else if (指定條件 2) {
陳述式 2;
} else if (指定條件 n) {
陳述式 n;
} else {
最後陳述式;
}

switch

JavaScript 遇到 switch 語句會先執行指定的 expression 語句,然後用執行 expression 得到的值,去跟所有 case 的值做比較,如果相等就執行這個 case 區塊的程式碼,都不相等則執行 default 區塊的程式碼。

1
2
3
4
5
6
7
8
9
10
11
12
switch (expression) {
case value_1:
statements_1
[break;]
case value_2:
statements_2
[break;]
...
default:
statements_def
[break;]
}

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch (i) {
case 1:
alert("i = 1");
break;
case 2:
alert("i = 2");
break;
case 3:
alert("i = 3");
break;
default:
alert("i > 3 or i <= 0");
break;
}

如果變數 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
2
3
for (let i = 0; i < 5; i++) {
console.log(i);
}

先定義初始值let i=0
然後i < 5是結束條件,意思就是如果 i 大於等於 5 就會結束。
i++為結束每一回合時變動,意思就是i = i + 1

while

while 基本上概念與 for 是相同的,看下面兩格結果是相同的例子

1
2
3
4
5
6
7
8
9
10
11
// for
for (let i = 0; i < 5; i++) {
console.log(i);
}

// while
let i = 0;
while (i < 5) {
console.log(i);
i += 1;
}

while 的做法是 while(條件){行為},上面的例子 i < 5 是條件,每一次的行為是印出 i 後再讓 i+1 ,之後當 i = 4 這次行為結束後 i+1 變成 5 ,下一次開始判斷條件就不符合,迴圈即終止。

兩者相較

  • while 是控制條件的變數在迴圈開始前即存在,迴圈開始後只會定義條件,不會去初始化參數,大多數用在迴圈執行次數『不確定』的時候。
  • for 則在迴圈一開始就定義變數,大多數用在迴圈次數『明確』的狀態。

do…while

do…while 則是跟 while 幾乎一樣,只是 do…while 可以確保迴圈的第一次行為被執行。

1
2
3
4
5
6
// do...while
let i = 0;
do {
console.log(i);
i += 1;
} while (i < 5);

迴圈操作

break 與 continue 是迴圈中兩種特別的指令

  • break
    會直接中斷跳離迴圈。
  • continue
    會讓迴圈跳過這一次的行為繼續執行下一次的迴圈。

Break 例子:如果找到所要的東西,就停止迴圈

1
2
3
4
5
6
7
while (true) {
const result = foo();
if (result == "find it") {
console.log("找到了,結束迴圈");
break;
}
}

Continue 例子:假設想要印出 1 ~ 10的數字 ,但是不包括 3 的倍數。

1
2
3
4
5
6
7
for (let i = 1; i <= 10; i++) {
// i 能被 3 整除表示 i 是 3 的倍數,遇到 continue 就會跳過這次
if( i % 3 === 0){
continue;
}
console.log(i);
}

迴圈應用 - 99乘法表

利用迴圈來印出九九乘法表的結果
這是用到nesting for loops的方式

for 迴圈

1
2
3
4
5
for (var i=1; i < 10; i++) {
for (var j=1; j < 10; j++) {
console.log(i + "x" + j + " = " + i * j)
}
}

while 迴圈

1
2
3
4
5
6
7
8
9
var i = 1;
while (i < 10) {
var j = 1;
while (j < 10) {
console.log(i + " x " + j + " = " + i * j);
j++;
}
i++;
}

do…while 迴圈

1
2
3
4
5
6
7
8
9
var i = 1;
do {
var j = 1;
do {
console.log(i + " x " + j + " = " + i * j);
j++;
}while (j < 10);
i++;
}while (i < 10);