可选链操作符 ?.可选链操作符 ?. 是一种获取嵌套对象属性值的方式，它的优点在于当对象链上的某个属性不存在时，也不会报

可选链操作符 ?. 是一种获取嵌套对象属性值的方式，它的优点在于当对象链上的某个属性不存在时，也不会报错。

那么它的使用场景是什么呢？比如现有一段json格式的数据如下，要求我们输出每个用户的工作所在城市，也就是 work.city 的值

const userList = [
  {
    name: 'user1',
    work: {
      city: 'ShangHai'
    }
  },
  {
    name: 'user2',
    work: null
  },
]

如果我们直接获取值，那么程序就会报错

userList.forEach(user => {
  console.log(user.work.city)
})

// Cannot read property 'city' of null
// 因为第二个用户的city值为null，当读取null的city属性时程序会报错

这时候我们为了解决这个错误，可以尝试在访问 work 属性前加一层判断

userList.forEach(user => {
  if (user.work) {
    console.log(user.work.city)
  }
})

或者是使用

userList.forEach(user => {
  console.log(user.work ? user.work.city : null)
})

但是上述两种方法存在的一个问题是，如果对象的嵌套层次更多，那么我们就需要更多的判断，这样会使代码丑陋并且难以理解，在这种情况下，我们就可以使用 ?. 操作符来解决这个问题

userList.forEach(user => {
  console.log(user.work?.city)
})

// 此时程序就不会报错，输出的第二个值为undefined

这就是可选链操作符 ?. 的作用，它将表达式变的更短，更简明，也更安全

下面我总结了使用可选链操作符 ?. 时一些需要注意的事项：