如何使用 ECMAScript 2019 的可选链操作符来避免代码中的 NullPointerException

在前端开发中，我们总是会遇到代码中的 NullPointerException（空指针异常）。这种异常会导致程序崩溃，影响用户体验。为了解决这个问题，ECMAScript 2019 引入了可选链操作符（Optional Chaining Operator）。

可选链操作符是什么？

可选链操作符是一种新的语法，可以在不检查 null 或 undefined 值的情况下，访问对象的属性或方法。在使用可选链操作符时，如果对象的某个属性或方法不存在，它会返回 undefined，而不是抛出 NullPointerException。

可选链操作符是一个问号（?）后跟一个点号（.）或方括号（[]）。

obj?.prop            // 访问 `obj.prop`，如果 `obj` 为 null 或 undefined，则返回 undefined
obj?.[expr]          // 访问 `obj[expr]`，如果 `obj` 为 null 或 undefined，则返回 undefined
func?.(args)         // 调用 `func(args)`，如果 `func` 为 null 或 undefined，则返回 undefined

如何使用可选链操作符？

接下来，我们将介绍如何使用可选链操作符来避免 NullPointerException。

示例一：访问对象属性

假设我们有一个对象 person，它有一个属性 name，我们想要访问它：

const person = {
  name: 'Tom'
}
console.log(person.name)  // 输出 'Tom'

如果 person 不存在，我们使用可选链操作符：

const person = null
console.log(person?.name)  // 输出 undefined

示例二：访问对象方法

假设我们有一个对象 person，它有一个方法 getName，我们想要调用它：

const person = {
  getName() {
    return 'Tom'
  }
}
console.log(person.getName())  // 输出 'Tom'

如果 person 不存在，我们使用可选链操作符：

const person = null
console.log(person?.getName?.())  // 输出 undefined

示例三：访问数组元素

假设我们有一个数组 arr，它有一个元素 [0]，我们想要访问它：

const arr = ['Tom']
console.log(arr[0])  // 输出 'Tom'

如果 arr 不存在，我们使用可选链操作符：

const arr = null
console.log(arr?.[0])  // 输出 undefined

示例四：用可选链操作符代替短路运算符

在以前，我们经常使用短路运算符来避免 NullPointerException。例如：

const person = null
console.log(person && person.name)  // 输出 undefined

现在，我们可以使用可选链操作符来代替短路运算符：

const person = null
console.log(person?.name)  // 输出 undefined

总结

可选链操作符是 ECMAScript 2019 引入的一种新的语法，可以在不检查 null 或 undefined 值的情况下，访问对象的属性或方法。使用可选链操作符可以避免 NullPointerException，提高程序的稳定性和可靠性。

在实际开发中，我们应该养成使用可选链操作符的习惯，减少 NullPointerException 的出现。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65736100d2f5e1655dc7cc33