詳解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); // 422）可選鏈操作符 ?.
可選鏈操作符 ?. 允許讀取連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。?. 操作符的功能類(lèi)似于. 鏈操作符，不同之處在于，在引用為空，即 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)文章
layer.open組件獲取彈出層頁(yè)面變量、函數(shù)的實(shí)例
今天小編就為大家分享一篇layer.open組件獲取彈出層頁(yè)面變量、函數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
Ajax不是一種新的編程語(yǔ)言,而是使用現(xiàn)有標(biāo)準(zhǔn)的新方法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中前后端交互Ajax的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
用ES6的class模仿Vue寫(xiě)一個(gè)雙向綁定的示例代碼
本篇文章主要介紹了用ES6的class模仿Vue寫(xiě)一個(gè)雙向綁定的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了如何利用js在兩個(gè)html窗口間通信，如果讀者們有類(lèi)似的需求，可以參考下2021-04-04
10個(gè)必備的JavaScript?async/await工具函數(shù)分享
當(dāng)談到異步編程時(shí),async/await是JavaScript中常用的功能之一,本文為大家整理了10個(gè)常用的await和async函數(shù)示例,感興趣的小伙伴可以參考一下2023-12-12
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版，這里提供了兩個(gè)版本，第二個(gè)在firefox下運(yùn)行有些問(wèn)題大家可以修改下，第一個(gè)的高度問(wèn)題，已經(jīng)修正，其實(shí)就是簡(jiǎn)單的加了css樣式。2009-12-12
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截圖功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截圖功能,本文介紹了2款實(shí)現(xiàn)JavaScript截圖的開(kāi)源組件,一個(gè)是Canvas2Image,一個(gè)是html2canvas,需要的朋友可以參考下2014-10-10
javascript瀑布流式圖片懶加載實(shí)例解析與優(yōu)化
這篇文章主要針對(duì)javascript瀑布流式圖片懶加載實(shí)例進(jìn)行解析與優(yōu)化，感興趣的小伙伴們可以參考一下2016-02-02
Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
js中常見(jiàn)切割截取字符串的幾種方法小結(jié)
前端開(kāi)發(fā)中,字符串處理是比較常見(jiàn)的,下面這篇文章主要給大家介紹了關(guān)于js中常見(jiàn)切割截取字符串的幾種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09