链判断运算符

在开发中如果读取对象内部的某个属性,往往会判断一下该对象是否存在,如读取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()

 

上一篇:CSS运用盒子模型划分网页模块


下一篇:引用data()里的数据报错"ReferenceError: data is not defined"