在前端开发中，我们经常会遇到一个问题：当我们访问一个对象或数组中不存在的属性或元素时，JavaScript 会抛出一个运行时错误（TypeError）。这个问题可能会带来很多麻烦，比如说调试困难，影响程序的可维护性等等。为了解决这个问题，ES11 中提供了一个新的特性：可选链操作符。
可选链操作符
可选链操作符 ?. 允许我们在访问对象属性或数组元素时，如果该属性或元素不存在，就不会抛出运行时错误而是返回 undefined。其语法如下：
obj?.prop // 访问 obj.prop，如果 obj 不存在则返回 undefined arr?.[index] // 访问 arr[index]，如果 arr 不存在则返回 undefined
以下是一些示例代码：
// javascriptcn.com 代码示例
const user = {
id: 1,
name: "Jerry",
address: null,
phoneNumbers: [{ type: "home", number: "111-111-1111" }],
};
console.log(user?.id); // 1
console.log(user?.address?.country); // undefined
console.log(user?.phoneNumbers?.[0]?.type); // "home"
console.log(user?.phoneNumbers?.[1]?.type); // undefined如何使用可选链操作符
可选链操作符可以帮助我们避免很多运行时错误，但是它并不是适用于每个场景的通用解决方案。我们需要根据具体情况来判断是否使用可选链操作符。以下是一些使用可选链操作符的场景：
链式调用
在前端开发中，我们通常会使用很多第三方库，这些库提供了很多的链式调用方法。这些方法可能会访问很多对象和属性，如果某个对象或属性不存在，就会引发运行时错误。使用可选链操作符，我们可以避免这些问题：
import { get, pipe, defaultTo } from "lodash/fp";
const user = { id: 1, name: "Jerry" };
const getAddress = pipe(defaultTo({}), get("address"));
console.log(getAddress(user)?.city); // undefined可选的 API 参数
有时候我们需要调用一些 API，这些 API 可能需要传递很多参数。如果没有正确传递这些参数，就会引发运行时错误。使用可选链操作符，我们可以只传递那些需要的参数：
fetch("https://api.example.com/users", {
method: "POST",
body: JSON.stringify({}),
headers: {
"Content-Type": "application/json",
"Authorization": user?.token,
},
});深度嵌套的对象或数组
有时候我们需要访问深度嵌套的对象或数组，这些对象或数组有可能并不完整。使用可选链操作符，我们可以避免运行时错误：
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: {
d: 1,
},
},
},
};
console.log(obj?.a?.b?.c?.d); // 1
const arr = [[1]];
console.log(arr?.[0]?.[0]); // 1
console.log(arr?.[1]?.[0]); // undefined总结
使用可选链操作符 ?. 可以帮助我们避免 JavaScript 运行时错误，提高程序的可维护性。但是我们需要根据具体情况来判断是否使用可选链操作符。如果使用不当，它可能会带来很多问题（比如脆弱的代码、性能问题等等）。在使用可选链操作符时，我们需要注意以下几个方面：
- 尽量避免在不必要的场景中使用可选链操作符。
- 对于一些较为复杂的数据结构，可以使用 TypeScript 等工具提供的类型检查和智能提示来提高代码的可靠性和可维护性。
- 更多可选链操作符的用法，可以参考 MDN 的文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540a6e97d4982a6eba2c4cc