js中“??“和“?.“用法小結(jié)
js中“??“和“?.“怎么用
??:空值合并操作符
邏輯操作符,左側(cè)為null和undefined時(shí),才返回右側(cè)的數(shù)
const sum = null ?? 12 console.log(sum); //輸出12
const sum1 = 12 ?? 23 console.log(sum1); //輸出12
const sum2 = undefined ?? 12 console.log(sum2); //輸出12
?. :可選鏈操作符
可以讀取位于連接對(duì)象鏈深處屬性的值,不必明確驗(yàn)證鏈中的每個(gè)引用是否有效
功能類似于“.” 鏈?zhǔn)讲僮鞣煌幵谟冢?strong>在引用為空null 或者 undefined 的情況下不會(huì)引起錯(cuò)誤,該表達(dá)式短路返回值是 undefined
與函數(shù)調(diào)用一起使用時(shí),如果給定的函數(shù)不存在,則返回 undefined。
const fa = {
name: 'lming',
son: {
name: 'lqq'
}
};
const duc = fa.duc?.name;
console.log(duc);
//輸出undefined使用:
1.獲取一個(gè)對(duì)象更深層次的屬性,即obj中的first屬性下的second屬性。
為了避免報(bào)錯(cuò), 獲取之前要判斷first屬性是否為null或者undefined,在獲取second屬性
使用“與”運(yùn)算符
let num = obj.first && obj.first.second;
使用?.可選鏈操作符
let num = obj.first?.second;
可選鏈與函數(shù)調(diào)用
調(diào)用一個(gè)可能不存在的方法時(shí),如果被調(diào)用的方法不存在,使用可選鏈可以使表達(dá)式自動(dòng)返回undefined而不是拋出一個(gè)異常
let result = someInterface.customMethod?.();
注:如果存在一個(gè)屬性名且不是函數(shù), 使用 ?. 仍然會(huì)產(chǎn)生一個(gè) TypeError 異常 (x.y is not a function).
使用空值合并操作符
let customer = {
name: "Carl",
details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”短路計(jì)算
let a = null; let x = 0; let prop = a?.[x++]; console.log(x); // x 將不會(huì)被遞增,依舊輸出 0
js中?.、??的具體用法
1、?. (可選鏈運(yùn)算符)
在javascript中如果一個(gè)值為null、undefined,直接訪問(wèn)下面的屬性,
會(huì)報(bào) `Uncaught TypeError: Cannot read properties of undefined` 異常錯(cuò)誤。

而在真實(shí)的項(xiàng)目中是會(huì)出現(xiàn)這種情況,有這個(gè)值就讀這個(gè)值,沒(méi)有這個(gè)值也不會(huì)報(bào)錯(cuò)。
可能有的小伙伴會(huì)說(shuō)用三目運(yùn)算符、或者if判斷,但是這種也是可以的,但是在特定情況下會(huì)很復(fù)雜(如obj.data.person.name)
而?.則完美解決這個(gè)問(wèn)題(obj?.name?.person?.name)。

?. 可以無(wú)限鏈下去,不論有多少屬性,只要有最后可以訪問(wèn)到屬性,就會(huì)直接賦值最后的屬性值。否則當(dāng)任何一個(gè)鏈出現(xiàn)問(wèn)題,立刻停止,而后賦值undefined。
2、??(空值合并運(yùn)算符)
?? 雙問(wèn)號(hào)后面是默認(rèn)值(可常量、可變量)。
在 ?? 前面沒(méi)有值得時(shí)候會(huì)默認(rèn) ?? 后邊的值(類似于三木運(yùn)算符中的:后面賦值)。
和 || 運(yùn)算符的區(qū)別:
|| 只會(huì)在左邊的值為假值時(shí)返回右邊的值 (0, ‘’, undefined, null, false 等都為假值)
?? 是在左邊的值為undefined或者null時(shí)才會(huì)返回右邊的值

總結(jié):??是判斷有沒(méi)有值,|| 是判斷真假。
到此這篇關(guān)于js中“??“和“?.“怎么用?的文章就介紹到這了,更多相關(guān)js ?? 和?內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)表格信息增添與刪除
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)表格信息增添與刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
JS中正則表達(dá)式只有3種匹配模式(沒(méi)有單行模式)詳解
下面小編就為大家?guī)?lái)一篇JS中正則表達(dá)式只有3種匹配模式(沒(méi)有單行模式)詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
js每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)
下面小編就為大家?guī)?lái)一篇js每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
js數(shù)組相減簡(jiǎn)單示例【刪除a數(shù)組所有與b數(shù)組相同元素】
這篇文章主要介紹了js數(shù)組相減,結(jié)合簡(jiǎn)單示例形式分析了JavaScript刪除a數(shù)組所有與b數(shù)組相同元素相關(guān)個(gè)遍歷、判斷、刪除等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
uniapp跨頁(yè)面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實(shí)戰(zhàn)
使用uni.$emit觸發(fā)事件后,對(duì)應(yīng)的uni.$on就會(huì)監(jiān)聽(tīng)到事件觸發(fā),在回調(diào)中去執(zhí)行相關(guān)的邏輯,下面這篇文章主要給大家介紹了關(guān)于uniapp跨頁(yè)面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實(shí)戰(zhàn)的相關(guān)資料,需要的朋友可以參考下2023-04-04
uni-app實(shí)現(xiàn)頁(yè)面通信EventChannel的操作方法
使用了EventBus的方法實(shí)現(xiàn)不同頁(yè)面組件之間的一個(gè)通信,在uni-app中,我們也可以使用uni-app API,uni.navigateTo來(lái)實(shí)現(xiàn)頁(yè)面間的通信,這篇文章主要介紹了uni-app實(shí)現(xiàn)頁(yè)面通信EventChannel的操作方法,需要的朋友可以參考下2024-05-05

