ECMAScript 2020 中的可选链式调用使用示例
在 JavaScript 中，有时候我们需要从一个嵌套的对象或者数组中获取数据，但是如果其中的某一个属性或者索引值是 null 或者 undefined，那么就会抛出错误导致代码终止。ECMAScript 2020 引入了可选链式调用的特性，可以轻松地解决这个问题。本文将介绍可选链式调用的使用以及相应的示例代码。
一、什么是可选链式调用？
可选链式调用（Optional Chaining）是由 ?. 这个操作符来表示的。它允许我们访问可能不存在的属性或索引值，而不用担心它们不存在时会抛出错误。
除了 ?. 这个操作符之外，ES2020 还引入了另外一个操作符 ??，表示空值合并操作符。如果 ?. 操作符的左侧的值为 null 或 undefined，那么整个表达式的值就会被计算为 undefined。使用 ?? 操作符可以为这种情况设置默认值。
二、示例代码
假设我们有一个嵌套的对象，它的结构如下：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
-------- -
--------- -----------
----- -
--------- ---------
--
--
--如果我们要获取 user 对象的 district 属性，那么传统的写法是这样的：
const district = user.address.city.district;
但是如果 city 属性不存在，那么就会抛出错误导致代码终止。为了避免这种情况的发生，我们可以使用可选链式调用：
const district = user?.address?.city?.district;
这样无论 address 或者 city 属性是否存在，都不会抛出错误。
如果我们想为 district 设置默认值，可以使用空值合并操作符：
const district = user?.address?.city?.district ?? 'Default District';
如果 district 不存在或者值为 null 或 undefined，就会返回 'Default District'。
三、指导意义
可选链式调用是一个非常实用的特性，可以减少错误并提高代码的可读性。但是在使用它的时候需要注意以下几点：
对于不确定某个属性是否存在的情况，应该优先使用可选链式调用。
可选链式调用只能检查属性或索引值是否为 null 或 undefined，如果它们的值是 false、0、'' 或者 NaN，仍然会抛出错误。在这种情况下，可以使用 || 操作符来设置默认值。
可选链式调用不仅仅适用于对象，还适用于数组。例如：
const arr = [1, 2, undefined, 4]; const value = arr?.[2] ?? 'Default Value';
四、总结
本文介绍了 ECMAScript 2020 中的可选链式调用特性的使用以及相应的示例代码。通过学习这个特性，我们可以更加优雅地处理对象或数组中可能不存在的属性或索引值，避免代码抛出错误并提高代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499662f48841e989466cba9