JavaSctipt 小學 — 運算子

Jordan Tseng
JordanTTCDesign
Published in
6 min readDec 1, 2020

運算子有非常多,算術運算子、指派運算子、比較運算子、邏輯運算子、二元運算子、三元運算子等,初期我們先介紹「比較運算子」和「邏輯運算子」吧👍

👉比較運算子

比較運算子就是用來比較運算子兩邊值 (可能是字串、數值、物件、布林等等),兩者比較後會得到 truefalse ,而再利用這個結果去做判斷式或其他的事情。

注意如果兩邊的值是不同型態,JavaScript 會嘗試將它們在背景 (自動) 轉型到同樣型態後,再做比較。

像下面的 字串 '1' 會先轉換成數字再去做比較:

var result = 1 == '1';
console.log(result);//true

比較運算子總共有幾項:

  1. == → 等於
  2. != → 不等於
  3. === → 嚴謹模式的等於
  4. !== → 嚴謹模式的不等於
  5. > 大於 、< 小於、>= 大於等於、<= 小於等於

讓我們娓娓到來~

==等於

超簡單😜~用來比較兩者是否相等,等於的話就回傳 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) 來比較。

👉邏輯運算子

來看看邏輯運算子有哪些

  1. && → AND 同時
  2. || → OR 或
  3. ! → 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 人的一天

--

--