随着前端开发的不断发展，JavaScript 语言的版本也得到了不断的更新，新的语法功能不仅让前端开发更加简单，而且也提高了代码的可读性、可维护性和可扩展性。最新的 ES11 版本中，增加了一种新的操作符：可选链操作符。本文将介绍可选链操作符，让读者了解如何更好地使用 ES11 版本，简化代码，并提高开发效率。
什么是可选链操作符？
可选链操作符（Optional Chaining Operator）是 ES11 中新增的一个操作符，用于简化 JavaScript 对象属性的访问。让我们来看一个例子：
--- ---- - -
----- -------
----- -
---- ---
------ ------------------
-
-
--- --- - ---- -- --------- -- --------------
----------------- ----在上面的代码中，我们希望获取“user”对象中“age”属性的值。由于“user.info”可能不存在（或为undefined），我们必须检查此属性是否存在。这通常需要使用嵌套的if语句或逻辑运算符，从而使代码显得冗长：
--- ----
-- ----- -- --------- -- -------------- -
--- - --------------
-
----------------- ----为了简化这种处理，ES11 提供了可选链操作符（?.）：
--- --- - ---------------- ----------------- ----
这条代码与第一种方法的结果相同，但是更短且更清晰。
可选链操作符的使用
可选链操作符使得访问深层嵌套对象时变得更加简单。它的语法结构如下：
--------- -- -----------------------------------------
在使用可选链操作符时，可以在对象的任何级别中使用它。如果访问的属性不存在，则结果将是undefined，否则将返回属性的值。
处理空值
使用可选链操作符是，在访问对象属性时，如果对象为空或者属性不存在，会返回一个undefined值。这一点很有用，可以减少代码的复杂度，避免出现不必要的错误，如下所示：
--- ---- - ----- --- --- - ---------------- ----------------- -----------
这里的'user'对象为null，如果我们在代码中不检查它并尝试获取它下面的属性，我们将会得到一个TypeError。但是，用可选链操作符时，我们不必再使用if语句或逻辑运算符来检查对象是否为空或属性是否存在。
处理函数调用
使用可选链操作符时，还可以直接访问对象方法，如下所示：
--- ---- - -
--------- ---------- -
----------------- --------
-
-
-----------------此时，如果'user'对象为空或其中的'fullName'函数不存在，'user?.fullName()'就会返回undefined。
处理数组
可选链操作符也可以用于数组中，如下所示：
--- ---- - --- -- --- --- ----- - ---------- ------------------- ---
在上述代码中，我们使用可选链来获取数组中的索引1的元素。如果list为null或undefined，那么值将为undefined。
结论
ES11 中的可选链操作符是一项强大的语法功能，可以帮助我们简化代码并提高开发效率。它可以让我们快速、安全地访问深层对象属性，处理函数调用和数组元素，避免代码中的不必要的复杂度和重复逻辑。所以，在编写现代 JavaScript 应用程序时，应该尽可能地使用可选链操作符，以便我们能够更加专注于项目逻辑本身，从而更好地完成开发工作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f7cf00c5c563ced5ac004d