iT邦幫忙

第 11 屆 iThome 鐵人賽

2
自我挑戰組

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列 第 38

JavaScript 的 if 條件

image

運算子

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

比較運算子

  • ==!= 僅單純比較運算元不包含型別
  1. == 運算元 等於,回傳 true,不等於回傳 false,無關型別

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

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

  • 所以是怎麼個比法呢?就像下面這樣
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(依照此文章說明修改!=與!==用法)

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

首先我們先宣告 ABCD 四個變數,讓他們分別 var A = 1;var B = 2;var C = 2;var D = '1',然後我們再宣告五個變數 check1check2check3check4check5

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 而 C 也是 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
  • 這邊我們仍來進行一個白話文解析的動作

首先我們先宣告 ABCD 四個變數,讓他們分別 var A = 1;var B = '1';var C = 2;var D = '2',然後我們再宣告六個變數 check1check2check3check4check5check6

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
  • 這裡我們仍來進行一個白話文解析的動作

首先我們先宣告 ABCD 四個變數,讓他們分別 var A = 30;var B = 30;var C = 50; 還有 var D = 60;,然後我們再宣告四個變數 check1check2check3check4

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

所以我們用相同的範例再來解釋一次,當我們把 && 都改成 || 後,原本條件僅有一個成立的 check3check4 都從 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 weathervar 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 入門篇 - 學徒的試煉

上一篇
JavaScript 的陣列 (Array) 與物件 (Object)
系列文
破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師38
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
阿展展展
iT邦好手 1 級 ‧ 2019-12-05 10:22:11

阿 ~~ typeof 也很好用哦~~~
/images/emoticon/emoticon42.gif

Alec iT邦新手 3 級 ‧ 2019-12-05 16:54:48 檢舉

/images/emoticon/emoticon08.gif

1
listennn08
iT邦高手 5 級 ‧ 2019-12-05 11:21:34

== 的不等於是 !=
===的不等於才是 !==
型態如果不一樣結果也不一樣唷

Alec iT邦新手 3 級 ‧ 2019-12-05 16:54:20 檢舉

非常感謝你,剛剛查了一些資料,參考了 MDN 的說明,發現原來我的觀念在這邊是不對的,只是剛好呈現出來的值是正確的,找時間我再改寫相關的地方,謝謝你

不會~能少踩坑就少踩/images/emoticon/emoticon42.gif

Alec iT邦新手 3 級 ‧ 2019-12-06 09:05:09 檢舉

/images/emoticon/emoticon08.gif

0
wen
iT邦新手 5 級 ‧ 2020-01-30 17:45:11

else ifswitch寫法解譯真的很清楚,完全打醒我的腦袋呀XD
/images/emoticon/emoticon34.gif

Alec iT邦新手 3 級 ‧ 2020-02-07 00:45:54 檢舉

/images/emoticon/emoticon12.gif

我要留言

立即登入留言