在 ES11 （ES2020）中，一个新的操作符被引入，它称为可选链操作符 (Optional Chaining Operator)。此操作符使得开发人员可以更轻松地访问 JavaScript 对象的嵌套属性，而无需在访问嵌套属性之前检查每个属性是否存在。
这篇文章将详细讨论可选链操作符，包括如何使用它、其细节及其在 JavaScript 开发中的应用。
可选链操作符简介
可选链操作符是一种访问 JavaScript 对象属性的语法。它以问号作为前缀 ?.，可以让开发人员安全地访问一个对象的嵌套属性。
在访问 JavaScript 对象嵌套属性时，通常需要检查每个属性是否存在。例如，访问对象 person 的 address 属性的 city 子属性：
const city = person && person.address && person.address.city;
这意味着我们需要在每个属性上进行检查以防止出现 TypeError，无法访问 null 或 undefined。使用可选链操作符可以简化上述代码：
const city = person?.address?.city;
上述代码将先检查 person 是否被赋值，然后再检查 person.address 是否被定义，最后再访问 person.address.city。如果其中任何一条链路无法访问，表达式返回 undefined。
可选链操作符的使用
可选链操作符非常适用于访问嵌套对象属性。下面是一个示例。
-- -------------------- ---- -------
----- ---- - -
----- -
----- --------
---- ---
--
------ -
-
--- --
------ ----- ---
-------- -------- ---
--
-
--- --
------ ----- ---
-------- -------- ---
--
--
--
----- --- - --------------- -- --
----- ----- - ----------------------- -- ----- --在上述代码中，我们使用可选链操作符访问了 data 对象的 user.age 和 data.posts[0].title 属性，如果属性不存在，则表达式返回 undefined。
函数调用
可选链操作符还可以用来调用对象上的函数。例如，使用 ?. 调用函数 obj.doSomething()：
const value = obj?.doSomething();
如果对象 obj 存在，并且具有名为 doSomething 的可调用属性，则函数将被调用并返回结果。如果对象 obj 不存在或 doSomething 属性不存在，则表达式将返回 undefined。
链路深度
可选链操作符支持链路深度。可以使用多个 ?. 进行链式调用，每个 ?. 代表对象的一条链路。
例如，访问嵌套属性可以使用多个 ?. 操作符：
const city = person?.address?.city;
如果 person 或 address 或 city 有任何一个属性未定义，则返回 undefined。
可选链操作符的使用指南
在实际项目中，有很多情况下需要访问对象的嵌套属性。使用可选链操作符可以明显减少代码行数。
使用可选链操作符时，请注意以下一些最佳实践：
避免滥用可选链操作符
虽然可选链操作符可以减少代码行数，但滥用会使代码更难以理解。请避免在简单的对象或嵌套深度浅的对象上滥用可选链操作符。
显式地传递参数到函数
当传递值时，可选链操作符不会在哪个参数是 null 或 undefined 的情况下短路函数调用。因此，请确保显式传递参数。例如，以下代码将尝试调用 doSomething 函数，即使参数 obj 是 null：
const result = obj?.doSomething(val);
为避免这种情况，请改为以下方式：
const result = (obj !== null && obj !== undefined) ? obj.doSomething(val) : undefined;
这段代码将在 obj 不为 null 或 undefined 时调用 doSomething，否则返回 undefined。
结论
可选链操作符是 ES11 引入的一个新特性，它是一种非常有用的语法，可让开发人员更轻松地访问嵌套的对象属性。
它简化了代码，并减少了必须进行空值检查的繁琐过程。在使用时，请注意滥用的风险。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671367f8ad1e889fe20c977c