JavaScript中的??和?.和??=操作符

JS中兩種不常使用但挺實用的操作符：??和?.

一起來了解並學會使用它們吧：

空值合並操作符：??

只有當操作符左側為null或undefined時才會返回操作符右側的值，否則返回左側的值。

eg：

null ?? 'hello';// hello

undefined ?? 'hello';// hello

false ?? 'hello';// false

null ?? undefined;// undefined

null ?? undefined ?? 123;// 123

可以用於程序中當某個值為null或undefined時給它賦默認值。

if表達式或者邏輯或||操作符也能實現這個賦默認值，區別於邏輯或操作符的是：邏輯或是當操作符左側為假值(null、undefined、false、0、''等等)時返回操作符右側的值，否則返回左側的值

null || 'hello';// hello

false || 'hello';// hello

0 || 'hello';// hello

true || 'hello';// true

 

空值賦值操作符：??=

x ??= y等價於x = (x ?? y)

var x = undefined;

var y = 1;

x ??= y;// 1

 

可選鏈操作符：?.

var obj = {};console.log(obj.name.firstName);

這個情況下會出現報錯：

這是程序中經常會遇見的報錯，通常會在上面加一層if判斷或者使用&&與操作符來處理這種異常

現在可以使用?.操作符來處理

var obj = {};console.log(obj.name?.firstName);// undefined

可選鏈?.操作符用於讀取鏈中的屬性值，而不必明確每個值都有效，區別於(.)操作符加了一層異常的處理，避免程序的報錯和表達式的執行短路。

函數調用：obj.fn?.();// undefined

 

兩個操作符結合使用：

var obj = {};

obj.name = obj?.name?.firstName ?? {firstName: 'hello', lastName: 'world'};

obj;// {name: {firstName: 'hello', lastName: 'world'}}