可选链操作符?.和空值赋值操作符??

可选链操作符 ?. 和空值赋值操作符 ?? 都是 ES2020 中引入的新特性,它们的作用分别是:

可选链操作符 ?. :- 用于可选读取对象的深层属性,如果中间的属性不存在则返回 undefined 而不会报错。

例如:

let name = obj.name;        // 如果 obj 不存在,这里会报错
let name = obj?.name;       // 如果 obj 不存在,返回 undefined

- 可用于读取对象属性、调用方法、访问数组元素等。

例如:

let age = person?.['age'];
let func = obj?.someMethod?.();
let first = arr?.[0]; 

空值赋值操作符 ?? :

- 用于在目标值为空(null 或 undefined)时,提供默认值。

例如:

let name = obj.name ?? 'default'; 
// 等同于:
let name = obj.name || 'default';
// 但是 ?? 有另一个功能:如果obj.name为假值(如0)时,不会取'default'

- 只有在目标值为 null 或 undefined 时才会取默认值,如果值为假值(如 0 或 '')则不会取默认值。

所以 ?? 比 || 要严格一些。

例如:

let age = 0 ?? 18;   // age 为 0
let age = '' ?? 18;  // age 为 ''
let age = null ?? 18; // age 为 18

总结:

可选链操作符 ?. 用于可选读取对象深层属性,如果中间属性不存在则返回 undefined。
空值赋值操作符 ?? 用于在目标值为空(null / undefined)时提供默认值。
可选链操作符基于安全性考虑,空值赋值操作符基于严格性考虑。
两者都是 ES2020 的新特性,使得对象属性读取和默认值处理更简洁高效。