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