ECMAScript 之 Logic Operator
&&
與 ||
為 Logic Operator,在一般語言,Logic Operator 的左右兩側 Expression 都是 Boolean,回傳結果亦是 Boolean,但 ECMAScript 的 Logic Operator 允許左右兩側 Expression 可以是非 Boolean,因而衍生出一些其他的應用。
Version
ECMAScript 5
ECMAScript 2015
&&
若第一個 operand 為
false
則直接回傳,否則回傳第二個 operand
1 | true && false |
&&
兩側之 operand 皆為 Boolean,則與一般語言的 logic operator 相同。
1 | true && 'abc' |
&&
兩側之 operand 並非都 Boolean,則回傳其中一個 operand。
因為第一個 operand 為 true
,因此回傳第二個 operand abc
。
1 | '' && 'abc' |
&&
兩側之 operand 並非都 Boolean,則回傳其中一個 operand。
因為第一個 operand ''
為 Falsy Value,視為 false
,因此回傳第一個 operand ''
。
1 | 'abc' && 'def' |
&&
兩側之 operand 並非都 Boolean,則回傳其中一個 operand。
因為第一個 operand abc
為 Truthy Value,視為 true
,因此回傳第二個 operand def
。
||
若第一個 operand 為
true
則直接回傳,否則回傳第二個 operand
1 | true || false |
&&
兩側之 operand 皆為 Boolean,則與一般語言的 logic operator 相同。
1 | true || 'abc' |
&&
兩側之 operand 並非都 Boolean,則回傳其中一個 operand。
因為第一個 operand 為 true
,因此回傳第一個 operand true
。
1 | false || 'abc' |
&&
兩側之 operand 並非都 Boolean,則回傳其中一個 operand。
因為第一個 operand 為 false
,因此回傳第二個 operand:abc
。
1 | '' || 'abc' |
&&
兩側之 operand 並非都 Boolean,則回傳其中一個 operand。
因為第一個 operand ''
為 Falsy Value,視為 false
,因此回傳第二個 operand abc
。
1 | 'abc' || 'def' |
因為第一個 operand abc
為 Truthy Value,視為 true
,因此回傳第一個 operand abc
。
Vulue-preserving
1 | true|| false |
無論 logic operator 左右兩側是否為 Boolean,我們發現一定回傳兩個 operand 的其中之一,也就是 operand 的 value 會原封不動的傳回,因此稱為 Value-preserving。
Short-circuiting
1 | false && console.log(false); |
&&
的結果由第一個 operand false
就能決定,因此永遠不會執行 console.log(false)
。
1 | true || console.log(true); |
||
的結果由第一個 operand true
就能決定,因此永遠不會執行 console.log(true)
。
因為 logic operator 有 Value-preserving 與 Short-circuiting 的特性,因此
預設值
或if 判斷
,就可使用 logic operator 加以簡化
Default Value
Parameter
1 | function saveText(text) { |
由於 ECMAScript 允許 parameter 與 argument 數量不相等,也就是 function 所定義的 parameter,其實可以不用傳進 argument。
對於沒有傳進來的 parameter,其值為 undefined
,也就是 Falsy Value,根據 ||
的定義,會回傳 ||
右側的 operand,因此可在 ||
右側設定 parameter 的 default value。
1 | function saveText(text = '') { |
ECMAScript 2015 的 Default Parameter 允許我們直接將 parameter 的 default value 直接寫在 parameter list 內,這種寫法更直覺,也與一般語言類似。
使用
||
作為 default value 的小技巧,主要是由於||
與 Falsy Value 的語言特性,這對undefined
不是問題,但別忘了 empty string''
與0
也視為 Falsy Value,若你的需求就是允許''
與0
,就不適合使用||
若使用 ECMAScript 2015 的 Default Parameter,則只針對
undefined
,不針對''
與0
,這和||
與 Falsy Value 技巧是不同的
Property
1 | setTitle(options.title || 'Untitled'); |
若 options.title
根本沒定義,則回傳為 undefined
,亦為 Falsy Value,因此可將 default value 寫在 ||
右側。
Function Result
1 | function countOccurrences(regex, str) { |
str.match()
要不是回傳 array,就是回傳 null
,這會造成 .length
失敗,由於 null
就是 Falsy Value,因此可將 default value 寫在 ||
右側,如此無論什麼狀況,.length
都不會失敗。
If Else
&&
1 | function foo(value) { |
若 有
傳入 argument 才會處理。
可簡寫為:
1 | function foo(value) { |
因為 有
傳入值,value
為 Truthy Value,才會執行 ||
右側的 expression。
||
1 | function foo(value) { |
若 沒有
傳入 argument 才會處理。
1 | function foo(value) { |
因為 沒有
傳入值,value
為 Falsy Value,才會執行 ||
右側的 expression。
Conclusion
- Logic operator 原本很單純,但由於 ECMAScript 允許非 Boolean 使用,且又有 Truthy Value 與 Falsy Value 概念後,
&&
與||
有了不一樣的應用,大部分是用來定義 default value,但亦可作為if else
判斷的縮寫 - 對於 function parameter 的 default value,其實 ECMAScript 的 Default Parameter 更為優秀,建議使用
Reference
MDN, Logical Operators
山田祥寬, 新一代 JavaScript 程式設計精解
Dr. Axel Rauschmayer, Speaking JavaScript