ECMAScript 之 Logic Operator

栏目: JavaScript · 发布时间: 6年前

内容简介:ECMAScript 5ECMAScript 2015

&&|| 為 Logic Operator,在一般語言,Logic Operator 的左右兩側 Expression 都是 Boolean,回傳結果亦是 Boolean,但 ECMAScript 的 Logic Operator 允許左用兩側 Expression 可以是非 Boolean,因而衍生出一些其他的應用。

Version

ECMAScript 5

ECMAScript 2015

&&

若第一個 operand 為 false 則直接回傳,否則回傳第二個 operand

true && false
// false

&& 兩側之 operand 皆為 Boolean,則與一般語言的 logic operator 相同。

true && 'abc'
// 'abc'

&& 兩側之 operand 並非都 Boolean,則回傳其中一個 operand。

因為第一個 operand 為 true ,因此回傳第二個 operand abc

'' && 'abc'
// ''

&& 兩側之 operand 並非都 Boolean,則回傳其中一個 operand。

因為第一個 operand '' 為 Falsy Value,視為 false ,因此回傳第一個 operand ''

'abc' && 'def'
// 'def'

&& 兩側之 operand 並非都 Boolean,則回傳其中一個 operand。

因為第一個 operand abc 為 Truthy Value,視為 true ,因此回傳第二個 operand def

||

若第一個 operand 為 true 則直接回傳,否則回傳第二個 operand

true || false
// true

&& 兩側之 operand 皆為 Boolean,則與一般語言的 logic operator 相同。

true || 'abc'
// true

&& 兩側之 operand 並非都 Boolean,則回傳其中一個 operand。

因為第一個 operand 為 true ,因此回傳第一個 operand true

false || 'abc'
// 'abc'

&& 兩側之 operand 並非都 Boolean,則回傳其中一個 operand。

因為第一個 operand 為 false ,因此回傳第二個 operand: abc

'' || 'abc'
// 'abc

&& 兩側之 operand 並非都 Boolean,則回傳其中一個 operand。

因為第一個 operand '' 為 Falsy Value,視為 false ,因此回傳第二個 operand abc

'abc' || 'def'
// 'abc'

因為第一個 operand abc 為 Truthy Value,視為 true ,因此回傳第一個 operand abc

Vulue-preserving

true|| false
// false
false || 'abc'
// 'abc'
'abc' && 'def'
// 'def'

無論 logic operator 左右兩側是否為 Boolean,我們發現一定回傳兩個 operand 的其中之一,也就是 operand 的 value 會原封不動的傳回,因此稱為 Value-preserving。

Short-circuiting

false && console.log(false);
// false

&& 的結果由第一個 operand false 就能決定,因此永遠不會執行 console.log(false)

true || console.log(true);
// true

|| 的結果由第一個 operand true 就能決定,因此永遠不會執行 console.log(true)

因為 logic operator 有 Value-preserving 與 Short-circuiting 的特性,因此 預設值if 判斷 ,就可使用 logic operator 加以簡化

Default Value

Parameter

function saveText(text) {
  text = text || '';
  console.log(text);
}

由於 ECMAScript 允許 parameter 與 argument 數量不相等,也就是 function 所定義的 parameter,其實可以不用傳進 argument。

對於沒有傳進來的 parameter,其值為 undefined ,也就是 Falsy Value,根據 || 的定義,會回傳 || 右側的 operand,因此可在 || 右側設定 parameter 的 default value。

function saveText(text = '') {
  console.log(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

setTitle(options.title || 'Untitled');

options.title 根本沒定義,則回傳為 undefined ,亦為 Falsy Value,因此可將 default value 寫在 || 右側。

Function Result

function countOccurrences(regex, str) {
  return (str.match(regex) || []).length
}

str.match() 要不是回傳 array,就是回傳 null ,這會造成 .length 失敗,由於 null 就是 Falsy Value,因此可將 default value 寫在 || 右側,如此無論什麼狀況, .length 都不會失敗。

If Else

&&

function foo(value) {
  if (value) 
    console.log(value);
}

傳入 argument 才會處理。

可簡寫為:

function foo(value) {
  value && console.log(value);
}

因為 傳入值, value 為 Truthy Value,才會執行 || 右側的 expression。

||

function foo(value) {
  if (!value)
    console.log(value);
}

沒有 傳入 argument 才會處理。

function foo(value) {
  value || console.log(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


以上所述就是小编给大家介绍的《ECMAScript 之 Logic Operator》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法学

算法学

哈雷尔 / 第1版 (2006年2月1日) / 2006年2月1日 / 38.0

本书的意图在于按序学习或研究,而不是作为一个参考。因而按照每章依赖于前面章节的结构组织本书,且流畅易读。第一部分预备知识中的大部分材料对于那些具有程序设计背景的人是熟悉的。无论是否恰当,本书包含了计算机科学家当前感兴趣的研究专题的简明讨论。这本教科书的书后有每章详细参考书目的注记,并通过“后向”指针把教科书中的讨论与相关文献联系起来。目前的版本包含大量习题,以及大约三分之一的题解。可用题解作为教科......一起来看看 《算法学》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器