如何在 ES12 中使用 Optional Chaining 操作符避免空指针异常-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会遇到访问对象深层属性时出现空指针异常的问题。由于 JavaScript 中对象属性的访问是通过 . 或 [] 运算符实现的，当访问深层属性时，如果其中某一层为 null 或 undefined，就会导致代码抛出异常。

在 ES11 中，引入了 Optional Chaining （可选链）操作符 ?.，它可以使我们更加方便和安全地访问对象属性，避免出现空指针异常。

Optional Chaining 操作符的基本语法

Optional Chaining 操作符 ?. 的基本语法如下：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

其中，obj 可以是任何一个 JavaScript 对象或者 null 或 undefined，prop 是一个属性名，expr 是一个属性表达式，arr 是一个数组，index 是一个数组下标，func 是一个函数对象，args 是函数的参数列表。使用 Optional Chaining 操作符，我们可以在对象的访问链中插入 ?.，表示如果链中的前一个值为 null 或 undefined，则返回 undefined，而不是抛出异常。

Optional Chaining 操作符的使用示例

接下来，我们来看一些使用 Optional Chaining 操作符的示例。

示例一：访问嵌套对象的属性

假设我们有一个深度嵌套的对象 userInfo，其中包含了用户的基本信息、联系方式和账户信息等。为了访问用户手机的型号，可能需要这样写代码：

let phoneModel;
if (userInfo && userInfo.contactInfo && userInfo.contactInfo.phone && userInfo.contactInfo.phone.model) {
  phoneModel = userInfo.contactInfo.phone.model;
}

这样的代码相当繁琐冗长，而且容易出错。如果使用 Optional Chaining 操作符，我们可以简化代码如下：

const phoneModel = userInfo?.contactInfo?.phone?.model;

这样的代码更加简洁明了，也更加安全可靠。

示例二：调用可能不存在的方法

假设我们有一个函数 getUser，它可以根据用户 ID 获取用户信息。如果用户不存在，函数会返回 null。现在，我们想要获取用户的年龄，但是有些用户没有填写自己的年龄信息。如果直接访问 user.age，可能会导致空指针异常。如果使用 Optional Chaining 操作符，我们可以这样写代码：

const userAge = getUser(userId)?.age;

这样的代码可以避免空指针异常，保证程序的稳定性。

使用 Optional Chaining 操作符的注意事项

虽然 Optional Chaining 操作符可以帮助我们避免空指针异常，但是在使用时需要注意以下几点：

Optional Chaining 操作符只能在 ES11 或更高版本的 JavaScript 中使用，如果在旧版的浏览器或Node.js 环境中使用，可能会报错。
Optional Chaining 操作符只能用于对象和数组的属性访问，不能用于函数调用等其他操作。
Optional Chaining 操作符只能在对象的访问链中插入一次，不能连续使用多次。
在某些情况下，使用 Optional Chaining 操作符可能会导致代码的可读性变差，应该根据具体情况进行判断。

总结

Optional Chaining 操作符是一个非常实用的 JavaScript 语言特性，它可以帮助我们更加方便和安全地访问对象的属性，避免空指针异常。在实际开发中，我们应该合理使用 Optional Chaining 操作符，以提高代码的可读性和稳定性。

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