JavaScript 與 jQuery

第 4 章    決策與迴圈

(1) 決策

∗ 決策制定 (Decision making)

▸ 在程式中決定哪部份程式需執行,哪部份不需執行

▸ 常用流程圖 (Flowchart) 來表示決策

∗ 評估條件 (Evaluating a condition) 與條件指令 (Condition statement)

▸ 決策包含兩部份:

✶ 表示式:回覆布林值
✶ 條件指令:依照表示式回覆值決定如何執行程式

▸ 例如:

if (score > 60) {
  passingMsg = '通過!';
}
else {
  passingMsg = '再試一次...';
}

∗ 比較運算子 (Comparison operator)

▸ 相等運算子:比較兩個值是否相等,回覆布林值

==:比較兩個值 (數值、字串、或布林) 是否相等,例如:
20 == 30:false
20 == 20:true
'Hello' == 'Goodbye':false
3 == '3':true
===:比較兩個值的資料型態以及值是否相等 (較嚴格),例如:
'3' === '3':true
3 === '3':false
!=:比較兩個值 (數值、字串、或布林) 是否不相等,例如:
20 != 30:true
20 != 20:false
'Hello' != 'Goodbye':true
3 != '3':false
!==:比較兩個值的資料型態以及值是否不相等 (較嚴格),例如:
'3' !== '3':false
3 !== '3':true
>, <, >=, <=:大於、小於、大於等於、小於等於,例如:
4 > 3:true
4 < 3:false
4 >= 3:true
4 <= 3:false

∗ 邏輯運算子 (Logical operator)

&&:邏輯且 (Logical and),兩個表示式均是真,就回覆真,否則回覆假

((2<5) && (2<3)):true
((2>5) && (2<3)):false
((2>5) && (2>3)):false

||:邏輯或 (Logical or),兩個表示式有一個是真,就回覆真,否則回覆假

((2<5) || (2<3)):true
((2<5) || (2>3)):true
((2>5) || (2<3)):true
((2>5) || (2>3)):false

!:邏輯非 (Logical not),表示式是真,就回覆假,否則回覆真

(!(2>5)):true
(!(2<5)):false

(2) If 指令

∗ if 指令 (if statement)

▸ 基本格式:

if <condition> {
  ...
}
if <condition> {
  ...
}
else {
  ...
} 
if <condition> {
  ...
}
else if {
  ...
}
else {
  ...
}
if <condition> {
  if <condition> {
    ...
  }
  else if {
    ...
  }
  else {
    ...
  }
}
else {
  ...
}

▸ 例如:

if (score >= 60) {
  passingMsg = '<p>恭喜過關!</p>';
}
else {
  passingMsg = '<p>再試一次</p>';
}

(3) Switch 指令

∗ Switch 指令:比對 Switch 變數,決定執行哪一部分的程式

▸ 例如:

switch (level) {
  case 1:
    title = '第1階';
    break;
  case 2:
    title = '第2階';
    break;
  default:
    title = '測試';
    break;
}

▸ 如果比對全部失敗,就執行 default 部份

(4) 真值與假值

∗ JavaScript 的所有值都可以視為真或假

▸ 以下均為假值 (False)

說明
var highScore = false; 傳統的布林假值
var highScore = 0; 數值 0
var highScore = ''; 空字串
var hightScore = 10/'score'; 非數值 (NaN)
var highScore; 未設值 (undefined)
var highScore = null; 空值

▸ 以下均為真值 (True)

說明
var highScore = true; 傳統的布林真值
var highScore = 1; 非 0 數值
var highScore = 'carret'; 非空字串
var hightScore = 10/5; 非 0 數值
var hightScore = 'true'; 非空字串
var hightScore = 'false'; 非空字串
var highScore = '0'; 非空字串

∗ 檢查元素是否存在:利用 .length 屬性

if ($('#header').length) {
  // 找到:做某些事
}
else {
  // 沒找到:做其他事
}

∗ 嚴格相等 (===) 或嚴格不相等 (!==)

▸ 如果使用 == 來比較,則以下都相等:

表示式 結果
false == 0 true
false == '' true
0 == '' true

▸ 如果使用 === 來比較,則以下都不相等:

表示式 結果
false === 0 false
false === '' false
0 === '' false

nullundefined 雖為假值, 但他們除彼此可以雙等號相等之外,與其他值都不相等:

表示式 結果
null == undefined true
null === undefined false
null == false false
undefined == false false
null == 0 false
undefined == 0 false

NaN 雖為假值,與任何值都不相等,包括自己:

表示式 結果
NaN == null false
NaN === NaN false

∗ 短路計算 (Short-circuit evaluation)

▸ 布林表示式由左至右運算,只要能確定最終結果就立即回覆

運算子 布林代數
x && y 如果 xFalse, 回覆 x,否則回覆 y
x || y 如果 xTrue, 回覆 x,否則回覆 y
!x 如果 xFalse, 回覆 True,否則回覆 False

▸ 範例 1 :

✶ 以下程式不論 user 是否設定,都不會當掉
if (user && user.username=='admin') {
  ...
}
✶ 以下程式如果未設定 user 就會當掉 (Uncaught TypeError: Cannot read property 'username' of undefined)
if (user.username == 'admin') {
  ...
}

▸ 範例 2:

var artist = '張大千';
var artistA = (artist || '不知名');
→ 第二行:如果 artist 有定義,就指定給 artistA 變數,否則設定 artistA'不知名'

▸ 有經驗的程式設計師:

✶ 做 and 運算時:將較有可能成為 false 的運算放在前面
✶ 做 or 運算時:將較有可能成為 true 的運算放在前面
✶ 將較簡單的運算放在前面,較複雜的運算放在後面

(5) 迴圈

∗ For 迴圈 (For loop) ,例如:

var cities = ['台北市', '新北市', '台中市', '台南市', '高雄市']; 
for (var i=0; i<cities.length; i++) {
  console.log(cities[i]);
}

▸ 範例:

var cities = ['台北市', '新北市', '台中市', '台南市', '高雄市'];
var index = -1;
var cleanestCity = prompt('最乾淨的城市:');
for (var i=0; i<cities.length; i++) {
  if (cleanestCity == cities[i]) {
    index = i;
    break;
  }
}
if (index >= 0) {
  alert('在清單中的第' + index + '個位置');
} else {
  alert('不在清單中');
}

∗ While 迴圈 (While loop) ,例如:

var i = 1;
var msg = '';
while (i < 10) {
  msg += i + ' x 5 = ' + (i*5) + '<br>';
  i++; 
} 

∗ Do while 迴圈 (Do while loop),例如:

var i = 1;
var msg = '';
do {
  msg += i + ' x 5 = ' + (i*5) + '<br>';
  i++; 
} while (i < 10);

∗ 作業 1

上一章       下一章