在前端开发中，我们经常会遇到需要访问对象或数组中的嵌套属性或方法的情况。但是如果在访问的过程中遇到了 null 或 undefined，就会导致程序崩溃。为了解决这个问题，ES12 中引入了 optional chaining 运算符，可以让代码更健壮。
optional chaining 运算符
optional chaining 运算符是一个问号加上一个点号，即 ?.，它可以安全地访问对象或数组中的嵌套属性或方法。如果在访问的过程中遇到了 null 或 undefined，它会自动返回 undefined，而不会导致程序崩溃。
下面是一个示例：
-- -------------------- ---- ------- ----- --- - - ---- - ---- - ---- ------ ------- - - -- -------------------------------- -- -------- ------ -------------------------------- -- ------------展开代码
在上面的示例中，我们使用 optional chaining 运算符访问了对象 obj 中的嵌套属性 foo.bar.baz 和 foo.bar.qux。由于 foo.bar.baz 存在，所以输出了它的值；而 foo.bar.qux 不存在，所以输出了 undefined。
optional chaining 运算符的使用场景
optional chaining 运算符在访问对象或数组中的嵌套属性或方法时非常有用，尤其是在访问第三方 API 或后端数据时更是如此。如果我们不使用 optional chaining 运算符，就需要使用一些繁琐的判断语句来保证程序的健壮性。
下面是一个使用 optional chaining 运算符的示例，用于访问第三方 API 中的数据：
const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data?.result?.[0]?.name); // 输出第一个结果的名称
在上面的示例中，我们使用 optional chaining 运算符访问了第三方 API 返回的数据中的嵌套属性 result[0].name。如果我们不使用 optional chaining 运算符，就需要使用一些繁琐的判断语句来保证程序的健壮性，如下所示：
-- -------------------- ---- ------- ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- --- ----- -- ----- -- ----------- -- ------------------ - - -- -------------------- - ---- - -------------------- - ------------------ -- ----------展开代码
可以看到，使用 optional chaining 运算符可以让代码更简洁、更易读、更健壮。
总结
optional chaining 运算符是 ES12 中新增的一个特性，可以让代码更健壮。它在访问对象或数组中的嵌套属性或方法时非常有用，尤其是在访问第三方 API 或后端数据时更是如此。使用 optional chaining 运算符可以让代码更简洁、更易读、更健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658f6d49eb4cecbf2d50dc68
