ECMAScript 2020，也称为 ES11，是 JavaScript 语言的最新版本之一。它引入了许多新特性和改进，其中之一就是可选链操作符（Optional Chaining Operator）。本文将为您介绍该特性和它在实际开发中的应用。
可选链操作符
在 ES11 中，可选链操作符 ?.（问号点）是新增的运算符之一。它可以用于简化访问 JavaScript 对象的成员，同时还能避免在访问不存在的属性或方法时报错。假设我们有以下对象：
----- ---- - -
----- ------
-------- -
------- ---- ---- ----
-
--我们可以使用点符号来访问该对象中的属性和方法：
----- -------- - ---------- ----- ---------- - --------------------
但是，如果嵌套的属性不存在，则会导致一个错误：
----- ------- - ----------------- -- ---------- ------ ---- -------- ----- -- ---------
这时可选链操作符就可以派上用场了。使用可选链操作符，我们可以通过?.简化访问属性和方法的方式，并且当链中一个对象为空或 undefined 时，表达式将会直接返回 undefined（而不是出现 TypeError）：
----- ------- - ------------------ -- ------- -- ---------
我们甚至还可以使用可选链操作符调用函数：
-------------------
这段代码不会出现错误，因为如果说 sayHello() 不存在，可选链操作符会直接返回 undefined。
可选链操作符的应用
可选链操作符可以改善不同的开发场景，下面将为您介绍几个实现示例。
检查对象的深层级属性
使用可选链操作符可以在对象中深层级地查找属性而不担心代码崩溃。例如，我们可以利用它来避免在查找 API 响应中可能不存在的属性时出现错误：
----- ---- - ------------------------ -- ------ - -- -- --------- ---- ---- - ---- - -- ------ ------- ---- -
安全地操作对象属性和方法
在应用程序中，有时对象不可用或未定义是经常发生的情况，那么可选链操作符是确保在操作对象之前进行 null 检查的最佳实践。例如，以下代码段将安全地获取在一起并显示数量：
----- ------------ - ------------------------- ----- -- - ------ --- - ----------- -- --- ------------------ --- --------------- ----- -- --- -------
如果 cart 或 cart.items 不存在，可选链操作符将直接返回 undefined。
简化嵌套的条件语句
有时候，我们可能需要编写一些复杂的条件语句来避免访问对象属性的错误。使用可选链操作符，我们可以将这些语句合并成更简洁的代码：
-- ----- -- ---------------- -- ----------------------- - -- -- --------- - -- ------------------------- - -- -- --------- -
第一行代码检查了 user、user.permissions 和 user.permissions.admin 三个对象的属性。而第二行代码利用可选链操作符，确保属性在进行操作之前都已经存在。结构更简洁，代码更容易维护。
说明
可选链操作符是操作 JavaScript 对象时的一项有用的特性。它不仅提供了访问深层次嵌套属性的一种更简单方法，还可以帮助我们避免在访问 undefined 或 null 属性时出现错误。在开发中，通过使用可选链操作符，我们可以更容易地编写健壮和可靠的代码。
结论
访问可能不存在的属性和方法时，可选链操作符是一种可靠的保护机制。尝试使用可选链操作符简化您的代码，并让它更易读和维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671769e1ad1e889fe2216406