運算子

如果要進行四則運算可以透過運算子來進行:

var a = 1 + 2;

但其實運算子也算是一種 JavaScript 語言中內建的 function ,
+ 運算子的 function 實際上會是像下面這樣:

function +(a, b) {
  // 回傳 a 加 b 的總和
}

那如果像是改成以下會是如何執行呢?

var a = 3 + 4 * 5;

雖然在數學的四則運算中我們已經知道先乘除後加減的道理,
但在 javascript 中運算子是依據優先性與相依性來執行的,
因為 * 運算子的優先性大於 + 運算子,
所以會先執行 4 * 5 , 再把 4 * 5 的回傳結果傳入 + 運算子 function 中與 3 加總,
會得到 23 的結果.

再來看以下程式碼:

var a = 2, b = 3, c = 4;

a = b = c;

這時候 = 運算子的優先性相同,
所以會改成看優先性,
優先性分成從左到右執行運算子或從右到左執行運算子,
= 運算子的相依姓是從右到左,
所以會先執行 b = c, 執行完會回傳 4,
再接著執行 a = 4, 執行後 a 的值也就變成 4 了

可以從以下頁面最下方的運算子表格中查看優先性(Precedence)與相依性(Associativity):
運算子優先性總表

強制轉型

在 javascript 中,我們可以把 字串和數字相加:

var a = 1 + '2';

結果會出現 12:
這其實是 javascript 引擎替我們將數字 1 強制轉型成字串 '1'

再先來看看以下程式碼會回傳 true 或 false

console.log(3 < 2 < 1);

結果會是 false ,
這在數學中不合理,

但是在 javascript 中,因為運算子也算是一種 function ,
而且執行運算子時還會依據優先性與相依姓來執行,

< 運算子的相依性是從左到右執行的,
所以會先執行 3 < 2 ,
由於 3 < 2 的結果回傳 false,

接著執行 false < 1 時 javacript 引擎又會自動把 false 強制轉型成 0,
所以實際上執行時是執行 0 < 1 ,回傳的結果才會是 true.

在 javascript 中可以透過內建的 Number function 來將非數字型別的值轉成數字型別 ,但建議不要自己手動這樣做,這邊只是方便展示某個型別的值自動轉型成數字後的值:

你可能會預期 undefined 自動轉型成數字型別後會變成 0,
但卻是 NaN ,
要特別留意自動轉型.

那如果我們要確認兩個值是否相等呢?
我們通常會直覺想要透過 == 運算子來比較,
但透過 == 運算子來確認兩個值是否相等時,javascript 會試圖先幫我們自動強制轉型,導致結果常常跟我們預期的不一樣:

3 == 3 // true
"3" == 3 // false
false == 0 // true

var a = false;
a == 0 // true

null == 0 // false
null < 1 // true
"" == 0 // true
"" == false // true

要避免在確認兩個值相等或不相等時出現預期外的結果,
可以改用 === 或 !==,
這樣就可以變免 javascript 引擎在執行比較運算子時替我們將變數自動強制轉型:

3 === 3 // true
"3" === "3" // true
"3" === 3 // false

var a = 0;
var b = false;

if(a === b) { // false
  console.log("a equal b");
} else {
  console.log("not equal"); // 出現在開發者工具的 console 中
}

改用 === 與 !== 來確認變數的值是否相等會是一種更謹慎與符合預期的作法,
可以減少你寫出 bug 與除錯的時間.

可透過以下表格查詢不同型別的值透過不同運算子與新的方法比較後的真值表:

Equality comparisons and sameness