Debug-011-ES6中的链判断运算符(?.)

这个问题的来源是:

        前端在请求后端接口,拿到的数据,有可能是这样的:

data:{
    a:{
        b:{
            c:{
                d:""
             }
        }
    }
}

我们前端小伙伴联调时需要取到d的值,我以前是这样写的:

// 错误的写法
const value= data.a.b.c.d   || '给个默认值'
 

上面明显是一个错误写法,因为有时候接口返回的数据data中是没有a的,data有可能是{} 或者null ,这个时候再这样取值肯定会报错。就像下面的例子一样:

大家肯定不会像我一样踩过这个坑吧。

以前链判断没有出现之前有这样一种写法:


// 正确的写法
const value= (data && data.a  && data.a.b && data.a.b.c && data.a.b.c.d) || '给个默认值'

这样写其实就是判断data是否有值,如果有就继续判断data.a是否有值,如果没有就会使用“给个默认值”,有就继续往下找,以此类推。

显然这样写非常麻烦,代码过于臃肿了。

因此引出链判断运算符            ?. 

//简化写法
const value= data?.a?.b?.c?.d   || '给个默认值'

?.运算符,直接在链式调用的时候判断,左侧的对象是否为null或者undefined,如果是的,就不再往下运算,而是返回undefined

---------------------------------------------------补充---------------------------------------------------

Null 判断运算符(??)

  1. || 属性的值为null、undefined、为空字符串、false、0,默认值就会是 || 右边的值
  2. ?? 只有运算符左侧的值为null或undefined时,才会返回右侧的值
  3. ??  ||  && 三者谁的优先级更高,现在的要求是必须添加小括号包裹,不然会报错,下面是我在控制台上面的打印。

  • 27
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农小白-RMS

谢谢老板

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值