運算子

要來正式介紹 if 條件式之前，必須要先來介紹運算子，因為 if 條件式內的條件會由運算子來進行比較與運算。

比較運算子

• == 與 != 僅單純比較運算元不包含型別

1. == 運算元 等於，回傳 true，不等於回傳 false，無關型別

2. != 運算元 不等於，回傳 false，不等於回傳 true，無關型別

== 與 != 是拿來做比較用的，比較什麼東西呢？比較是否一樣與不一樣，也就是是否等於和是否不等於，但是只限於運算元的值來做比較，不包含型別，那麼比較出來的值只有 Yes 或是 No 而已，但是屆時 console 卻不是顯示 Yes 或是 No，而是顯示 true 或是 false，這個叫做布林值 (Boolean)，布林值就是只有 true 和 false 兩種值而已。

• 所以是怎麼個比法呢？就像下面這樣

var A = 1; // 數字 1
var B = 2; // 數字 2
var C = 2; // 數字 2
var D = '1'; // 字串 1

var check1 = A == B;
var check2 = B == C;
var check3 = A != C;
var check4 = B != C;
var check5 = A == D;

console.log(check1); // console 顯示 false
console.log(check2); // console 顯示 true
console.log(check3); // console 顯示 true
console.log(check4); // console 顯示 false
console.log(check5); // console 顯示 true

https://www.jb51.net/article/93426.htm(依照此文章說明修改!=與!==用法)

• 這邊來進行一個白話文解析的動作

首先我們先宣告 A、B、C 及 D 四個變數，讓他們分別 var A = 1;、var B = 2;、var C = 2;及var D = '1'，然後我們再宣告五個變數 check1、check2、check3、check4 及 check5。

A == B; 的意思是說，請問 A 的運算元是否等於 B 的運算元，由於 A 是 1 而 B 是 2，所以 A、B 等於這件事情不正確，所以會得到一個 false。

B == C; 的意思是說，請問 B 的運算元是否等於 C 的運算元，由於 B 是 2 而 C 也是 2，所以 B、C 相等這件事情正確，所以會得到一個 true。

A != C; 的意思是說，請問 A 的運算元是否不等於 C，由於 A 是 1 而 C 是 2，所以 A、C 不等於這件事情正確，所以會得到一個 true。

B != C; 的意思是說，請問 B 的運算元是否不等於 C，由於 B 是 2 而 Ｃ 也是 2，所以 B、C 不等於這件事情不正確，所以會得到一個 false。

A == D 的意思是說，請問 A 的運算元是否等於 D 的運算元，由於 A 是 1 而 D 也是 1，雖然 A 是數字，D 是字串，他們的型別不同，但是他們的運算元仍是相同的，所以 A、D 等於這件事情正確，所以會得到一個 true。

• === 與 !== 除了運算元以外還包含型別一起比較

1. === 嚴格等於，運算元及型別皆須相等則回傳 true，否則有一任何不相等則回傳 false

2. !== 嚴格不等於
   會回傳 true 的條件有下面這三個：
   a. 運算元不相等，型別相等，舉例 '1' !== '2'
   b. 運算元不相等，型別不相等，舉例 1 !== '2'
   c. 運算元相等，型別不相等，舉例 1 !== '1'
   會回傳 false 的條件只有下面這一個：
   d.運算元相等，型別相等，舉例 1 !== 1

var A = 1;
var B = '1';
var C = 2;
var D = '2';

var check1 = A === B;
var check2 = C === D;
var check3 = A !== C;
var check4 = B !== D;
var check5 = A !== D;
var check6 = B !== C;

console.log(check1); // console 顯示為 false
console.log(check2); // console 顯示為 false
console.log(check3); // console 顯示為 true
console.log(check4); // console 顯示為 true
console.log(check5); // console 顯示為 true
console.log(check6); // console 顯示為 true

• 這邊我們仍來進行一個白話文解析的動作

首先我們先宣告 A、B、C 及 D 四個變數，讓他們分別 var A = 1;、var B = '1';、var C = 2;及var D = '2'，然後我們再宣告六個變數 check1、check2、check3、check4、check5 及 check6。

A === B; 的意思是說，請問 A 的運算元與型別是否皆等於 B 的運算元與型別，由於 A 是 1 的數字而 B 是 '1' 的字串，所以 A、B 嚴格等於這件事情不正確，所以會得到一個 false。

C === D; 的意思是說，請問 C 的運算元與型別是否皆等於 D 的運算元與型別，由於 C 是 2 的數字而 D 是 '2' 的字串，所以 C、D 嚴格等於這件事情不正確，所以會得到一個 false。

A !== C; 的意思是說，請問 A 的運算元與型別是否有任一不等於 C 的運算元與型別，由於 A 是 1 的數字而 C 是 2 的數字，符合條件 運算元不相等，型別相等，A、C 嚴格不等於這件事情正確，所以會得到一個 true。

B !== D; 的意思是說，請問 B 的運算元與型別是否有任一不等於 D 的運算元與型別，由於 B 是 '1' 的字串而 D 是 '2' 的字串，符合條件 運算元不相等，型別相等，B、D 嚴格不等於這件事情正確，所以會得到一個 true。

A !== D; 的意思是說，請問 A 的運算元與型別是否有任一不等於 D 的運算元與型別，由於 A 是 1 的數字而 D 是 '2' 的字串，符合條件 運算元不相等，型別不相等，A、D 嚴格不等於這件事情正確，所以會得到一個 true。

B !== C; 的意思是說，請問 B 的運算元與型別是否有任一不等於 C 的運算元與型別，由於 B 是 '1' 的字串而 C 是 2 的數字，符合條件 運算元不相等，型別不相等，B、C 嚴格不等於這件事情正確，所以會得到一個 true。

• > 與 < 還有 >= 與 <=

這個很簡單，就是 大於 和 小於 以及 大於等於 還有 小於等於，沒啥特別的，下面的範例程式碼應該也很好理解，就不再做多餘的解釋了。

var A = 30;
var B = 30;
var C = 50;
var D = 60;

var check1 = A > B;
var check2 = A >= B;
var check3 = C < B;
var check4 = C < D;

console.log(check1); // console 顯示 false
console.log(check2); // console 顯示 true
console.log(check3); // console 顯示 false
console.log(check4); // console 顯示 true

邏輯運算子

• && 這個叫做 AND 的意思

用法是這樣的，重點在於條件必須同時成立。

var A = 30;
var B = 30;
var C = 50;
var D = 60;

var check1 = C > B && C < D;
var check2 = B >= A &&  B < C;
var check3 = D > C && A > B;
var check4 = A <= B && A > D;

console.log(check1); // console 顯示 true
console.log(check2); // console 顯示 true
console.log(check3); // console 顯示 false
console.log(check4); // console 顯示 false

• 這裡我們仍來進行一個白話文解析的動作

首先我們先宣告 A、B、C 和 D 四個變數，讓他們分別 var A = 30;、var B = 30;、var C = 50; 還有 var D = 60;，然後我們再宣告四個變數 check1、check2、check3、check4。

C > B && C < D 的意思是說，請問 C = 50 是否大於 B = 30 而且 C = 50 是否小於 D = 60，經比較後，這兩件事情皆成立，所以會得到一個 true。

B >= A && B < C 的意思是說，請問 B = 30 是否大於等於 A = 30 而且 B = 30 是否小於 C = 50，經比較後，這兩件事情皆成立，所以會得到一個 true。

D > C && A > B 的意思是說，請問 D = 60 是否大於 C = 50 而且 A = 30 是否大於 B = 30，經比較後，這兩件事情僅 D > C 成立，所以會得到一個 false。

A <= B && A > D 的意思是說，請問 A = 30 是否小於等於 B = 30 而且 A = 30 是否大於 D = 60，經比較後，這兩件事情僅 A <= B 成立，所以會得到一個 false。

• || 這個叫做 OR 的意思

用法是這樣的，重點在於條件擇一成立即可。

var A = 30;
var B = 30;
var C = 50;
var D = 60;

var check1 = C > B || C < D;
var check2 = B >= A ||  B < C;
var check3 = D > C || A > B;
var check4 = A <= B || A > D;

console.log(check1); // console 顯示 true
console.log(check2); // console 顯示 true
console.log(check3); // console 顯示 true
console.log(check4); // console 顯示 true

所以我們用相同的範例再來解釋一次，當我們把 && 都改成 || 後，原本條件僅有一個成立的 check3 及 check4 都從 false 變成了 true 了。

• ! 這個叫做 NOT 的意思

用於反轉傳回的值，本來是 true 會變成 false，本來是 false 會變成 true。

var A = 1;
var B = '1';

check1 = !(A == B);
console.log(check1); // console 顯示為 false

check2 = !(A === B);
console.log(check2); // console 顯示為 true

之前在介紹 === 有用過了這個例子，現在我們加上了 ! 以後，本來是 true 的變成了 false，本來是 false 的就變成了 true 了。

if 條件式

終於我們要來正式介紹 if 條件式了，if 條件式未來會廣泛的運用在各個地方，用來進行很多條件的判斷。

if 寫法

var weather = '太陽';

if (weather == '太陽'){
    console.log('今天晴空萬里');
}else{
    console.log('今天天氣不是很好');
}
// console 顯示 '今天晴空萬里'

首先我們先 var weather = '太陽';，再來開始我們的 if，後面接著就是比較的條件，我們的條件是 (weather == '太陽')，若比較出來是 true，就執行後面 {} 內的程式 console.log('今天晴空萬里')，後接一個 else{console.log('今天天氣不是很好');} 的意思是說，如果前面的條件比較得到 false，那就執行這個 console.log('今天天氣不是很好');。

else if 寫法，多條件比較

var temp = 28;
// 氣溫

function weather(clothes){
    console.log('我今天想穿' + clothes);
}

if (temp <= 20){
    weather('羽絨衣毛褲');
}else if (temp <= 30 && temp > 20){
    weather('短T恤長褲');
}else if (temp > 30){
    weather('短褲短袖');
}else{
    console.log('我不知道要穿什麼，怎麼辦呢？')
}

// console 顯示 '我今天想穿短T恤長褲'

首先，var temp = 28;，然後再寫一個 function weather(clothes)，等後面的 if 比較出條件後回過來執行這個 function，再來就是 if，後面比較的條件是 (temp <= 20)，若是 true，就執行 weather('羽絨衣毛褲');，若是 false，就繼續後接的 else if，繼續下一個比較條件 (temp <= 30 && temp > 20)，若是 true，就執行 weather('短T恤長褲');，若是 false，就繼續後接的 else if，繼續下一個比較條件 (temp > 30)，若是 true，就執行 weather('短褲短袖');，若是 false，就執行最後接的else{console.log('我不知道要穿什麼，怎麼辦呢？')}，意思就是前面的筆記條件全部都是 false 的話，就執行 console.log('我不知道要穿什麼，怎麼辦呢？')。

switch 寫法

這是啥？怎麼跑來了一個和 if 不相干的東西呢？switch 是一個和 if 有類似功能的語法，但與 if 不一樣的是，if 的小括弧 () 內條件若成立，才會跑後面大括弧 {} 內的程式，而 switch 僅有 case 成立時，才會跑後面的 function，然後因為後面接了一個 break，所以程式就會在這邊跳出，反觀 if 則會全部跑完，所以在編譯的速度上來說，switch 比較不耗資源。

• 這個就是使用 switch 寫法

var weather = '下雨';
var clothes = ['遮陽帽', '薄外套', '雨傘'];

function putonClothes (fitting){
    console.log('今天要帶' + fitting);
}

switch (weather){
    case '太陽': putonClothes (clothes[0]);
    break;
    case '陰天': putonClothes (clothes[1]);
    break;
    case '下雨': putonClothes (clothes[2]);
    break;
    default: console.log ('天氣不穩定，通通都帶好了');
    break;
}

// console 顯示 今天要帶雨傘

一樣的，我們先把需要的變數 var weather 與 var clothes 宣告好，然後 function putonClothes (fitting) 也寫好，再來後面就開始我們的 switch 了，後面的 () 內要放進去的是要比對的值，我們這邊放的是 (weather) 這個變數，接下來 {} 內就是要開始和前面的 (weather) 進行比對了，case '太陽': putonClothes (clothes[0])，這個的意思是 weather 若等於 '太陽'，則執行 putonClothes (clothes[0])，後接 break 是指若比對成功，則程式就從這個地方跳出，不執行後面的 case 了，若比對不成功，則繼續往後面的 case '陰天': putonClothes (clothes[1]); 進行比對，若成功一樣就跳出，若比對不成功，就往下一個 case '下雨': putonClothes (clothes[2]);進行比對，若成功一樣就跳出，若不成功則往後執行 default: console.log ('天氣不穩定，通通都帶好了');，這個 default 的意思就是，前面的 case 全部都沒有比對成功，所以就執行這個 console.log ('天氣不穩定，通通都帶好了');的意思，所以，經比對結果，Console 顯示 '今天要帶傘'。

若改用 if 改寫來得到相同的產出呢？就變成下面這樣了，

var weather = '下雨';
var clothes = ['遮陽帽', '薄外套', '雨傘'];

function putonClothes (fitting){
    console.log('今天要帶' + fitting);
}

if (weather == '太陽'){
    putonClothes (clothes[0]);
}else if (weather == '陰天'){
    putonClothes (clothes[1]);
}else if (weather == '下雨'){
    putonClothes (clothes[2]);
}elsr{
    console.log ('天氣不穩定，通通都帶好了');
}

所以甚麼時候用 if，什麼時候用 switch 呢？

• 若是判斷的值可以計算，或是介於一個區間，可使用 大於、小於 這類運算子，簡單來說像是數字類型的，請用 if。

• 若是判斷的值可以用比對的方式來看相同不相同，就像是字串一樣，那就可以用 switch 了。

以上就是今天介紹的 if 條件式，謝謝大家。

參考資料

• 六角學院課程：JavaScript 入門篇 - 學徒的試煉