iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
2
Modern Web

RE:從零開始的學習 JS 生活系列 第 7

EP.6 RE:從零開始的學習 JS 生活-第六日

  • 分享至 

  • xImage
  •  

前言

轉生第六日,這一篇將會來介紹運算子,雖然前面有接觸過一些運算子,但是這一篇會針對常見的運算子做一下介紹。

運算子

一般開發上,我們最常見的基本運算子就是等號運算子(=)以及點運算子(.),那麼運算子其實還有其他種,例如加號運算子(+)、減號運算子(-)、乘號運算子(*)、除號運算子(/)、遞增運算子(++)、遞減運算子(--)、餘數運算子(%)等等,而上述這幾個又稱之為算術運算子

當然還有另一種運算子,分別為大於運算子(>)、小於運算子(<)、大於等於運算子(>=)、小於等於運算子(<=)等等,以上這幾種運算子則是稱之為比較運算子

運算子

最後還有一個運算子,叫做邏輯運算子,但是再轉生第六日暫時先不學習。

算術運算子

算術運算子在前面已經稍作介紹過,算術運算子顧名思義就是做計算的,所以我就直接來看範例比較快:

10 + 10; // 20
10 - 2; // 8
10 * 2; // 20
10 / 2; // 5

// 遞增運算子必須透過變數來增加
var a = 10;
a++; // 11 ++ 代表 +1

var b = 10;
b--; // 9 -- 代表 -1

10 % 4; // 2

比較運算子

而比較運算子就是在兩者之間或複數之間做出一個比較,比較後將會回傳布林值,也就是 true or false,所以這邊讓我們直接來看一下範例:

10 > 5; // true
10 < 5; // false
10 >= 10; // true,若是 10 > 10; 則為 false
10 <= 5; // false

另外比較運算子中還有幾個常見的運算子,分別為

  • == & === - 相等運算子
  • != & !== - 不相等運算子

那你可能會好奇等於預算子的 == & !==== & !== 有什麼差別,簡單來講 == & != 就是寬鬆比對,當你輸入 1 == '1'; 會得到 true,那 === & !== 就是嚴格比對,會連型別都替你做比對,所以當你輸入 1 === '1'; 是會得到 false 的。

嚴格比對與寬鬆比對

實際開發也會建議使用嚴格比對取代寬鬆比對,所以我們就可以這樣子整理

  • 一般相等 or 不相等 (寬鬆比對)
  • 嚴格相等 or 不相等 (嚴格比對)

另外還有另一個特別的語法,也就是 Object.isObject.is 是 ES6 才加入的語法,但是 Object.is 是屬於嚴格比對:

Object.is(1, '1'); // false
Object.is('1', '1'); // true

關於 Object.is 這個語法可以看 MDN 提供的文件說明

字串相加運算子

最後在講一個特別的運算子,也就是加號運算子(+),其實加號運算子它非常特別,除了可以當作算術運算子之外,它當作字串相加運算子可以將兩個字串相加,例如:

var a = 'Hello' + ' World';
a; // Hello World

但是有一種狀況是一個是數字型別,另一個則是字串型別的狀況,前面我們知道加號運算子可以對數字相加,但是如果是這樣子的形式會發生什麼狀況呢?

var a = 1 + '1';
a; // 11

其實會得到 11 而不是 2,理解的方式很簡單,只要裡面有字串(也就是有單引號或雙引號包覆),那麼就一定會是字串相加。

但是這邊也有一個滿特別的狀況,如果你改成減號運算子(-),那就會變得很妙:

var a = 1 - '1';
a; // 0

你會發現竟然會得到答案 0,那這部分與 JavaScript 的自動轉換型別有關係,後面會在介紹這個東西。

最後如果你嘗試使用字串與字串做乘法的動作,只會得到一個錯誤訊息,也就是 NaN,而這意思是指 not a number 就是在說這不是一個數字:

var a = 'qq';
var b = 'aa';
a * b; // NaN

not a number

結尾

下一篇的 RE:從零開始的學習 JS 生活-第六日 將會介紹函式。

本文同步發表:https://hsiangfeng.github.io/javascript/20190921/1280863990/


上一篇
EP.5 RE:從零開始的學習 JS 生活-第五日
下一篇
EP.7 RE:從零開始的學習 JS 生活-第七日
系列文
RE:從零開始的學習 JS 生活32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言