ECMAScript 2019 引入了一项新特性，称为 Optional Chaining。这个特性能够显著简化你在 JavaScript 中的代码编写过程，降低代码维护成本。本文将详细介绍这个特性以及如何正确使用它。
什么是 Optional Chaining
Optional Chaining 是一种 JavaScript 语法糖，它允许我们在访问一个对象的属性或方法时，不必去考虑这个对象是否为 null 或 undefined。如果这个对象不存在，那么 Optional Chaining 表达式的结果将为 undefined，而不是报错。
在以前的 JavaScript 版本中，如果你需要访问一个对象的属性或方法，你必须先判断这个对象是否为 null 或 undefined，否则你的代码会出现意想不到的错误。
例如：
--- ------ - ----- --- ---- - ------------
这段代码会抛出一个错误，因为 person 是 null，它没有 name 属性。要避免这种情况，我们必须先判断 person 是否为 null 或 undefined，比如：
--- ------ - ----- --- ---- - ------ - ----------- - ----------
Optional Chaining 可以让我们避开这类冗长的代码，直接访问对象的属性或方法，而不需要担心会出现错误。有了 Optional Chaining，我们可以这样写：
--- ------ - ----- --- ---- - -------------
如果 person 为 null 或 undefined，那么 name 的值将是 undefined，同时不会抛出任何错误。
在上面的例子中，我们使用了一种新的语法 ?.，它就是 Optional Chaining 表达式的符号。
Optional Chaining 的使用技巧
访问对象属性
Optional Chaining 最常用的场景之一是访问对象属性。在 JavaScript 中，对象的属性一般是通过 . 运算符来访问，例如：
--- ------ - - ----- ----- -- --- ---- - ------------
在这个例子中，我们可以使用 Optional Chaining 来获取 person 对象的 name 属性：
--- ------ - - ----- ----- -- --- ---- - -------------
如果 person 为 null 或 undefined，那么 name 的值将是 undefined，否则 name 将是 person 的 name 属性值。
访问对象方法
除了访问对象属性，Optional Chaining 也适用于访问对象方法。在 JavaScript 中，我们可以通过调用对象的方法来执行一些操作，例如：
--- ------ - - ----- ------ ------ ---------- - ------------------ - -- ---------------
我们可以使用 Optional Chaining 来调用 person 对象的 sayHi 方法：
--- ------ - ----- ------------------
在这个例子中，我们使用了两个 Optional Chaining 语法 ?, 一个用于 person 对象，一个用于 sayHi 方法，如果 person 或 sayHi 不存在，都不会抛出任何错误，并直接返回 undefined。
访问数组元素
Optional Chaining 也支持访问数组元素。在 JavaScript 中，数组元素可以通过下标来访问，例如：
--- --- - --- -- --- --- ---- - -------
我们可以使用 Optional Chaining 访问数组中的元素：
--- --- - ----- --- ---- - ---------
在这个例子中，如果 arr 为 null 或 undefined，那么 elem 的值将是 undefined，否则 elem 将是 arr 中的第一个元素。
使用 Optional Chaining 的最佳实践
虽然 Optional Chaining 已经可以显著降低代码维护成本，并且在某些场景下可以帮助我们更好地组织代码，但是在使用 Optional Chaining 时也需要注意某些细节，以避免代码出现意外行为。
只在必要时的属性或方法上使用 Optional Chaining。Optional Chaining 的目的是帮助我们避免代码出错，它并不是一个万灵药。在一些明确存在的属性或方法上使用 Optional Chaining 可能会让你的代码变得混乱和难以理解。
在链式调用中使用 Optional Chaining 时需要格外小心。有时候我们会在链式调用中使用 Optional Chaining，例如：
--- ---- - - -------- - ----- ---------- - -- --- ---- - -----------------------------------
在这个例子中，我们未必需要在 city 属性上使用 Optional Chaining，因为我们已经确保了 user 和 address 属性的存在性。在链式调用中需要格外小心，确保你在正确的位置使用 Optional Chaining。
避免在空数据结构上使用 Optional Chaining。使用 Optional Chaining 前先确保你的数据结构不是空的，否则你的代码将不能正常执行。例如：
--- ---- - ----- --- ---- - --------------------
在这个例子中，user 是 null，访问 address 属性就会抛出错误。在使用 Optional Chaining 前，请先确保你的数据结构有效。
示例代码
下面是一些使用 Optional Chaining 的示例代码。
示例1：访问对象属性
--- ------ - - ----- ------ ---- -- -- --- ---- - ------------- --- ----- - --------------
在本例中，我们可以访问 person 对象的 name 和 email 属性，如果这两个属性中的任何一个不存在，结果将为 undefined。
示例2：访问对象方法
----- ------ -
------- -
------------------
-
-
--- ------ - -----
------------------在本例中，我们使用 Optional Chaining 调用 person 对象的 sayHi 方法，如果 person 为 null 或 undefined，或者 sayHi 不存在，都不会抛出任何错误。
示例3：访问数组元素
--- --- - --- -- --- --- ---- - ---------
在本例中，如果 arr 为 null 或 undefined，那么 elem 的值将是 undefined，否则 elem 将是 arr 中的第一个元素。
结论
Optional Chaining 是一项非常有用的语言特性，它可以帮助我们显著降低代码维护成本，并且良好的规范代码组织能够让你的代码更加易于理解和维护。理解 Optional Chaining 的最佳实践，并在实际项目中正确运用，可以让你的代码更加健壮和高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67147058ad1e889fe213ced8