詳解JS中???和?.?和||的區(qū)別
1、?? 與 || 的區(qū)別
1)相同點(diǎn):
?? 和 || 的用法相同,都是前后是值,中間用符號(hào)連接,根據(jù)前面的值來(lái)判斷最終是返回前面的值還是后面的值。
- One ?? Two
- One || Two
2)不同點(diǎn):
判斷的方法不同:
- 使用 ?? 時(shí),只有One為 null 或者 undefined 時(shí)才會(huì)返回 two;
- 使用 || 時(shí),One會(huì)先轉(zhuǎn)化為布爾值判斷,為true時(shí)返回One , false 返回Two
?// ?? ? undefined ?? 2?? ?// 2 ? null ?? 2?? ??? ?// 2 ? 0 ?? 2?? ??? ??? ?// 0 ? "" ?? 2?? ??? ??? ?// "" ? true ?? 2?? ??? ?// true ? false ?? 2?? ??? ?// false ?// || ? undefined || 2?? ?// 2 ? null || 2?? ??? ?// 2 ? 0 || 2?? ??? ??? ?// 2 ? "" || 2?? ??? ??? ?// 2 ? true || 2?? ??? ?// true ? false || 2?? ??? ?// 2
2、?? 和 ?. 的區(qū)別
1) 空值合并操作符 ??
只有當(dāng)左側(cè)為null 或者undefined 時(shí),才會(huì)返回右側(cè)的值。
const foo = null ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expected output: 0 const nullValue = null; const emptyText = ""; // 空字符串,是一個(gè)假值,Boolean("") === false const someNumber = 42; const valA = nullValue ?? "valA 的默認(rèn)值"; const valB = emptyText ?? "valB 的默認(rèn)值"; const valC = someNumber ?? 0; console.log(valA); // "valA 的默認(rèn)值" console.log(valB); // ""(空字符串雖然是假值,但不是 null 或者 undefined) console.log(valC); // 42
2)可選鏈操作符 ?.
可選鏈操作符 ?. 允許讀取連接對(duì)象鏈深處的屬性的值,而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。?. 操作符的功能類似于. 鏈操作符,不同之處在于,在引用為空,即 null 或者 undefined 的情況下不會(huì)引起錯(cuò)誤,該表達(dá)式短路返回值。
const obj = { a: { b: [{ name: 'obj' }] } } // 原本的寫(xiě)法 console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name) // 可選鏈寫(xiě)法 console.log(obj?.a?.b?.[0]?.name); // obj console.log(obj?.b?.c?.d) // undefined
例如上面的例子,?. 判斷的對(duì)象是 nullish (null 或者 undefined) ,表達(dá)式就會(huì)短路,不再往后執(zhí)行,返回 undefined
可以和 ?? 運(yùn)算符結(jié)合使用:
const obj = { a : { name: 'obj'} } obj?.a?.b ?? 'hello world' // hello world
到此這篇關(guān)于詳解JS中? ?和?. 和||的區(qū)別的文章就介紹到這了,更多相關(guān)詳解JS中? ?和?. 和||的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目
這篇文章主要介紹了詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02JavaScript常見(jiàn)打開(kāi)鏈接的幾種方法小結(jié)
在頁(yè)面中的鏈接除了常規(guī)的方式以外,如果使用javascript,還有很多種方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript常見(jiàn)打開(kāi)鏈接的幾種方法,需要的朋友可以參考下2024-01-01js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法
這篇文章主要介紹了js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法,涉及javascript中split方法及數(shù)組的操作技巧,需要的朋友可以參考下2015-05-05JavaScript實(shí)現(xiàn)iframe自動(dòng)高度調(diào)整和不同主域名跨域
這篇文章主要介紹了JavaScript實(shí)現(xiàn)iframe自動(dòng)高度調(diào)整和不同主域名跨域,作者通過(guò)建立一個(gè)代理來(lái)同步高度調(diào)整,需要的朋友可以參考下2016-02-02JavaScrip數(shù)組刪除特定元素的幾種方法總結(jié)
從js數(shù)組中刪除指定元素是我們每個(gè)人都遇到的問(wèn)題,網(wǎng)上這方面的資料也很多,但有的時(shí)間過(guò)于久遠(yuǎn),有的內(nèi)容不夠全面,所以自己來(lái)整理下,這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScrip數(shù)組刪除特定元素的多種方法,需要的朋友可以參考下。2017-09-09js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
今天小編就為大家分享一篇js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08