链判断运算符

在开发中如果读取对象内部的某个属性，往往会判断一下该对象是否存在，如读取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 @ 2022-02-08 16:58  Naynehcs  阅读(136)  评论(0)  编辑  收藏  举报