詳解JS中???和?.?和||的區(qū)別
更新時間：2022年06月15日 10:56:59 作者：葡萄葡萄豆干
這篇文章主要介紹了詳解JS中???和?.?和||的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1、?? 與 || 的區(qū)別
1）相同點：
?? 和 || 的用法相同，都是前后是值，中間用符號連接，根據(jù)前面的值來判斷最終是返回前面的值還是后面的值。
- One ?? Two
- One || Two
2）不同點：
判斷的方法不同：
- 使用 ?? 時，只有One為 null 或者 undefined 時才會返回 two;
- 使用 || 時，One會先轉(zhuǎn)化為布爾值判斷，為true時返回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） 空值合并操作符 ??
只有當左側(cè)為null 或者undefined 時，才會返回右側(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 = ""; // 空字符串，是一個假值，Boolean("") === false
const someNumber = 42;
const valA = nullValue ?? "valA 的默認值";
const valB = emptyText ?? "valB 的默認值";
const valC = someNumber ?? 0;
console.log(valA); // "valA 的默認值"
console.log(valB); // ""（空字符串雖然是假值，但不是 null 或者 undefined）
console.log(valC); // 422）可選鏈操作符 ?.
可選鏈操作符 ?. 允許讀取連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似于. 鏈操作符，不同之處在于，在引用為空，即 null 或者 undefined 的情況下不會引起錯誤，該表達式短路返回值。
const obj = { a: { b: [{ name: 'obj' }] } }
// 原本的寫法
console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name)
// 可選鏈寫法
console.log(obj?.a?.b?.[0]?.name); // obj
console.log(obj?.b?.c?.d) // undefined例如上面的例子，?. 判斷的對象是 nullish (null 或者 undefined) ，表達式就會短路，不再往后執(zhí)行，返回 undefined
可以和 ?? 運算符結(jié)合使用：
const obj = { a : { name: 'obj'} }
obj?.a?.b ?? 'hello world' // hello world到此這篇關(guān)于詳解JS中? ?和?. 和||的區(qū)別的文章就介紹到這了,更多相關(guān)詳解JS中? ?和?. 和||的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了詳解如何使用webpack打包多頁jquery項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本文主要介紹了小程序?qū)崿F(xiàn)事件綁定的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
在頁面中的鏈接除了常規(guī)的方式以外,如果使用javascript,還有很多種方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript常見打開鏈接的幾種方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JS實現(xiàn)水平遍歷和嵌套遞歸操作,結(jié)合實例形式分析了javascript遍歷與遞歸相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要教大家如何使用Bootstrap自定義文件上傳下載樣式，感興趣的小伙伴們可以參考一下2016-05-05
js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法
這篇文章主要介紹了js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法,涉及javascript中split方法及數(shù)組的操作技巧,需要的朋友可以參考下2015-05-05
函數(shù)副作用 指當調(diào)用函數(shù)時，除了返回函數(shù)值之外，還對主調(diào)用函數(shù)產(chǎn)生附加的影響。例如修改全局變量（函數(shù)外的變量）或修改參數(shù)。2011-08-08
JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域
這篇文章主要介紹了JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域,作者通過建立一個代理來同步高度調(diào)整,需要的朋友可以參考下2016-02-02
JavaScrip數(shù)組刪除特定元素的幾種方法總結(jié)
從js數(shù)組中刪除指定元素是我們每個人都遇到的問題，網(wǎng)上這方面的資料也很多，但有的時間過于久遠，有的內(nèi)容不夠全面，所以自己來整理下，這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScrip數(shù)組刪除特定元素的多種方法，需要的朋友可以參考下。2017-09-09
js動態(tài)設(shè)置select下拉菜單的默認選中項實例
今天小編就為大家分享一篇js動態(tài)設(shè)置select下拉菜單的默認選中項實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08