Day.14 「基礎打穩了，就能走得更長久～」 —— JavaScript 基礎運算子

學習任何東西，都要把基礎學的扎實，基礎穩了，遇到問題就能迎刃而解。 而學習程式語言的基礎就是數學邏輯，不用到很專精，只要有基礎數學邏輯，多寫多做就能鍛鍊出寫程式邏輯的金魚腦，基礎邏輯打穩了，任何程式語言都有相似的地方，會越學越快，然後發現根本是無底洞，沒有盡頭。

算數運算子

就如同我們國小上課一樣，算數就要先從 加、減、乘、除 的基礎開始教起，而運算先後順序就如同我們國中所學的，先乘除、後加減、有括號先算括號，這對聰明的你來說，實在是小 case！

一元運算符

前面變數轉型那一篇有稍微提到使用 + 的一元運算符，來為變數轉型成數字型別。 而使用 - 的一元運算符，聰明的你，一定馬上就猜出來，是把型別變成數字型別的相反數。 typeof 本身也是一元運算符，是用來判斷型別的。

字串串接

利用 + 運算符，可以進行字串串接，當 + 兩邊其中一邊為字串（string）型態時，JavaScript 會自動幫我們把兩邊的轉型成字串型態，並進行串接。

const a = 10
const b = '10'
let c
console.log(a + b) // "1010"
console.log(b + c) // "10undefined"

自增 與 自減

++ 與 -- 可以對自己數字 增加 1 或 減少 1。 放在變數前後的位置很重要！ 當運算符在前面時 ++a，當下為變數更改後的數值，想像已經先 +1。 當運算符在後面時 a++，當下為變數的原本數值，想像已經先賦值還來不及 +1。

let a = 10
const b = a++ // b = 10
let c = 10
const d = ++c // d = 11
 
console.log(a, b, c, d) // 11, 10, 11, 11

邏輯運算子

藉由 JavaScript 任何型別都能轉換成布林值，會先轉換成布林值再進行邏輯判斷。 如果是使用 ! 返回的會是布林值，而 && 和 ∣∣ 返回的是原本的值。

const a = 123
const b = 'abc'
const c = null
let d
console.log(a && b) // "abc"    　左側為 ture ，返回右側值
console.log(a || b) // 123        左側為 ture ，判斷中斷，直接返回左側值
console.log(c && b) // null       左側為 false，判斷中斷，直接返回左側值
console.log(c || b) // "abc"      左側為 false，返回右側值
console.log(c && d) // null       左側為 false，判斷中斷，直接返回左側值
console.log(c || d) // undefined  左側為 false，返回右側值

賦值運算子

最基礎的 = 就是賦值語句，把右側的值，賦值給左側的變數。 而 = 左側添加算術運算子，能有效把原本比較長的運算式簡化。

比較運算子

用來進行比較的運算子，就跟數學課的比大小一樣。 比較運算子會對兩側值進行比對，返回的會是布林值。

1 > 2 // false
1 < 2 // true
1 <= 1 // true

== 相等 與 === 全等 的差別

簡單來說，== 比較時 JavaScript 會自動幫你轉型進行比對，而 === 則是進行嚴格比對，不會自動轉型。

1 == '1' // true
1 === '1' // false
1 != '1' // false
1 !== '1' // true
false == 0 // true

比較運算子中的特例！ NaN

在所有型別中，數字型別的 NaN 非常特別，NaN 不管跟誰比對，都是回傳 false，包括他跟自己比對也是。

Number.NaN == Number.NaN // false
Number.NaN != Number.NaN // true

總結

一開始我也以為邏輯運算子返回的都是布林值，但實際返回的並不一定是布林值，因為這個特性，讓我們在撰寫 JavaScript 會更加彈性好運用來取得我們所想要的值。 我們現在已學會了基本的宣告變數與基礎型別，也學會了基礎的運算子，接著我們就能利用目前所學的東西，來學習如何讓程式語言幫我進行條件判斷！下一個章節就來介紹條件判斷式！

參考資料

• 008 天 重新認識 JavaScript