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

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

算數運算子

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

運算符	說明	運算符	說明
+	加法	++	自增
-	減法	--	自減
*	乘法	**	次方
/	除法	%	餘數

一元運算符

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

字串串接

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

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

自增 與 自減

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

let a = 10;
let b = a++; // b = 10
let c = 10;
let d = ++c; // d = 11

console.log(a, b, c, d) // 11, 10, 11, 11

邏輯運算子

運算符	說明	判斷中斷規則	返回值
!	非（not）	無	返回與原本布林值相反的值
&&	和（and）	如果左側為 false，則不判斷右側值	如果左側為 false，返回左側的值，反之亦然
∣∣	或（or）	如果左側為 true，則不判斷右側值	如果左側為 false，返回右側的值，反之亦然

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

let a = 123;
let b = 'abc';
let 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，返回右側值

賦值運算子

運算符	說明
=	最基本的賦值
+=	a = a + 2 與 a += 2 一樣
-=	a = a - 2 與 a -= 2 一樣
*=	a = a * 2 與 a *= 2 一樣
/=	a = a / 2 與 a /= 2 一樣
%=	a = a % 2 與 a %= 2 一樣

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

比較運算子

運算符	說明
>	是否大於
<	是否小於
>=	是否大於等於
<=	是否小於等於
==	是否相等
!=	是否不相等
===	是否全等
!==	是否不全等

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

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，包括他跟自己比對也是。

NaN == NaN;  // false
NaN != NaN;  // true

總結

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

參考資料

• 008 天 重新認識 JavaScript