小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
看 Ant Design 源码的时候看到 onCancel?.(e) 这个写法，结合上下文推断是先判断是否存在、再执行的意思。但这是哪来的写法呀？跑去群里一问得知，是 2020 新特性呀！😮 还有个 ??，都是针对值为undefined 或 null 时的场景新增的新特性。这俩可太实用了，我得Mark 一下。
ES: 链式判断运算符 ?. （ES2020新特性）
对于嵌套的对象属性，我们经常需要利用短路逻辑去判断它是否存在，然后就会出现 aa && aa.bb && aa.bb.cc 这样的写法。链式判断运算符?. 就是为了解决这种场景而出现的。
const street = user?.address?.street;
//等价于
const street = user && user.address && user.address.street;
?. 同样适用于方法的调用，即前言中所提及的 onCancel?.(e) 用法。
ES: 非null、非 undefined 判断 ?? （ES2020新特性）
对于上述的例子，当 user.address.street 存在时，返回其值；当其不存在时，返回 undefined。如果想给它一个默认值咋整呢？ES2020 当然注意到这个问题了，我们可以通过空位合并操作符 ?? 提供默认值。
const street = user?.address?.street ?? '下街西4号';
//等价于
const street = user && user.address && user.address.street || '下街西4号';
CSS: inset
这个，我本来是用了第二种写法的，到浏览器看效果的时候，发现 chrome 自动处理为 inset 的写法了 😝
.box{
position:absolute;
inset:0px
}
/*等价于*/
.box{
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px
}
参考链接
记录日常工作、学习过程中碰到的小小新知识
