JavaScript - 運算子優先序

你好，有抱負的程式設計師們！今天，我們將深入一個可能一開始聽起來有點令人害怕的話題，但我保證你，它其實不像看起來那麼恐怖。我們要討論的是 JavaScript 運算子優先序。把它當作編程中數學的「優先級別」吧。讓我們一起來剖析它！

什麼是運算子優先序？

在我們跳進深水區之前，讓我們先從基礎開始。運算子優先序就像你在數學課上學到的運算順序。記得 PEMDAS（括號、指數、乘法、除法、加法、減法）嗎？JavaScript 也有它自己的版本！

運算子優先序決定了運算子在相互關係中的解析方式。優先級更高的運算子會成為優先級較低的運算子的操作數。

讓我們看一個簡單的例子：

let result = 5 + 3 * 2;
console.log(result); // 輸出: 11

你可能認為答案應該是 16（5 + 3 = 8，然後 8 2 = 16），但實際上是 11。為什麼呢？因為乘法的優先序高於加法。所以，3 2 會先計算（得到 6），然後再加上 5。

結合性

現在，讓我們來討論一個花哨的詞：結合性。別擔心，它比看起來要簡單！

結合性決定了相同優先序的運算子是如何被處理的。它可以是從左到右或從右到左。

從左到右結合性

大多數運算子遵循從左到右的結合性。這意味著它們會從左到右被評估。讓我們看一個例子：

let a = 10 - 5 - 2;
console.log(a); // 輸出: 3

這是 JavaScript 如何處理這個過程：

1. 10 - 5 = 5
2. 5 - 2 = 3

從右到左結合性

有些運算子，如賦值運算子（=），具有從右到左的結合性。讓我們看看這是如何工作的：

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // 輸出: 5 5 5

JavaScript 會從右到左處理這個過程：

1. c = 5
2. b = c（它是 5）
3. a = b（它是 5）

運算子優先序表

現在，讓我們看看 JavaScript 中的運算子優先序「菜單」。別擔心，如果你現在還不理解所有的這些——我們會通過一些例子來學習！

優先序	運算子類型	結合性	運算子
19	組合	n/a	( ... )
18	成員訪問	從左到右	. []
17	函數調用	從左到右	... ( )
16	新建（帶參數列表）	n/a	new ... ( )
15	後置增量和減量	n/a	... ++ ... --
14	邏輯非、位運算非、一元加/減、前置增量/減量、typeof、void、delete、await	從右到左	! ~ + - ++ -- typeof void delete await
13	乘方	從右到左	**
12	乘法、除法、餘數	從左到右	* / %
11	加法、減法	從左到右	+ -
10	位運算位移	從左到右	<< >> >>>
9	關係運算	從左到右	< <= > >= in instanceof
8	等於運算	從左到右	== != === !==
7	位運算與	從左到右	&
6	位運算異或	從左到右	^
5	位運算或	從左到右	|
4	邏輯與	從左到右	&&
3	邏輯或	從左到右	||
2	條件	從右到左	?:
1	賦值	從右到左	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	選擇	從左到右	,

示例

現在，讓我們將這些知識應用到一些例子中！

示例 1：算術運算

let result = 2 + 3 * 4 - 1;
console.log(result); // 輸出: 13

JavaScript 是這樣評估這個表達式的：

1. 3 * 4 = 12（乘法具有較高優先序）
2. 2 + 12 = 14
3. 14 - 1 = 13

示例 2：邏輯運算

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // 輸出: true

讓我們分解這個過程：

1. x < y 是 true
2. y < z 是 true
3. true && true 是 true
4. x > z 是 false
5. true || false 是 true

記住，&&（與）的優先序高於 ||（或）。

示例 3：混合運算

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // 輸出: false

這看起來很複雜，但讓我們一步步來：

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 是 false
5. a < b 是 true
6. false && true 是 false

示例 4：賦值和比較

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // 輸出: 5 5 5

let result = x == y === z;
console.log(result); // 輸出: true

記住，賦值（=）具有從右到左的結合性，而等於比較（==, ===）具有從左到右的結合性。

1. z = 5
2. y = z（它是 5）
3. x = y（它是 5）
4. x == y 是 true
5. true === z 是 true（因為 z 是 5，這是真值）

結論

恭喜你！你已經開始了解 JavaScript 運算子優先序了。記住，熟練使人完美。不要害怕嘗試不同的運算子組合——這是你真正吸收這些概念的途徑。

還有一個專業提示：當你不确定時，使用括號！它們具有最高的優先序，並且可以使你的代碼更具可讀性。例如：

let result = (2 + 3) * 4 - 1;
console.log(result); // 輸出: 19

這樣，你就在明確告訴 JavaScript 你希望如何計算表達式。

持續編碼，持續學習，最重要的是，玩得開心！JavaScript 是一門強大的語言，理解這些基礎將為你的編程旅程鋪平道路。

Credits: Image by storyset