[Frontend Tips] JS: Optional Chaining, 再也不怕一长串的属性调用了

刚才看了下一个 JS 新特性——「Optional Chaining」，这是干啥用的呢？

过去在 Object 属性链的调用中，很容易因为某个属性不存在而导致之后出现Cannot read property xxx of undefined的错误。

const obj = {
    qwe: {
        asd: {
            zxc: '666'
        }
    }
}

console.log(obj.qwe.asd.zxc); // 666
console.log(obj.abc.def.ghi); // Uncaught TypeError: Cannot read property 'def' of undefined...

那 optional chaining 就是添加了?.这么个操作符，它会先判断前面的值，如果是 null 或 undefined，就结束调用、返回 undefined。

console.log(obj?.abc?.def?.ghi); // undefined

要注意操作符是?.，而不是单独的？。因此，如果属性链中取某个 Array 的元素，应该是obj?.qwe?.arr?.[0]。类似的，如果需要取属性链中某函数并执行，就应该是obj?.qwe?.func?.()。

这个特性可以说是非常实用了，不过它现在处于 stage-1 阶段，估计进入标准还有段时间。不过 Babel v7 beta 已经添加了此特性的插件，想现在用起来的同学可以安装起来。

Reference

• babel/packages/babel-plugin-proposal-optional-chaining at master · babel/babel
• tc39/proposal-optional-chaining
• Optional Chaining may be coming to JavaScript