iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
1
Modern Web

JS讀書筆記系列 第 6

JS讀書筆記30天 - Day06 控制判斷

  • 分享至 

  • xImage
  •  

控制判斷的作用

透過程式來做判斷,讓使用者做動作時,藉由不同的判斷,給予不同的回饋。並且透過控制判斷的運行,讓程式碼靈活度變高,維護性變好。

比較運算子

==(相等)、!=(不等於)、布林

var girlAge = 18;
var boyAge = 18;

girlAge == boyAge; //true

在上面的程式碼中,=賦予值的意思,==比較值是否相等,不能混為一談。

==!= 在數字、布林、字串都能使用。

==!= 的嚴謹模式

在寫程式碼時,有時會出現下列狀況:

1 == '1'; //true
3 != "3"; //true
true == 1; //true
false == 0; //true

這是因為JavaScript做比較時,會做轉型,將字串或布林轉換為數字,再做比較。

在這種情況下,數字為內容的字串會依內容直接轉為數值。布林的true會轉換為1,因為true在JavaScript中,有開啟、1的意思,false會轉換為0,因為false在JavaScript中,有關閉、0的意義。

如果要避免這種情況,就要用===!==,改=====!=!==,用這種嚴謹模式,會先判斷型別,型別相同,才會繼續判斷內容是否相同,就不會造成上述形況。

1 === '1'; //false,型別不同
3 !== "3"; //false,型別不同
true === 1; //false,型別不同
false === 0; //false,型別不同

但這並不代表==!= 就毫無作用,在一般情況下,=====!=!==都能使用,但如果有型別要求的情況下,採用用嚴謹模式的===!==,是比較好的選擇。

>(大於)、<(小於)、>=(大於等於)、<=(小於等於)

這幾個比較運算子的用法,就和一般數學上的使用相同。

80 > 10; //true
80 < 10; //false
80 >= 10; //true
80 <= 10; //false
80 >= 80; //true
80 > 80; //false

邏輯運算子

布林值變數

和一般變數一樣,首先先用var建立變數,命名變數名稱並宣告,最後賦予一個值,不同的是,值為true或false。

var isCorrect = true;
var isCorrect = false;

&&(AND)

所有列出的條件都要符合,寫在條件和條件之間,須為半形字元。

var girl = true;
var kid = true;

girl==true && kid==true; //true

||(OR)

所有列出的條件,只要符合其中之一即可,寫在條件和條件之間,須為半形字元。

var bill = 1500;
var VIP = false;

bill>1000 || VIP==true; //true

這個字元的位置在一般常用鍵盤(QWERTY鍵盤)的最右端,Enter鍵的上方。

https://zh.wikipedia.org/wiki/File:KB_United_States-NoAltGr.svg下載

!(NOT)

寫法是一個半形的驚嘆號(!),會將true變false,false變true。

2 > 3; // false
!(2>3); //true

if 和 if...else

if

if 是要求程式碼在條件特定的情況下,運行程式碼,否則就不動作。

if 的寫法為:

if(條件){
  條件成立後運行程式碼;
}

其中,第一行(含if行)為判斷式,第二行(條件成立後運行程式碼)為陳述式。

只要條件式不成立,就不運行陳述式。

ex:

var Amy = "girl";

if(Amy == "girl") {
  console.log("Hello, girl!");
}

要特別注意的是,Amy == "girl"中要用==,因為不是賦予值,而是比較是否相等。

因為 if 在條件不成立時不會輸出任何資料,因此當不清楚程式碼沒有運行的原因,且在Chrome的Console中沒有錯誤時,console.log()是很好的檢查工具。

if...else

和上面的 if 不同的是,多了一段else程式碼,在 if 的要求條件不成立時,就會運行else內的程式碼。

if...else的寫法為:

if(條件){
  條件成立後運行程式碼;
}else{
  條件不成立時運行程式碼;
}

當 if 內的條件不成立時,一定會運行 else部分的程式碼。

ex:

var Amy = "girl";

if(Amy == "girl") {
  console.log("Hello, girl!");
}else {
  console.log("Hello, user!");
}

else if

當有條件1、條件2⋯⋯,再加上以上皆非這個選項,有多達三個或三個以上的條件選項時,就要用到else if。

可以else if 不斷增加判斷式,沒有限制,只要最後接上else和以上條件皆非食運行的程式碼即可。

但要特別注意的是,else if 只要運行了其中一段陳述式的程式碼,就不會再往下運行,所以條件的順序安排非常重要。

if(條件1){
  條件1成立後運行程式碼;
}else if(條件2){
  條件2成立後運行程式碼;
}else{
  條件都不成立時運行程式碼;
}

ex:

var pay = 0;
var rentDay = 28;

if(rentDay <= 1){ // 1天
  pay = 100;
  console.log("$"+pay);
}else if(rentDay > 1 && rentDay <= 14){ //2-14天
  pay = 500;
  console.log("$"+pay);
}else if (rentDay > 14 && rentDay <= 30){ //15-30天
  pay = 800;
  console.log("$"+pay);
}else { // 超過30天
  pay = 1000;
  console.log("$"+pay);
}

條件式多的時候,建議寫註解,方便判斷,也有利於以後的維護。

switch

當else if 數量太多,且條件不是範圍類型,而是有明確的選項值時,建議用switch更好。

switch的寫法為:

switch(變數或true){
  case 符合值1:
    執行程式碼;
    break;
  case 符合值2:
    執行程式碼;
    break;
  default:
    執行程式碼;
    break;
}

第一行(含switch行)為表達式,小括弧中通常會放變數,也可以放true,代表switch的條件判斷成立,可以執行下面的case的比對,符合case後的值,就執行該case段的程式碼。

case接著值之後,要加一個半形冒號(:),再接符合後該運行的程式碼,不要忘記的是,每個case最後都要寫break,阻止程式碼運行結束後繼續往下執行。

default相當於 if 判斷式當中的else,通常放在所有case結束的後面,但也可以放在任何一個case前後。

ex:

var dots = 3;

switch(dots){
  case 0:
    console.log('Nothing.');
    break;
  case 1:
    console.log('A dot.');
    break;
  case 2:
    console.log('A line.');
    break;
  case 3:
    console.log('A triagle.');
    break;
  case 4:
    console.log('A quadrilateral.');
    break;
  default:
    console.log('A polygon.');
    break;
}

switch和else if 的差異

switch和else if 基本功能相同,所以任何else if 判斷式,都可以改寫成switch。像上方else if 的例子:

var pay = 0;
var rentDay = 28;

if(rentDay <= 1){ // 1天
  pay = 100;
  console.log("$"+pay);
}else if(rentDay > 1 && rentDay <= 14){ //2-14天
  pay = 500;
  console.log("$"+pay);
}else if (rentDay > 14 && rentDay <= 30){ //15-30天
  pay = 800;
  console.log("$"+pay);
}else { // 超過30天
  pay = 1000;
  console.log("$"+pay);
}

就可以改寫成:

var pay = 0;
var rentDay = 28;

switch(true){
  case (rentDay <= 1):
    pay = 100;
	  console.log("$"+pay);
    break;
  case (rentDay > 1 && rentDay <= 14):
    pay = 500;
	  console.log("$"+pay);
    break;
  case (rentDay > 14 && rentDay <= 30):
    pay = 800;
	  console.log("$"+pay);
    break;
  default:
    pay = 1000;
  	console.log("$"+pay);
}

但switch通常還是多使用在有明確的、固定的值這種情況,像是:

var gene = "XX";

switch(gene){
  case "XX":
		console.log("Female");
    break;
  case "XY":
	  console.log("Male");
    break;
  default:
    console.log("Other Situation");
    break;
}

真正讓兩者有差異的,在於效能。

switch效能較else if好,因為switch只會先比對case後的值,符合才執行該case的程式碼,else if 就算不符合不執行,但仍然會由上到下掃描過該段程式碼,因此效能較差。

所以當判斷條件較多時,通常會選擇switch,但若選擇用else if 來撰寫程式碼也沒有關係。

內容參考課程範圍

  • 六角學院 JavaScript 入門篇 - 學徒的試煉 Section 7

上一篇
JS讀書筆記30天 - Day05 物件
下一篇
JS讀書筆記30天 - Day07 迴圈
系列文
JS讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言