快捷導(dǎo)航

JavaScript中???、??=、?.和?||的區(qū)別淺析

更新時(shí)間：2022年08月03日 11:53:12 作者：asdfsdgfsdgfa

在?JS?中,???運(yùn)算符被稱(chēng)為非空運(yùn)算符,下面這篇文章主要給大家介紹了關(guān)于JavaScript中???、??=、?.和?||區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

undefined和null是兩個(gè)比較特殊的數(shù)據(jù)類(lèi)型,是不能用點(diǎn)操作符去訪(fǎng)問(wèn)屬性的，否則將會(huì)報(bào)錯(cuò)

    let a;
    console.log(a?.name); //undefined
    console.log(a.name); //報(bào)錯(cuò)

    let obj = {};
    console.log(obj.name); //undefined
    console.log(obj?.name?.a); //undefined
    console.log(obj.name.a); //報(bào)錯(cuò)

?? 與 || 的區(qū)別

相同點(diǎn)：

?? 和 || 的用法相同，都是前后是值，中間用符號(hào)連接，根據(jù)前面的值來(lái)判斷最終是返回前面的值還是后面的值。

A ?? B

A || B

不同點(diǎn)：

判斷的方法不同：

使用 ?? 時(shí)，只有A為 null 或者 undefined 時(shí)才會(huì)返回 B;

使用 || 時(shí)，A會(huì)先轉(zhuǎn)化為布爾值判斷，為true時(shí)返回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

空值合并操作符 ??

只有當(dāng)左側(cè)為null 或者undefined 時(shí)，才會(huì)返回右側(cè)的值

可選鏈操作符 ?.

?. 允許讀取連接對(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); //obj
 
    // 可選鏈寫(xiě)法
    console.log(obj?.a?.b?.[0]?.name); // obj
    console.log(obj?.b?.c?.d); // undefined

?.可以和 ?? 運(yùn)算符結(jié)合使用

    const obj = { a: { name: "obj" } };
 
    console.log(obj?.a?.b ?? "hello world"); // hello world

空值賦值運(yùn)算符(??=)

當(dāng)??=左側(cè)的值為null、undefined的時(shí)候,才會(huì)將右側(cè)變量的值賦值給左側(cè)變量.其他所有值都不會(huì)進(jìn)行賦值

    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

補(bǔ)充：?. 鏈判斷運(yùn)算符

鏈判斷運(yùn)算符?. 允許開(kāi)發(fā)人員讀取深度嵌套在對(duì)象鏈中的屬性值，而不必驗(yàn)證每個(gè)引用。當(dāng)引用為空時(shí)，表達(dá)式停止計(jì)算并返回 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

這個(gè)是什么操作呢？？

這個(gè)location是哪里來(lái)的呢？這個(gè)tuesday又是哪里來(lái)的呢？就算不是外面的travelPlans這個(gè)對(duì)象里也沒(méi)有l(wèi)ocation和tuesday啊?。?！經(jīng)過(guò)詢(xún)問(wèn)大佬后得

let res = travelPlans?.tuesday?.location; 
<=等價(jià)=> 
let res = travelPlans&& travelPlans.tuesday&& travelPlans.tuesday.location

作用就是判斷這個(gè)對(duì)象（travelPlans）下的（tuesday）下的（location）是否為null或者undefined，當(dāng)其中一鏈為null或者undefined時(shí)就返回undefined，這樣即使中間缺少一個(gè)屬性也不會(huì)報(bào)錯(cuò)，雙問(wèn)號(hào)后面接的就是默認(rèn)值。