使用 ES2021 串联 Optional Chaining 和 Nullish Coalescing 运算符

阅读时长 4 分钟读完

在 Web 开发中,我们常常需要处理对象和数组的深层次嵌套结构。当我们想要获取一个深层次的属性或者从数组中获取一个元素时,我们通常需要使用大量的 if 判断和 null 检查来避免出现运行时错误。为了简化这一过程,JavaScript 在 ES2020 中引入了新的运算符 Optional Chaining 和 Nullish Coalescing。

在本文中,我们将学习如何使用 ES2021 的 Optional Chaining 和 Nullish Coalescing 运算符,并将介绍它们的用法、优点以及示例代码。

Optional Chaining 运算符

Optional Chaining 运算符(?.)是一种简化模板,用于访问深层次的对象属性而不必担心中间的属性是否存在。在访问一个对象的属性时,我们通常如下操作:

使用 Optional Chaining 运算符,我们可以这样写:

这样,如果 obj 或者 obj.prop 不存在,运算符将返回 undefined,代码可以顺利运行而不会抛出异常。

Option Chaining 运算符还能够使用在函数调用链式调用中。例如,如果我们想要调用这样一个函数:const value = obj.getValue().getSubValue().getFinalValue();,如果对象中有某个方法不存在,就会抛出错误。为了避免这种情况,我们可以使用 Optional Chaining 运算符,如下所示:

如果某个函数不存在,运算符将返回 undefined,而不会抛出错误。

Nullish Coalescing 运算符

Nullish Coalescing 运算符(??)是一种替代短路运算符 || 的新型运算符。当使用短路运算符时,如果左边的值为 falsy 值(例如 null、undefined、0、'' 等),则会返回右边的值。

使用 Nullish Coalescing 运算符,我们可以使用 ?? 代替 ||,仅在左侧值为 null 或 undefined 时返回默认值,如下所示:

这样,我们可以用更加严格的方式设置参数的默认值。

Optional Chaining 和 Nullish Coalescing 运算符的组合使用

我们可以结合使用 Optional Chaining 和 Nullish Coalescing 运算符,在获取属性的同时提供默认值。例如:

-- -------------------- ---- -------
----- --- - -
  ------ -
    ------ --
  --
  ------ -----
--

----- ---- - ---------------- -- ---------- -- --
----- ---- - ---------------- -- ---------- -- ---------

在 val1 中,我们可以成功获取 obj.prop1.value 的值。在 val2 中,obj.prop2 不存在或为 null,所以返回了默认值 'default'。

总结

在 Web 开发中,处理对象和数组的深层次嵌套结构是一件很重要、很常见的事情。使用 ES2021 的 Optional Chaining 和 Nullish Coalescing 运算符,可以使用更加简洁明了的代码来实现这一目的。在编写代码时,我们可以尝试使用这些运算符来简化代码,避免繁琐的 if 判断和 null 检查。代码简单、可读性高、安全性更高。

希望本文能够详尽地介绍了 Optional Chaining 和 Nullish Coalescing 运算符的用法和优点,并给读者带来一些指导意义。如果你有任何疑问或者建议,请在评论区留言,我们将尽快回复。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64983c3748841e989454bcc2

纠错
反馈