JavaSctipt 小學 — 運算子
運算子有非常多,算術運算子、指派運算子、比較運算子、邏輯運算子、二元運算子、三元運算子等,初期我們先介紹「比較運算子」和「邏輯運算子」吧👍
👉比較運算子
比較運算子就是用來比較運算子兩邊值 (可能是字串、數值、物件、布林等等),兩者比較後會得到 true
或 false
,而再利用這個結果去做判斷式或其他的事情。
注意如果兩邊的值是不同型態,JavaScript 會嘗試將它們在背景 (自動) 轉型到同樣型態後,再做比較。
像下面的 字串 '1'
會先轉換成數字再去做比較:
var result = 1 == '1';
console.log(result);//true
比較運算子總共有幾項:
==
→ 等於!=
→ 不等於===
→ 嚴謹模式的等於!==
→ 嚴謹模式的不等於>
大於 、<
小於、>=
大於等於、<=
小於等於
讓我們娓娓到來~
==等於
超簡單😜~用來比較兩者是否相等,等於的話就回傳 true,不等於就回傳 false。
var result = 1 == (2-1);
console.log(result);//true
!=不等於
跟 == 相反,比較兩者是否不相等,不等於的話就回傳 true,等於就回傳 false。
var string = '哈摟你好嗎?'
var result = string != '哈摟你好嗎?';
console.log(result);//false
看到這裡覺得三小🧐?啥簡單的東西。但是注意接下來的喔~
=== 等於(嚴謹模式)
先解釋一下什麼是嚴謹模式? 就是不會自動轉換型別,例如上面的 1 =='1'
,明明一個是數字一個是字串,但是因為自動轉換型別結果回傳 true,而 === 卻不會,如下面的程式碼,會回傳 false:
var string = '101'
var result = string === 101;
console.log(result);//false
另外在 null == undefined 的情況下會得到 true,改成用嚴謹模式 null === undefined 之後,反而會得到的 false,為避免這種情況,會建議盡量使用 === 避免錯誤😎。
!== 不等於 (嚴謹模式)
跟上面一樣不會自動轉型,所以再拿上面的完全一樣程式碼來看,結果當然是 true。
var string = '101'
var result = string === 101;
console.log(result);//true
附上自動轉型的規則
在 ==
或 !==
的比較運算式下,若是雙方的資料類型不同時,自動會進行型態轉換,下面說一下它的轉換規則:
- 當字串和數字做比較時,字串會先透過
Number()
嘗試轉型為數字後再進行比較。 - 只要其中一個值為 Boolean, true 和 false 轉為 1 和 0。
- 如果其中一方是物件,而另一方是基本型別的情況下,則會先透過物件的
valueOf()
方法取得對應的基本型別的值,再進行比較。 NaN
不等於NaN
,不管是兩個等號或三個等號都一樣。- 兩個物件比較時,要看是否是同一個實體,只有在指向同一個「實體」時才會回傳
true
。
> 大於 、< 小於、>= 大於等於、<= 小於等於
這個基本上有上過學就會知道,就是比大小摟~
var Jordan = 28;
var Zoe = 26;
var Peter = 28;
//來比較看看誰老誰年輕
console.log(Jordan>Zoe);//true
console.log(Zoe>Peter);//false
console.log(Jordan>Peter);//false
console.log(Jordan>=Peter);//true
*比大小跟前面的比相等時,當兩邊值的型態不同時,都會進行型態轉變,跟比相等的型態轉變規則相同,但是要多加一個:
- 如果兩邊的值都是字串,會依照字母的順序 (standard lexicographical ordering) 來比較。
👉邏輯運算子
來看看邏輯運算子有哪些
- && → AND 同時
- || → OR 或
- ! → NOT 不
&& 同時
&&
只有在兩邊的值都是True時才會回傳True,若其中一方是 false 的情況下,則得到 false 。
var result1 = true && true; // t && t 回傳 true
var result2 = true && false; // t && f 回傳 false
var result3 = false && (3 == 4); // f && f 回傳 false
用一個實例來解說,今天是品牌服飾會員日只要有 vip 以及當天消費滿1000元就可以有七折,我們來看看是否有符合吧:
var vip = true;
var spend = 1200;
var vipDiscount = vip==true && spend >=1000;
console.log(vipDiscount);//true
|| 或
||
在 兩個值有任一個是True 時就會回傳 True,只有在兩側皆為 false 的情況下才會得到 false 。
var result1 = true || true; // t && t 回傳 true
var result2 = true || false; // t && f 回傳 true
var result3 = false || (3 == 4); // f && f 回傳 false
用一個實例來解說,今天大特價只要有 vip 或是當天消費滿1000元就可以有折扣:
var vip = true;
var spend = 900;
var vipDiscount = vip==true || spend >=1000;
console.log(vipDiscount);//true
! 不~就是唱反調
!
原本是 true 的結果經過 ! 轉換後會得到 false,而 false 會變成 true。簡單來說就是會把原本的改成相反的。
var n1 = 1<3;//明明是true
var result1=!(n1);//回傳true
var n2 = 3>4;//明明是false
var result2=!(n2);//回傳true
懂的利用 邏輯運算子 搭配
if else
就能夠做出很多元的判斷動作摟~
網路參考文章:
重新認識 JavaScript: Day 06 運算式與運算子 — iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
其實 &&
和 ||
有一個 truthy 和 falsy的部分不太了解,但先補充網路文章:
重新認識 JavaScript: Day 08 Boolean 的真假判斷 — iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天