在前端开发中，我们经常会使用链式调用来访问对象的属性或方法。然而，当对象的某个属性或方法不存在时，链式调用就会出现问题，导致程序抛出错误。为了解决这个问题，ES11 中引入了 Optional Chaining 这个功能函数。
Optional Chaining 是什么？
Optional Chaining 是一个语言特性，它可以让我们在访问对象的属性或方法时，不必担心这些属性或方法是否存在。如果属性或方法不存在，Optional Chaining 会返回 undefined，而不是抛出错误。
Optional Chaining 的语法
Optional Chaining 的语法非常简单，就是在对象属性或方法的访问路径中加上问号（?）。
例如，假设我们有一个对象 person，它有一个 name 属性和一个 address 属性，其中 address 又有一个 city 属性。我们可以使用 Optional Chaining 来访问 city 属性，如下所示：
const city = person.address?.city;
如果 person 没有 address 属性，或者 address 没有 city 属性，那么 city 变量的值就会是 undefined。
Optional Chaining 的应用
Optional Chaining 可以用在很多场景中，下面是一些示例。
1. 访问对象的属性
假设我们有一个对象 person，它有一个 name 属性和一个 address 属性，其中 address 又有一个 city 属性。我们可以使用 Optional Chaining 来访问 city 属性，如下所示：
const city = person.address?.city;
2. 调用对象的方法
假设我们有一个对象 math，它有一个 add 方法和一个 subtract 方法。我们可以使用 Optional Chaining 来调用 subtract 方法，如下所示：
const result = math.subtract?.(10, 5);
如果 math 没有 subtract 方法，那么 result 变量的值就会是 undefined。
3. 访问数组元素
假设我们有一个数组 numbers，它有一个长度为 3 的元素。我们可以使用 Optional Chaining 来访问第四个元素，如下所示：
const fourth = numbers[3]?.;
如果 numbers 没有第四个元素，那么 fourth 变量的值就会是 undefined。
Optional Chaining 的注意事项
虽然 Optional Chaining 可以帮助我们避免程序出错，但是在使用它时，也需要注意一些事项。
1. 需要使用最新的浏览器或者 Babel 转译
Optional Chaining 是 ES11 中引入的新特性，因此只有支持 ES11 的浏览器才能够使用它。如果你需要在旧版本的浏览器中使用 Optional Chaining，那么你需要使用 Babel 进行转译。
2. 不要滥用 Optional Chaining
虽然 Optional Chaining 可以帮助我们避免程序出错，但是滥用它也会导致代码难以维护。因此，在使用 Optional Chaining 时，我们需要权衡利弊，避免滥用。
总结
Optional Chaining 是一个非常实用的语言特性，它可以帮助我们避免程序出错，提高代码的健壮性。在实际开发中，我们可以根据具体场景灵活使用 Optional Chaining，从而提高开发效率和代码质量。
参考代码
下面是一个使用 Optional Chaining 的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -----
-------- -
----- ----
-
--
----- ---- - ---------------------
------------------ -- -----
----- ---- - -
---- --- -- -- - - -
--
----- ------ - ------------------- ---
-------------------- -- ------------
----- ------- - --- -- ---
----- ------ - -------------
-------------------- -- ------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f004202b3ccec22f939f77