如何在 Javascript 中使用 ?. 运算符

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

由于 JavaScript 对象可能非常复杂且结构不可预测，因此有时很难访问它们的属性。某些嵌套对象或属性可能不存在，导致尝试使用它们时出现错误。Optional chaining作为 的一部分ES2020， 改变并简化了从深层对象结构中访问属性的方式。它也适用于 TypeScript，从 版本开始version 3.7。

`?.`运算optional chaining operator符允许读取位于一系列连接对象深处的属性值，而无需显式验证链中每个引用的有效性。该运算符?.的功能类似于 `.` 链式运算符，但不同之处在于，如果引用接近空值（`null` 或 `undefined`），它不会报错，而是直接返回 `undefined`。当与函数调用一起使用时，如果给定的函数不存在，则返回 `undefined`。

如果没有optional chaining operator，例如，如果我们想检查一个深层嵌套对象中的属性，我们就需要先检查每个引用是否存在，否则我们就有可能出错。

let person = {
    name: "Ben",
    age: 35,
    bankDetails: {
        IBAN: 781265489634,
        accountNumber: 5689245522221

    }
}

console.log(person.hobbies.fishing); // Uncaught TypeError: Cannot read property 'sum' of undefined

我们收到错误，是因为我们试图读取fishing对象的属性hobbies，但该person对象内部没有这样的嵌套对象。一种解决方法是使用运算符，像这样编写代码&&：

let person = {
    name: "Ben",
    age: 35,
    bankDetails: {
        IBAN: 781265489634,
        accountNumber: 5689245522221

    }
}

console.log(person && person.hobbies && person.hobbies.fishing); // undefined

该属性仍然不存在，但这次不会抛出 TypeError 异常，而是返回“undefined”。添加运算&&符可以确保我们尝试检查的所有属性都存在，但每次都要编写这样的语句似乎很麻烦，而且代码也难以阅读。

这是使用句点后相同代码的样子chaining operator。

let person = {
    name: "Ben",
    age: 35,
    bankDetails: {
        IBAN: 781265489634,
        accountNumber: 5689245522221

    }
}

console.log(person?.hobbies?.fishing);// undefined

代码看起来更简洁清晰了。它的工作原理是，如果前面的部分是`true` 或 `false` optional chaining operator，则停止计算并返回。undefined?.nullundefined

温馨提示：并非所有浏览器都支持此运算符，因此请确保您无需使用 polyfill 即可避免出现问题。您可以在此处查看兼容性。

图片来源：Startup Stock Photos/ @startup-stock-photos on Pexels