JavaScript 的 if 條件式
運算子
要來正式介紹 if 條件式之前，必須要先來介紹運算子，因為 if 條件式內的條件會由運算子來進行比較與運算。
比較運算子
==與!=僅單純比較運算元不包含型別
==運算元 等於，回傳true，不等於回傳false，無關型別!=運算元 不等於，回傳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。
===與!==除了運算元以外還包含型別一起比較
===嚴格等於，運算元及型別皆須相等則回傳true，否則有一任何不相等則回傳false!==嚴格不等於
會回傳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]);
}else{
console.log ('天氣不穩定，通通都帶好了');
}所以甚麼時候用 if，什麼時候用 switch 呢？
若是判斷的值可以計算，或是介於一個區間，可使用 大於、小於 這類運算子，簡單來說像是數字類型的，請用
if。若是判斷的值可以用比對的方式來看相同不相同，就像是字串一樣，那就可以用
switch了。
以上就是今天介紹的 if 條件式，謝謝大家。
參考資料
- 六角學院課程：JavaScript 入門篇 - 學徒的試煉
標籤雲
文章列表