使用可选链操作符(?.)和空值合并运算符(??)简化代码

一、可选链操作符 ( ?. )

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

语法

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

1.简化代码前

let result = {
    newUsers:[{value:1}]
    activeUsers:[{value:1}]
    lunchtimes:[{value:1}]
}
statisticalData = {
    newUsers: result.newUsers.length ? result.newUsers[0].value : 0,
    activeUsers: result.activeUsers.length ? result.activeUsers[0].value : 0,
    lunchtimes: result.lunchtimes.length ? result.lunchtimes[0].value : 0
};

2.简化代码后

statisticalData = {
    newUsers: result.newUsers[0]?.value ,
    activeUsers: result.activeUsers[0]?.value ,
    lunchtimes:result.lunchtimes[0]?.value 
};

3.总结

通过连接的对象的引用或函数可能是 undefined 或 null 时，可选链操作符提供了一种方法来简化被连接对象的值访问。可选链操作符将会使表达式更短、更简明。

二、合并运算符(??)

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

语法

leftExpr ?? rightExpr

三、合并运算符（??）与可选链式操作符（?.）的关系

空值合并操作符针对 undefined 与 null 这两个值，可选链式操作符（?.） 也是如此。在这访问属性可能为 undefined 与 null 的对象时，可选链式操作符非常有用。

// 合并运算符
(null || undefined ) ?? "foo"; // 返回 "foo"

// 可选链式操作符
let foo = { someFooProp: "hi" };
console.log(foo.someFooProp?.toUpperCase()); // "HI"
console.log(foo.someBarProp?.toUpperCase()); // undefined