JavaScript - 可选链、空值合并运算符

可选链操作符

可选链操作符( 

?.

 )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

通过连接的对象的引用或函数可能是 

undefined

 或 

null

 时，可选链操作符提供了一种方法来简化被连接对象的值访问。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。

Example：

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

为了避免报错，在访问

obj.first.second

之前，要保证 

obj.first

 的值既不是 

null

，也不是 

undefined

。如果只是直接访问 

obj.first.second

，而不对 

obj.first

 进行校验，则有可能抛出错误。

有了可选链操作符（

?.

），在访问 

obj.first.second

 之前，不再需要明确地校验 

obj.first

 的状态，再并用短路计算获取最终结果：

let nestedProp = obj.first?.second;
           

通过使用 

?.

 操作符取代 

.

 操作符，JavaScript 会在尝试访问 

obj.first.second

 之前，先隐式地检查并确定 

obj.first

 既不是 

null

 也不是 

undefined

。如果

obj.first 

是 

null

 或者 

undefined

，表达式将会短路计算直接返回 

undefined

。

空值合并运算符

空值合并操作符（

??

）是一个逻辑操作符，当左侧的操作数为 

null

 或者 

undefined

 时，返回其右侧操作数，否则返回左侧操作数。

||

 是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（

， 

''

， 

NaN

， 

null

， 

undefined

）都不会被返回。

??

const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42
           

||

let count = 0;
let text = "";

let qty = count || 42;
let message = text || "hi!";
console.log(qty);     // 42，而不是 0
console.log(message); // "hi!"，而不是 ""
           

更多 - 可选链

更多 - 空值合并运算符