在前端开发中，常常遇到访问对象的属性或方法时可能出现未定义的情况，这时候就需要加入一些判断逻辑。而 ES10 中的可选链调用（Optional Chaining）可以让我们更加方便地处理这种情况。
什么是可选链调用？
可选链调用是一种简化代码书写的语法糖，其特点是在访问对象的属性或方法时，如果对象本身为 null 或 undefined，那么就不再进一步访问该属性或方法，直接返回 undefined。
在 ES10 之前，通常需要用 if 语句或三元运算符来进行类型判断和处理，如：
-- --- -- ----- ----- - --- -- ------------ -- ------------------- -- ---- ----- ----- ----- - ---------------------
如何使用可选链调用？
可选链调用的语法非常简单，就是在属性或方法名后面加上问号 ?，例如：
------------- -------------
可以使用多个 ? 连接起来，例如：
-----------------------------------
我们来看一个例子，假设我们有一个对象 person，它有一个属性 address，而 address 又有一个属性 city，我们要访问 person.address.city 的值：
----- ------ - -
----- ------
-------- -
------- ---- ---- -----
----- ----------
------ -----
--
--
---------------------------------上述代码会在控制台中输出 Anytown。但如果 address 为 null 或 undefined 呢？我们可以加上类型判断来处理：
-- ------- -- -------------- -- -------------------- - --------------------------------- -
而使用可选链调用，则可以更加简便：
-----------------------------------
如果 person 或 address 为 null 或 undefined，控制台中将不会输出任何内容。
在 React 中使用可选链调用
在 React 中，我们常常会使用 JSX 语法来生成 UI，而 JSX 中的属性也可能出现未定义的情况。
例如，我们有一个组件 MyComponent，其 props 中包含 user 属性，而 user 又有一个属性 name，我们需要在组件内部渲染出 user.name 的值：
-------- ------------------ - ------ ------------------------------- -
但如果我们传入的 props.user 为 null 或 undefined 呢？控制台会报错，因为我们无法访问 null 或 undefined 的属性 name。
为了避免这种情况，我们可以使用可选链调用：
-------- ------------------ - ------ -------------------------------- -
这样即使 props.user 为 null 或 undefined，也不会出现错误，而是显示出一个空字符串。
总结
可选链调用是 ES10 中一项方便实用的语法糖，可以简化我们代码中的条件判断和逻辑处理，提高开发效率和代码可读性。在 React 中，更是避免了很多由于未定义对象属性而引发的错误。我们应该熟练掌握可选链调用的使用方法，用其来更好地处理对象属性或方法的访问。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6450c843980a9b385b9b21c2