在前端开发中，代码规范是一个非常重要的问题。一个好的代码规范可以让代码更加易读易懂，减少出错的可能性。而 ECMAScript 2020 中引入的 Optional Chaining 语法，可以帮助我们更好地控制代码规范。在本篇文章中，我们将详细介绍 Optional Chaining 的用法，以及如何在实际项目中使用它。
Optional Chaining 的介绍
Optional Chaining 是 ECMAScript 2020 中引入的一种新的语法。它可以帮助我们更加方便地处理对象的属性或方法不存在的情况。在 JavaScript 中，如果我们想要访问一个对象的属性或方法，通常会使用点运算符（.）或方括号运算符（[]）。但是，如果这个属性或方法不存在，就会抛出 TypeError 的异常。而 Optional Chaining 可以帮助我们避免这种异常的出现。
Optional Chaining 的语法非常简单，就是在点运算符或方括号运算符后面加上一个问号（?）。例如，我们想要访问一个对象的属性，但是这个属性可能不存在，可以使用以下语法：
const value = obj?.prop;
如果 obj 对象存在 prop 属性，则返回 obj.prop 的值；如果 obj 对象不存在 prop 属性，则返回 undefined。
同样的，如果我们想要调用一个对象的方法，但是这个方法可能不存在，可以使用以下语法：
obj?.method();
如果 obj 对象存在 method 方法，则调用 obj.method()；如果 obj 对象不存在 method 方法，则什么也不做。
Optional Chaining 的示例
为了更好地理解 Optional Chaining 的用法，我们来看一个示例。假设我们有一个对象 person，它有一个 name 属性和一个 address 属性。address 属性又包含了一个 city 属性和一个 street 属性。我们要获取 person 对象的 street 属性，但是它可能不存在。如果不使用 Optional Chaining，代码可能会是这样的：
const street = person.address && person.address.city && person.address.street;
这样的代码不仅冗长，而且不易读。而使用 Optional Chaining，代码就可以简化为：
const street = person?.address?.city?.street;
这样的代码更加简洁易读，而且可以避免出现 TypeError 的异常。
如何在实际项目中使用 Optional Chaining
在实际项目中，我们可以在以下几种情况下使用 Optional Chaining：
1. 访问对象的属性或方法
当我们访问一个对象的属性或方法时，可以使用 Optional Chaining 避免出现 TypeError 的异常。例如：
const name = person?.name; const city = person?.address?.city; const sayHello = person?.sayHello?.();
2. 调用函数的返回值
当我们调用一个函数并获取它的返回值时，可以使用 Optional Chaining 避免出现 TypeError 的异常。例如：
const result = getData()?.result;
如果 getData 函数存在并返回一个对象，那么 result 就会获取到这个对象的 result 属性的值；如果 getData 函数不存在或返回值不是对象，那么 result 就会是 undefined。
3. 使用链式调用
当我们使用链式调用时，可以使用 Optional Chaining 避免出现 TypeError 的异常。例如：
const result = getData()?.filter(item => item > 0)?.map(item => item * 2);
如果 getData 函数存在并返回一个数组，那么就会对这个数组进行过滤和映射操作；如果 getData 函数不存在或返回值不是数组，那么 result 就会是 undefined。
总结
Optional Chaining 是 ECMAScript 2020 中引入的一种新的语法，它可以帮助我们更加方便地处理对象的属性或方法不存在的情况。在实际项目中，我们可以在访问对象的属性或方法、调用函数的返回值、使用链式调用等情况下使用 Optional Chaining。通过使用 Optional Chaining，我们可以更好地控制代码规范，让代码更加易读易懂，减少出错的可能性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583f00cd2f5e1655debb6d3