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