ES11 优秀特性：讲一讲可选链和链判断运算符

在前端开发中，我们经常需要处理数据结构，比如嵌套对象和数组。在访问嵌套对象或者数组元素时，如果数据结构中某个属性或者元素不存在，那么就会出现 undefined 的情况，这时候我们需要进行一些判断和处理。在 ES11 中，新增了可选链和链判断运算符，可以很方便地处理这种情况。

可选链

可选链是一个非常实用的特性，它可以避免在访问嵌套对象或者数组元素时出现 undefined 的情况。它的语法如下：

obj?.prop // 访问对象属性
arr?.[index] // 访问数组元素

其中，?. 表示可选链，如果 obj 或者 arr 为 null 或者 undefined，那么访问 prop 或者 index 就会返回 undefined，而不会抛出错误。如果 obj 或者 arr 存在，那么就会正常访问属性或者元素。

下面是一个示例代码：

const person = {
  name: 'Tom',
  address: {
    city: 'Beijing',
    street: 'Chaoyang Road'
  }
}

console.log(person?.address?.city) // 'Beijing'
console.log(person?.address?.country) // undefined

在上面的示例中，我们使用了可选链来访问 person 对象中的 address 属性和 city 属性。由于 person 对象中存在 address 属性，所以访问 address 属性不会出错。而由于 person 对象中不存在 country 属性，所以访问 country 属性会返回 undefined。

链判断运算符

链判断运算符也是一个非常实用的特性，它可以更加方便地进行链式访问和判断，避免出现 undefined 的情况。它的语法如下：

obj?.prop1?.prop2?.method()

其中，?. 表示可选链，如果 obj 或者 prop1 或者 prop2 为 null 或者 undefined，那么访问 method 就会返回 undefined，而不会抛出错误。如果 obj 或者 prop1 或者 prop2 存在，那么就会正常访问属性或者方法。

下面是一个示例代码：

const person = {
  name: 'Tom',
  address: {
    city: 'Beijing',
    street: 'Chaoyang Road'
  },
  sayHello() {
    console.log(`Hello, my name is ${this.name}`)
  }
}

person?.address?.sayHello?.() // 'Hello, my name is Tom'

在上面的示例中，我们使用了链判断运算符来访问 person 对象中的 address 属性和 sayHello 方法。由于 person 对象中存在 address 属性和 sayHello 方法，所以访问不会出错。而由于 person 对象中不存在 country 属性，所以访问 country 属性会返回 undefined。

总结

可选链和链判断运算符是 ES11 中非常实用的特性，它们可以避免在访问嵌套对象或者数组元素时出现 undefined 的情况，从而简化了代码的编写和调试。在实际开发中，我们可以充分利用这些特性，提高代码的可读性和健壮性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658901d2eb4cecbf2de30633