ES6系列 (03)：链判断运算符和Null 判断运算符

链判断运算符

如果我们要获取一个对象的深层嵌套属性，例如获取文章标题res.data.article.title，为了安全起见，我们肯定不能直接这样获取，万一res对象没有article属性了呢，直接原地爆炸

// 不安全
const { title} = res.data.article

绝大多数情况下我是这样获取

// 安全
const title = res&&res.data&&res.res.data.article&&res.data.article.title || '默认标题'

如果嵌套层级不深的话还可以使用三目运算符，例如获取res.account

const account = res ? res.account : '柏成'

上面的写法稍微有些臃肿，如果使用链判断运算符?.可以稍稍简化些代码，是不是变得更优雅...

const title = res?.data?.article?.title || '默认标题'
const account = res?.account || '默认账号'

Null判断运算符

对于res?.data?.article?.title || '默认标题'来说，我们通过逻辑或运算符||指定了默认值，我们可能想的是属性title为undefined或null时启用默认值，但是呢，title属性为''、false、0、NaN时，默认值也会生效，这就背离了我们的开发初衷
如果使用Null判断运算符??的话，就解决了这样的问题，只有仅当??左侧为undefined或null才会启用默认值

const title = res?.data?.article?.title ?? '默认标题'
const account = res?.account ?? '默认账号'

需要注意的是，??和&&、||一起使用的时候，必须用小括号表明优先级，否则会报错。

// 报错
title && account ?? '默认标题'
title || account ?? '默认标题'

// 不报错
(title && account) ?? '默认标题'
(title || account) ?? '默认标题'