ES2018 學習筆記（2）&& 和 || 的運算優先級

爲何 && 比 || 優先級高？

原由

偶然在網上搜索 js 運算符優先級，幾乎每一個版本都告訴讀者 && 比 || 優先級更高，包括 MSN 這樣的權威網站也不例外。

• MDN Operator_Precedence

這與本身經驗不符 —— 它們應該是優先級同樣的。

論證

0 || 1 && 0 || 2

// 按 && 優先級高
( 0 || ( 1 && 0 ) ) || 2

// 按優先級一致

0 || ( 1 && ( 0 || 2 ) )

不管怎麼執行結果都同樣

詭辯

由於有 MDN 背書，中英文版本都是同樣，心想這事情不會那麼簡單。因而，打開 ES 規範來找尋真相。

12.13 Binary Logical Operators

Syntax

LogicalANDExpression[In, Yield, Await] :

• BitwiseORExpression [?In, ?Yield, ?Await]
• LogicalANDExpression [?In, ?Yield, ?Await] && BitwiseORExpression [?In, ?Yield, ?Await]

LogicalORExpression[In, Yield, Await]:

• LogicalANDExpression [?In, ?Yield, ?Await]
• LogicalORExpression [?In, ?Yield, ?Await] || LogicalANDExpression [?In, ?Yield, ?Await]

細細品品以上定義，會發現邏輯或表達式包含邏輯與表達式。再來看看的求值過程：

12.13.3 Runtime Semantics: Evaluation

LogicalANDExpression : LogicalANDExpression && BitwiseORExpression

• Let lref be the result of evaluating LogicalANDExpression.
• Let lval be ? GetValue(lref).
• Let lbool be ToBoolean(lval).
• If lbool is false, return lval.
• Let rref be the result of evaluating BitwiseORExpression.
• Return ? GetValue(rref).

LogicalORExpression : LogicalORExpression || LogicalANDExpression

• Let lref be the result of evaluating LogicalORExpression.
• Let lval be ? GetValue(lref).
• Let lbool be ToBoolean(lval).
• If lbool is true, return lval.
• Let rref be the result of evaluating LogicalANDExpression.
• Return ? GetValue(rref).

回看開始的例子裏的語句 0 || 1 && 0 || 2

• 根據定義這是一條邏輯或表達式
• 執行邏輯等價於 ( 0 || ( 1 && 0 ) ) || 2

這麼理解，就符合 && 優先級更高的說法。

總結

來個複雜點的

0 || 1 && 0 || 2 && 3 && 0 || 1 && 0

按照規範來執行

( ( 0 || ( 1 && 0 ) ) || (  2 && 3 && 0  ) ) || ( 1 && 0 )

將二者理解成不區分優先級，從左到右執行

0 || ( 1 && ( 0 || ( 2 && ( 3 && ( 0 || ( 1 && 0 ) ) ) ) ) )

因此，理論上是 && 優先級更高，可是，使用時能夠用等價方式。