链判断运算符

在开发中如果读取对象内部的某个属性,往往会判断一下该对象是否存在,如读取list.info.user.content这个属性

1 // 错误写法,下面写法当某一层为null或undefined时会报错
2 const contentList = list.info.user.content || '张三'
3 
4 // 正确写法,下面写法要四层判断才能取到值
5 const contentList = (list && list.info && list.info.user && list.info.user.content )|| '张三'

在ES2020引入了“链判断运算符”,?. 大大简化了上面的写法

  1 const contentList = list ? .info ? .user ? .content || '张三'                       

上面的代码使用了 ?. 运算符,直接在链式调用的时候判断,左侧的对象是否为null或undefined,如果是,就不再往下运算

 

链判断运算符 ?. 有三种写法:

                        obj ? . prop         // 对象属性是否存在

                        obj ? . [expr]       // 同上

                        func ? . (...args)   // 函数或对象方法是否存在

 

下面是 ?. 运算符常见形式,以及不使用该运算符时的等价形式

复制代码
 1  a ? . b
 2 
 3  // 等同于
 4 
 5  a == null ? undefined : a.b
 6 
 7 
 8  a ? .[x]
 9 
10  // 等同于
11 
12  a == null ? undefined : a[x]
13 
14 
15  a ? .b()
16 
17  // 等同于 (特别注意的是a.b(),如果b有值但不是函数,不可调用,否则会报错)
18 
19  a == null ? undefined : a.b()
20 
21 
22  a ? .()
23 
24  // 等同于 (特别注意的是a(),如果b不是null或undefined,但也不是函数,不可调用,否则会报错)
25 
26  a == null ? undefined : a()
复制代码

 

posted @   Naynehcs  阅读(142)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示