如果我们使用 JavaScript 不管是用在前端或者 Node.js 服务端都会出现如下情况，因为我们有时是不确定 user 对象是否存在，又或者 user 对象里面的 address 是否存在，如果不这样判断， 可能会得到类似于 Cannot read property ‘xxx’ of undefined 这样的类似错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
const user = {
  name: 'Haley',
  address: {
    city: 'GuangZhou'
  }
}

optionalChaining(){
    if (this.user.address.city1.length > 0){
      alert("原先写法触发");
    }
}

现在我们有一种优雅的写法 “可选链操作符”，不必明确的验证链中的每个引用是否有效，以符号 “?.” 表示，在引用为 null 或 undefined 时不会报错，会发生短路返回 undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

optionalChaining(){
    if (this.user.address?.city1?.length > 0){
      alert("新特性触发");
    }
},

user.address?.city
user.address?.city?.length
 
// 结合 ?.[] 的方式访问相当于 user.address['city']
user.address?.['city']
 
// 结合 delete 语句使用，仅在 user.address.city 存在才删除
delete user.address?.city