在前端开发中，我们常常需要访问复杂嵌套的对象或数组属性，这时候就会遇到许多 null 或 undefined 引用错误，会导致程序崩溃或出现异常情况。通常，在 JavaScript 中，我们需要通过一些繁琐的判空操作来避免这种错误的出现。但在 ECMAScript 2021 中，引入了 Optional Chaining 运算符，大大简化了链式访问的代码，并减少了一些不必要的 null、undefined 检查。
Optional Chaining 运算符
Optional Chaining 运算符，也称为 "安全导航符"，是 ECMAScript 2021 新增的一项特性。它允许我们在不确定对象或数组的属性是否存在的情况下，直接访问它们的属性值，而不必担心出现 null 或 undefined 引用错误。它的语法如下：
obj?.prop // 可选链访问 obj.prop arr?.[index] // 可选链访问 arr[index]
其中 ?. 表示可选链，它与常规的.点号操作符类似，但是当对象或数组的属性值不存在时，它不会抛出错误，而是直接返回 undefined。使用可选链操作符我们可以避免繁琐的判空操作，让代码变得更加简洁和易读。
示例代码
下面，我们来看一个使用 Optional Chaining 运算符的示例。假设我们有一个对象 user，其中包含着用户的信息和交易记录信息。
// javascriptcn.com 代码示例
const user = {
name: 'Peter',
email: 'peter@example.com',
transactions: [
{ id: 1, amount: 100 },
{ id: 2, amount: 200 },
{ id: 3, amount: 300 }
]
}如果我们想要获取这个用户的第一笔交易的金额，通常的方法可能是这样写：
let amount = 0
if (user && user.transactions && user.transactions[0]) {
amount = user.transactions[0].amount
}
console.log(amount) // 100但使用可选链操作符，我们可以通过一行简单的代码快速地完成同样的功能：
const amount = user?.transactions?.[0]?.amount || 0 console.log(amount) // 100
在上面的代码中，我们使用了可选链操作符 ?.，它允许我们直接访问 user.transactions[0].amount，并在不存在该属性值的情况下返回默认值 0。这样我们就可以避免繁琐的判空操作，并让代码变得更加简洁和易读。
指导意义
使用 ECMAScript 2021 的 Optional Chaining 运算符可以帮助我们更加方便地访问复杂嵌套的对象或数组属性，简化代码并减少可能出现的 null、undefined 引用错误。因此，在平时的前端开发工作中，我们应该尽可能地使用可选链操作符，以提高代码的可读性和维护性。
当然，可选链操作符并不能替换我们对于代码的严谨、规范和质量的要求，我们仍然需要在编写代码时将 null、undefined 检查和错误处理作为一个必要的环节，以保证代码的健壮性和稳定性。同时，我们也要注意到 Optional Chaining 运算符在一些老版本的浏览器中可能不被支持，因此在实际的项目开发中需要结合实际情况进行选择和使用。
总结
本文介绍了 ECMAScript 2021 的 Optional Chaining 运算符，并通过示例代码演示了如何使用它来简化代码、避免 null、undefined 引用错误。可选链操作符是一项非常实用的特性，它可以提高代码的可读性和维护性，但也需要我们在编写代码时坚持规范、质量和健壮的原则。让我们在前端开发工作中使用 ECMAScript 2021 新特性，提高代码的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539bdad7d4982a6eb337715