讀取對(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)!