摘自:阮一峰的ES6余蟹,感覺在項(xiàng)目中用處比較大父晶,記錄一下。
(1)鏈判斷運(yùn)算符
- 在我們需要獲取多層對象內(nèi)部的某個屬性值時爷怀,比如讀取 message.body.user.firstName
不安全的寫法:
const firstName = message.body.user.firstName
安全的寫法:
const firstName = (message
message.body
message.body.user
message.body.user.firstName) || 'default';
- 三元運(yùn)算符?: 也常用于判斷對象是否存在。
const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined
- 以上的方法可以簡寫為:
const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value
- 我們還以判斷一個對象是否有這一個函數(shù)匀伏,如果有就執(zhí)行洒忧,沒有就返回undefined
var obj = { say(){console.log(1111) }}
obj.say?.() //1111
obj.read?.() //undefined
a?.b
a == null ? undefined : a.b
a?.[x]
a == null ? undefined : a[x]
a?.b()
a == null ? undefined : a.b()
a?.()
a == null ? undefined : a()
a.b?.()
a.b == null ? undefined : a.b()
(2)Null 判斷運(yùn)算符
?? 在讀取對象屬性的時候,如果屬性的值為null和undefined的時候够颠,會指定默認(rèn)值熙侍,但是我們通常是使用 || 來指定默認(rèn)值得,但是當(dāng)我們的屬性值為 空字符串履磨、false蛉抓、0的時候,默認(rèn)值也會生效
??為避免這種情況剃诅,ES2020引入一個新的Null判斷運(yùn)算符 ?? 行為類似于 || 但是只有運(yùn)算符左側(cè)的值為null和undefined時巷送,才會返回右側(cè)的值。
????有一個運(yùn)算優(yōu)先級問題矛辕,它與&&和||的優(yōu)先級孰高孰低⌒︴耍現(xiàn)在的規(guī)則是,如果多個邏輯運(yùn)算符一起使用聊品,必須用括號表明優(yōu)先級飞蹂,否則會報錯。
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs
//以上都會報錯