在 JavaScript 中，我们通常会在对象上进行属性访问和方法调用等操作。但有时候，我们不得不在想获取对象属性之前，判断对象是否存在或者该属性是否为 null。 这时候，可选链操作符就能派上用场。ES11 的可选链操作符将大大简化这些场景的代码。
可选链操作符的作用
可选链操作符 (?.) 可以在对象属性访问、数组索引访问和调用方法时，简化判断对象是否存在的代码，从而减少代码复杂度和错误率。我们先来看一个例子。
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - ----- ----------- ------- --------- ----- - - ----------------------------------- -- --------- ----- -------------------------- -- ----------------------- -- --------- ----- ------------------ -- -------------- -- ----------------------- -- --------- -----展开代码
以上代码的第一行，我们直接通过 person.address.street 获取地址信息，因为我们明确知道 person 对象存在，不需要对其进行额外的判断。但是，在许多情况下，我们不确定对象是否存在并且也不知道其属性值是否为 null 或 undefined。在这种情况下，我们需要通过一系列的判断语句来确保访问的安全性。可选链操作符将帮助我们缩短这些代码。
第二行和第三行的代码是在确保对象存在后，再去访问它的属性。这里使用了 && 运算符来判断是否有可能为 null 或 undefined，从而保证属性访问的安全。但是，这样的写法很容易变得冗长且不易于阅读，而可选链操作符的出现将解决这个问题。
下面，我们将通过可选链的方式来获取上述示例中的对象属性值，看看会有哪些不同。
console.log(person?.address?.street); // 'Zhujiang Road'
通过上述代码，我们可以看到，可选链操作符的出现让代码更加简洁易懂，并且避免了冗余的判断。
可选链操作符的使用
可选链操作符的语法格式为 ?.。我们可以在 . 前面添加可选链操作符，表示如果该属性值存在，则会返回它的值；如果没有，则返回 undefined。 下面，我们将通过几个示例来演示可选链操作符的使用。
1. 对象属性访问
我们可以使用可选链操作符来访问对象的属性。
const person = { name: 'Alice' } console.log(person?.name); // 'Alice' console.log(person?.age); // undefined
代码演示了如何使用可选链操作符来访问对象的属性。在上面的示例中，如果 person 对象存在，则会返回它的 name 属性；否则，返回 undefined。
2. 调用方法
我们还可以使用可选链操作符来调用方法。
const user = { getName() { return 'Alice'; } }; console.log(user?.getName()); // 'Alice' console.log(user?.getAge()); // undefined
在上述示例中，我们使用可选链操作符来调用 user 对象的 getName 和 getAge 方法。由于 getAge 方法不存在，所以其会返回 undefined。
3. 数组索引访问
我们甚至可以在数组索引访问中使用可选链操作符。
const array = [1, 2, 3]; const index = 3; console.log(array?.[index]); // undefined
在数组索引访问示例中，如果数组存在并且该索引位置上的元素存在，则会返回该元素的值；否则，返回 undefined。
在实际开发中，我们会经常使用到操作诸如嵌套对象和数组的语句。通过使用可选链操作符，我们可以大大简化这些代码片段，提高代码可读性和可维护性。
小结
本文介绍了 ECMAScript 2020 (ES11) 中的可选链操作符，并讲述了其应用于属性访问、方法调用和数组索引访问的方式，以及该操作符可以减少代码复杂度和错误率的原因。尝试使用该操作符，以更为简洁和优雅的方式处理嵌套对象和数组，增强代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bac7c7306f20b3a69d5924
