在前端开发中，经常需要嵌套访问对象或数组的属性或方法，特别是在处理 API 返回的数据时。在很多情况下，我们需要使用冗长而繁琐的判断语句来确定对象或数组中是否存在所需的属性或方法。然而，ES2020和ES2021中都新增了一种Optional Chaining Operator（可选链式操作符）以简化这个过程。
理解 Optional Chaining Operator
Optional Chaining Operator是一种简化嵌套属性访问的方法。它使用问号（?）来代替冗长的if语句，它的作用是在属性不存在的情况下不会抛出异常，而是会返回undefined值。
// javascriptcn.com 代码示例
const user = {
address: {
street: '123 Main St'
}
}
console.log(user.address.street) // '123 Main St'
console.log(user.address.city) // undefined
// 之前的代码工作过程
if (user && user.address && user.address.street) {
console.log(user.address.street)
}
// 使用可选链式操作符
console.log(user?.address?.street)上面的代码使用可选链操作符取代了原本的if语句，如果user对象不存在address属性或address属性下没有street属性，则会返回undefined值。
示例
可以利用可选链式操作符来避免像这样的错误：
const result = fetchResult?.data?.items?.[0]?.id
在这个示例中，我们使用了可选链式操作符在JSON数据的层次结构中遍历，在无法访问属性或方法时返回undefined。
在下面的代码中，我们可以看到如何在函数调用时使用Optional Chaining：
// javascriptcn.com 代码示例
const tasks = [
{
title: 'Task One',
details: {
description: 'detail description 1'
}
},
{
title: 'Task Two',
details: {
description: 'detail description 2',
comments: [
{
id: 1,
text: 'comment text 1'
},
{
id: 2,
text: 'comment text 2'
}
]
}
},
{
title: 'Task Three',
details: {
description: 'detail description 3',
comments: undefined
}
}
]
function getComments(task) {
return task?.details?.comments?.map(comment => comment.text)
}
console.log(getComments(tasks[0]))
// expected output: undefined
console.log(getComments(tasks[1]))
// expected output: ['comment text 1', 'comment text 2']
console.log(getComments(tasks[2]))
// expected output: undefined使用 Optional Chaining 的场景
在前端开发中，Optional Chaining Operator可能是最有用的ES2020和ES2021功能之一。下面是一些使用Optional Chaining的场景：
API返回值
处理API返回数据时，可能会面临不同的问题，包括不标准的JSON格式和误导性的返回结果。例如，当我们使用可选链式操作符处理带有数组数据集的JSON对象时，我们可以添加一行代码来避免错误：
const result = data?.[0]?.outputs?.[0]?.id
Redux状态管理
如果您使用Redux管理状态，则可以使用可选链式操作符来访问嵌套的状态。最常见的是，在Redux store 中访问嵌套的状态。
const user = state?.users?.[id]?.data
React组件
在使用React组件构建应用程序时，我们经常需要检查 props 对象中是否有必要的属性。使用可选链式操作符，在组件提交到 props 后可以避免这种情况。
// javascriptcn.com 代码示例
const props = {
a: {
b: {
c: 'hello world'
}
}
}
console.log(props?.a?.b?.c) // 'hello world'总结
Optional Chaining Operator是一种简化嵌套属性访问的方法。在前端开发中可避免代码模板和判断的冗长。本文介绍了Optional Chaining Operator的定义和使用场景。无论您正在处理API返回数据，Redux状态管理，还是React组件，都可以看到Optional Chaining提供的好处，减少冗长的代码和增加代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6527cbae7d4982a6eba639e8