JavaScript 運算子

在使用運算子 (Operators) 時，隨著練習題逐漸提高的複雜度，開始發現一些與自己認知不同的地方。這些不明顯的小錯誤，常常是導致程式跑不出來或出現預期外結果的原因。所以在之前筆記的基礎上，把犯過的錯誤一起整理進來，降低下次再犯的可能性。

筆記內容為學習過程中的紀錄，內容可能未臻完善，內文可能也會隨著學習過程作增減或修改。
如有錯漏，歡迎留言，謝謝!

算術運算子

基本介紹

算術運算子（arithmetic operators）: 四則運算會用到的運算子，負責將變數進行加、減、乘、除。

運算子	功能	範例	結果	說明
+	加	1 + 2	3	也可以用來連接字串
-	減	4 - 3	1
*	乘	2 * 4	8
/	除	9 / 3	3
**	指數	3 ** 2 9 ** (1/2)	9 3	計算 a 的 b 次方
%	取餘數	7 / 2	1	7 除以 2 結果：商等於 3，餘數等於 1
++	將值增加 1	x = 2 x++	3	同 x = x + 1，將 x 原本的值 2 再加 1。
–	將值減少 1	x = 5 x–	4	同 x = x - 1，將 x 原本的值 5 再減 1。

寫在前面的 ++ 和 --

++ 和 -- 寫在變數的前面或後面作用都是不變的，即「將變數的值再加 1 或再減 1」。但是如果放進 console.log() 裡，執行的順序會不一樣。

let x = 2            // 宣告並指派 2 的值給 x
console.log(x)       // 會印出 2

console.log(x++)     // 會印出 2 (先印出 x ，然後才加 1)
console.log(x)       // 會印出 3

console.log(++x)     // 會印出 4 (先加 1 ，然後才印出 x)

常見錯誤: 型別錯誤

JavaScript 是一個弱型別的語言，意思是說在 JavaScript 裡，型別特別容易自動轉換。進行運算時，如果變數型別不同，有時候 JavaScript 不會報錯，而是直接自動轉換型別，這也很容易造成「出現預期外結果卻很難找出原因」。

let a = '2'           // 型別: string
let b = 3             // 型別: number
console.log(a + b)    // 會印出 23 (自動將 b 型別轉換為 string )

賦值運算子

基本介紹

賦值運算子（assignment operators）中最常使用的賦值運算子就是 = ，除了 = 外還有搭配算數運算的其他賦值運算子。

運算子	範例	結果	說明
=	x = 5 y = 2	x = 5 y = 2	將值 5 賦值給 x 將值 2 賦值給 y
+=	x += y	x = 7	等同 x = x + y 的意思
-=	x -= y	x = 3	等同 x = x - y 的意思
/=	x /= y	x = 2.5	等同 x = x / y 的意思
%=	x %= y	x = 1	等同 x = x % y 的意思

比較運算子

基本介紹

比較運算子（comparison operators）: 在進行條件設定時，很常用到比較運算子，也是容易出現「粗心的錯誤」的地方。

運算子	說明	範例	結果
==	等於 (不檢查型別)	1 == ‘1’ 0 == ‘’	true true
===	等於 (檢查型別)	1 == ‘1’ 0 == ‘’	false false
!=	不等於 (不檢查型別)	1 != ‘1’ 0 != ‘’	false false
!==	不等於 (檢查型別)	1 !== ‘1’ 0 !== ‘’	true true
>	大於(不檢查型別)	3 > 1 3 > 3 1 > 3	true false false
<	小於(不檢查型別)	3 < 1 3 < 3 1 < 3	false false true
>=	大於等於(不檢查型別)	3 >= 1 3 >= 3 1 >= 3	true true false
<=	小於等於(不檢查型別)	3 <= 1 3 <= 3 1 <= 3	false true true

常見錯誤1: 型別錯誤

除了等於和不等於可以強制檢查型別，其他的比較運算子都要特別注意型別轉換問題。可以用 typeof 來檢查變數的型別。

let a = '2'             // 型別: string
let b = 3               // 型別: number
console.log(a < b)      // 結果為 true

console.log(typeof a)   // 結果為 string
console.log(typeof b)   // 結果為 number

常見錯誤2: 用錯等於

依照以前學數學的習慣，在做變數比較時，會不小心把 = 當作比較運算子使用。原本要拿來比較的變數不小心被重新賦值了，所以會跑出奇怪的結果。

let a = 3
let b = 2

// 正確 
if(a === b) {       // 如果 a 和 b 相等，則進行 (a - b)
  a - b             // 因為 a 和 b 不相等，所以不會執行
}
console.log(a - b)  // 會印出 1。此時 a 等於3；b 等於2

// 錯誤
if(a = b) {         // b 的值被指派給 a ，此時 a 等於2
  a - b             // 進行 a - b 運算(2-2)
}
console.log(a - b)  // 會印出 0。此時 a 和 b 都等於2

常見錯誤3: 比較變數區間

按照數學邏輯，如果我想知道一個變數的值是否在特定區間裡，可能會把條件這樣寫 3 < x < 10 ，然後再丟一個 x 值進行驗證，但是在 JavaScript 裡，這樣做結果會出現異常。

這樣寫的效果類似 || 的使用， 3 < x < 10 會被拆成兩段 (3 < x 和 x < 10) 進行驗證，只要其中一項符合則傳回 true。

正確方式應該要將條件拆開，並用 && 要求同時符合。

let x = 2
console.log(3 < x < 10)       // 輸出結果為 true (符合 x < 10)

let x = 11
console.log(3 < x < 10)       // 輸出結果為 true (符合 3 < x)

let x = 11
console.log(x > 3 && x < 10)  // 輸出結果為 false

邏輯運算子

基本介紹

邏輯運算子（logical operators）: 通常用於條件判斷 true or false 。

運算子	說明	範例	結果
&&	「而且」；前後條件皆相符，則回傳 true	true && true true && false false && false	true false false
||	「或」；前後條件只要有一邊為 true，則為 true	true || true true || false false || false	true true false
!	「非」，將後面接的 boolean 轉成相反的值	!true !false	false true

常見錯誤: 運算子順序

就像四則運算有「先乘除後加減」的運算順序一樣，邏輯運算子的運算順序是: && > || ，且由左至右運行。如果要打破原有順序，加上 () 是很好用的方法。

console.log(true || false && true && false)      // 結果為 true
console.log((true || false) && (true && false))  // 結果為 false

文章內容如有錯誤，歡迎留言討論！