js中“??“和“?.“怎么用

？？：空值合并操作符

邏輯操作符，左側為null和undefined時，才返回右側的數

const sum = null ?? 12
console.log(sum);
//輸出12

const sum1 = 12 ?? 23
console.log(sum1);
//輸出12

const sum2 = undefined ?? 12
console.log(sum2);
//輸出12

?. :可選鏈操作符

可以讀取位于連接對象鏈深處屬性的值，不必明確驗證鏈中的每個引用是否有效
功能類似于“.” 鏈式操作符，不同之處在于，在引用為空null 或者 undefined 的情況下不會引起錯誤，該表達式短路返回值是 undefined
與函數調用一起使用時，如果給定的函數不存在，則返回 undefined。

const fa = {
      name: 'lming',
      son: {
        name: 'lqq'
      }
    };
const duc = fa.duc?.name;
console.log(duc);
//輸出undefined

使用：

1.獲取一個對象更深層次的屬性，即obj中的first屬性下的second屬性。

為了避免報錯， 獲取之前要判斷first屬性是否為null或者undefined，在獲取second屬性
使用“與”運算符

let num = obj.first && obj.first.second;

使用?.可選鏈操作符

let num = obj.first?.second;

可選鏈與函數調用

調用一個可能不存在的方法時，如果被調用的方法不存在，使用可選鏈可以使表達式自動返回undefined而不是拋出一個異常

let result = someInterface.customMethod?.();

注：如果存在一個屬性名且不是函數, 使用 ?. 仍然會產生一個 TypeError 異常 (x.y is not a function).

使用空值合并操作符

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”

短路計算

let a = null;
let x = 0;
let prop = a?.[x++];
console.log(x); // x 將不會被遞增，依舊輸出 0

js中?.、??的具體用法

1、?. （可選鏈運算符）

在javascript中如果一個值為null、undefined，直接訪問下面的屬性，
會報 `Uncaught TypeError: Cannot read properties of undefined` 異常錯誤。

而在真實的項目中是會出現這種情況，有這個值就讀這個值，沒有這個值也不會報錯。

可能有的小伙伴會說用三目運算符、或者if判斷，但是這種也是可以的，但是在特定情況下會很復雜（如obj.data.person.name)

而?.則完美解決這個問題（obj?.name?.person?.name）。

 ?. 可以無限鏈下去，不論有多少屬性，只要有最后可以訪問到屬性，就會直接賦值最后的屬性值。否則當任何一個鏈出現問題，立刻停止，而后賦值undefined。

2、??（空值合并運算符)

?? 雙問號后面是默認值（可常量、可變量）。

在 ?? 前面沒有值得時候會默認 ?? 后邊的值（類似于三木運算符中的:后面賦值）。

和 || 運算符的區(qū)別：

|| 只會在左邊的值為假值時返回右邊的值 (0, ‘’, undefined, null, false 等都為假值)

?? 是在左邊的值為undefined或者null時才會返回右邊的值

 總結：??是判斷有沒有值，|| 是判斷真假。

到此這篇關于js中“??“和“?.“怎么用？的文章就介紹到這了,更多相關js ?? 和?內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論