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

2018-03-01 11:01:05来源:segmentfault作者: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 已经添加了此特性的插件,想现在用起来的同学可以安装起来。


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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台