【JS】可选链、双问号

可选链操作符 ?.

定义：可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

曾经的写法

var val = data.user && data.user.name;

可选链的写法

var val = data.user?.name; // data.user存在则取data.user.name值，否则返回undefined

双问号操作符 ??

定义：双问号操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

曾经的写法

var val = num || 100;
num = 0 || false || null || undefined; // val = 100;

但是我们想当num = 0时，val值为0，则可采取双问号的写法

双问号的写法

var val = num ?? 100; // 只有当num = null || undefined时，val = 100，否则为num的值

使用注意事项

项目依赖中babel版本 > 7, 并添加2个devDependencies依赖

@babel/plugin-proposal-optional-chaining // 可选链
@babel/plugin-proposal-nullish-coalescing-operator // 双问号