JavaScript中? ?、??=、?.和 ||的區別淺析
前言
undefined和null是兩個比較特殊的數據類型,是不能用點操作符去訪問屬性的,否則將會報錯
let a; console.log(a?.name); //undefined console.log(a.name); //報錯
let obj = {}; console.log(obj.name); //undefined console.log(obj?.name?.a); //undefined console.log(obj.name.a); //報錯
?? 與 || 的區別
相同點:
?? 和 || 的用法相同,都是前後是值,中間用符號連接,根據前面的值來判斷最終是返回前面的值還是後面的值。
A ?? B
A || B
不同點:
判斷的方法不同:
使用 ?? 時,隻有A為 null 或者 undefined 時才會返回 B;
使用 || 時,A會先轉化為佈爾值判斷,為true時返回A , false 返回B
// ?? console.log(undefined ?? 2); // 2 console.log(null ?? 2); // 2 console.log(0 ?? 2); // 0 console.log("" ?? 2); // '' console.log(true ?? 2); // true console.log(false ?? 2); // false // || console.log(undefined || 2); // 2 console.log(null || 2); // 2 console.log(0 || 2); // 2 console.log("" || 2); // 2 console.log(true || 2); // true console.log(false || 2); // 2
空值合並操作符 ??
隻有當左側為null
或者undefined
時,才會返回右側的值
可選鏈操作符 ?.
?.
允許讀取連接對象鏈深處的屬性的值,而不必明確驗證鏈中的每個引用是否有效。
?.
操作符的功能類似於. 鏈操作符,不同之處在於,在引用為空,即 null
或者 undefined
的情況下不會引起錯誤,該表達式短路返回值。
const obj = { a: { b: [{ name: "obj" }] } }; // 原本的寫法 console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name); //obj // 可選鏈寫法 console.log(obj?.a?.b?.[0]?.name); // obj console.log(obj?.b?.c?.d); // undefined
?.可以和 ?? 運算符結合使用
const obj = { a: { name: "obj" } }; console.log(obj?.a?.b ?? "hello world"); // hello world
空值賦值運算符(??=)
當??=左側的值為null、undefined的時候,才會將右側變量的值賦值給左側變量.其他所有值都不會進行賦值
let a = "你好"; let b = null; let c = undefined; let d = 0; let e = ""; let f = true; let g = false; console.log((b ??= a)); // 你好 console.log((c ??= a)); // 你好 console.log((d ??= a)); // 0 console.log((e ??= a)); // '' console.log((f ??= a)); // true console.log((g ??= a)); // false console.log(b); // 你好 console.log(c); // 你好 console.log(d); // 0 console.log(e); // '' console.log(f); // true console.log(g); // false
補充:?. 鏈判斷運算符
鏈判斷運算符?. 允許開發人員讀取深度嵌套在對象鏈中的屬性值,而不必驗證每個引用。當引用為空時,表達式停止計算並返回 undefined。
let travelPlans = { destination: 'DC', monday: { location: 'National Mall', budget: 200, host: null } } let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost let res2 = travelPlans?.host; // => undefined
這個是什麼操作呢??
這個location是哪裡來的呢?這個tuesday又是哪裡來的呢?就算不是外面的travelPlans這個對象裡也沒有location和tuesday啊!!!經過詢問大佬後得
let res = travelPlans?.tuesday?.location; <=等價=> let res = travelPlans&& travelPlans.tuesday&& travelPlans.tuesday.location
作用就是判斷這個對象(travelPlans)下的(tuesday)下的(location)是否為null或者undefined,當其中一鏈為null或者undefined時就返回undefined,這樣即使中間缺少一個屬性也不會報錯,雙問號後面接的就是默認值。
總結
到此這篇關於JavaScript中? ?、??=、?.和 ||區別的文章就介紹到這瞭,更多相關JS中? ?和??=和?.和 ||區別內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!