[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