我想在开发的时候,很多人都应该都写过这样的js判断:
let arr = res && res.data && res.data.list
if(res.data.type){
...}
是不是非常冗余但又不得不写,今天介绍的新语法就是为了解决这种问题的
介绍下可选链操作符 ?.
先配置chaining
// 安装依赖 npm install @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中 的 plugins中添加 "@babel/plugin-proposal-optional-chaining"
module.exports = {
plugins: [
'@babel/plugin-proposal-optional-chaining', //可选链 ?.
'@babel/plugin-proposal-nullish-coalescing-operator' //空值合并 ??
]
}
let arr = res?.data?.list
if(res?.data?.list){
...}
介绍下可选链操作符 ??
要是想设置默认值,以前我们是这么写的
let arr = res && res.data || []
现在可以这样
let arr = res && res?.data ?? []
这个??的意思是当左边的值为null或undefined的时候 就取??右边的值 。
来一个长的
let arr = this.businessInfo?.typeInfo?.data?.length ?? 0
作用就是判断这个对象(this.businessInfo)下的(typeInfo)下的(data)下的(length)是否为null或者undefined,当其中一链为null或者undefined时就返回undefined,这样即使中间缺少一个属性也不会报错,双问号后面接的就是默认值