JavaScript - Control and loop (控制判斷與迴圈)

PV:

流程控制

程式碼裡有時需要條件判斷，決定流程的下一步要執行哪些步驟。這時需要使用「條件判斷」的語法，決定使用哪一條流程。當指定的條件為 true ，就會執行該條件指定的流程，如果為 false 則使用另一個流程。JavaScript 的條件判斷語法有 2 種：if…else 和 switch 兩種

if…else

if 條件判斷句在條件為 true 的狀況下只會執行一組敘述句；if…else 條件判斷句在條件為 true 的情況下會運行一組敘述，在 條件為 false 的狀況下，運行另外一組敘述。

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

如果有更多個條件，可再搭配使用 else if

1
2
3
4
5
6
7
8
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
switch(expression){
 case value_1:
    statements_1
    break;
  case value_2:
    statements_2
    break;
  default:
    statements_def
    [break;]
}

舉例來說如果 fruitType 變數的值是 Apples，則會執行 case ‘Apples’ 區塊的程式碼；如果 fruitType 變數的值是 Mangoes，則會執行 case ‘Mangoes’ 區塊的程式碼；如果 fruitType 的值都不在指定的 case 裡面，則執行 default 區塊的程式碼。也可以省略 default 區塊，表示如果找不到相符的 case，則跳過整個 switch 區塊什麼不執行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
switch (fruitType) {
  case "Oranges":
    alert("Oranges");
    break;
  case "Apples":
    alert("Apples");
    break;
  case "Bananas":
    alert("Bananas");
    break;
  case "Cherries":
    alert("Cherries");
    break;
  case "Mangoes":
    alert("Mangoes");
    break;
  case "Papayas":
    alert("Papayas");
    break;
  default:
    alert("沒有符合的條件");
}
  • break 關鍵字
    當 JavaScript 執行到 break 這個關鍵字的時後，就會直接跳出整個 switch 區塊，繼續往下執行。
  • if…else 與 switch 的效能比較
    switch 的效能比 if…else 好，因為 if…else 即使已經找到符合的條件，還是會繼續檢視全部的條件。switch 如果有符合的條件，就會執行對應的程式碼

迴圈

迴圈 (loop) 提供一個快速又簡潔的方法來重複地做某件事。三種常用的迴圈有：

  • for
  • while
  • do…while

for

建立一個變數並設定初始值 var i=0 ，設定條件 i<10 意思是迴圈執行到第 9 次就會結束。i++ 就是迴圈每執行一次，就會在計數器上增加一次計數意思就是 i = i + 1

1
2
3
for (var i = 0; i < 10; i++) {
  console.log(i);
}

while

while 陳述式會不斷執行它的陳述式只要指定的條件式判斷為 true。以下的 while 迴圈在只要 n 比 3 少的情況下便會不斷重複

1
2
3
4
5
6
var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

迴圈把 n 遞增並將其值加到 x 上。因此，x 跟 n 的值會是下列情況：

經過第一次迴圈後 n = 1 而 x = 1
經過第二次迴圈後 n = 2 而 x = 3
經過第三次迴圈後 n = 3 而 x = 6
在完成第三次迴圈後，判斷是 n<3 不再是 true ，所以迴圈終止

  • 兩者相較

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

do…while

while 和 do…while 的主要差別在於後者的程式區塊會寫在條件之前，這表示無論條件是否符合，程式區塊中的敘述都至少會執行一次

1
2
3
4
5
6
var n = 0;
var x = 0;
do {
  n++;
  x += n;
} while (n < 3);

迴圈操作

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
for (let i = 1; i <= 10; i++) {
  // i 能被 3 整除表示 i 是 3 的倍數，遇到 continue 就會跳過這次
  if( i % 3 === 0){
    continue;
  }
  console.log(i);

迴圈應用 - 99 乘法表

  • 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);

迴圈應用 找出最大值

1
2
3
4
5
6
7
8
9
10
11
12
var nums = [1, 2, 3, 4, 5];
let biggest = nums[0];

function max() {
  for (var i = 0; i < nums.length; i++) {
    if (nums[i] > biggest) {
      biggest = nums[i];
    }
  }
  console.log(biggest);
}
max();

迴圈應用 加總

1
2
3
4
5
6
7
8
9
10
var nums = [1, 2, 3, 4, 5];
let sum = 0;

function sumArr() {
  for (var i = 0; i < nums.length; i++) {
    sum += nums[i];
  }
  console.log(sum);
}
sumArr();

迴圈應用 判斷相等

1
2
3
4
5
6
7
8
9
10
function equal(arr) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] !== arr[i + 1]) {
      return false;
    }
  }
  return true;
}

equal("a", "b", "c");

迴圈應用 字串倒轉

1
2
3
4
5
6
7
8
9
10
var arr = [1, 2, 3, 4, 5];
var emptyArr = [];

function reverseArr() {
  for (var i = arr.length; i > 0; i--) {
    emptyArr.push(i);
  }
  console.log(emptyArr);
}
reverseArr();

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :