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

2024年2月5日 252次阅读 来源: Haohong

适才看了下一个 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

    原文作者：Haohong
    原文地址: https://segmentfault.com/a/1190000013409955
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞