讀取對(duì)象屬性的時(shí)候，如果某個(gè)屬性的值是null或者undefined，有時(shí)候需要為它們指定默認(rèn)值。常見(jiàn)的作法是通過(guò)||運(yùn)算符指定默認(rèn)值。
const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;上面的三行代碼都是通過(guò)||運(yùn)算符指定默認(rèn)值，但是這樣寫(xiě)是錯(cuò)的。我們這樣寫(xiě)的意愿一般是，只要屬性的值為null或者undefined，默認(rèn)值就會(huì)生效。但是屬性的值如果是空字符串或者false或者0，默認(rèn)值也會(huì)生效
為了避免這種情況，ES2020引入了一個(gè)新的Null判斷運(yùn)算符??。它的行為類(lèi)似于||，但是只有運(yùn)算符左側(cè)的值為null或者undefined時(shí)，才會(huì)返回右側(cè)的值。
const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;上面代碼中，默認(rèn)值只有左側(cè)屬性值為null或者undefined時(shí)，才會(huì)生效
這個(gè)運(yùn)算符的一個(gè)目的，就是跟鏈判斷符?.配合使用，為null或者undefined的值設(shè)置默認(rèn)值
const value = respons.setting?.value ?? 300上面的代碼中，如果response.setting時(shí)null或者undefined，或者response.setting.value是null或者undefined，就會(huì)返回默認(rèn)值300。也就是說(shuō)，這一行代碼包括了兩級(jí)屬性的判斷
這個(gè)運(yùn)算符很適合判斷函數(shù)參數(shù)使得否賦值
function Component(props){
const enabled = props.enabled ?? true
// ...
}上面的代碼判斷props參數(shù)enabled屬性是否賦值，基本等同于下面的寫(xiě)法
function Component(props){
const { enabled:enable=true} = props
// ....
}?? 本質(zhì)上是邏輯運(yùn)算，它與其他兩個(gè)邏輯運(yùn)算符&&和||有一個(gè)優(yōu)先級(jí)問(wèn)題，它們之間的優(yōu)先級(jí)到底誰(shuí)高誰(shuí)低。優(yōu)先級(jí)的不同，往往會(huì)導(dǎo)致邏輯運(yùn)算結(jié)果不同。
現(xiàn)在的規(guī)則是，如果多個(gè)運(yùn)算符一起使用，必須用括號(hào)表明優(yōu)先級(jí)，否則會(huì)報(bào)錯(cuò)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-636936.html
// 報(bào)錯(cuò)
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs上面四個(gè)表達(dá)式都會(huì)報(bào)錯(cuò)，必須加入標(biāo)明優(yōu)先級(jí)的括號(hào)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-636936.html
(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);
(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);
(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);
(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);到了這里，關(guān)于ES6中Null判斷運(yùn)算符(??)正確打開(kāi)方式-的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
