在 Web 开发中,我们常常需要处理对象和数组的深层次嵌套结构。当我们想要获取一个深层次的属性或者从数组中获取一个元素时,我们通常需要使用大量的 if 判断和 null 检查来避免出现运行时错误。为了简化这一过程,JavaScript 在 ES2020 中引入了新的运算符 Optional Chaining 和 Nullish Coalescing。
在本文中,我们将学习如何使用 ES2021 的 Optional Chaining 和 Nullish Coalescing 运算符,并将介绍它们的用法、优点以及示例代码。
Optional Chaining 运算符
Optional Chaining 运算符(?.)是一种简化模板,用于访问深层次的对象属性而不必担心中间的属性是否存在。在访问一个对象的属性时,我们通常如下操作:
if (obj && obj.prop && obj.prop.someValue) { // do something }
使用 Optional Chaining 运算符,我们可以这样写:
if (obj?.prop?.someValue) { // do something }
这样,如果 obj 或者 obj.prop 不存在,运算符将返回 undefined,代码可以顺利运行而不会抛出异常。
Option Chaining 运算符还能够使用在函数调用链式调用中。例如,如果我们想要调用这样一个函数:const value = obj.getValue().getSubValue().getFinalValue();
,如果对象中有某个方法不存在,就会抛出错误。为了避免这种情况,我们可以使用 Optional Chaining 运算符,如下所示:
const value = obj?.getValue()?.getSubValue()?.getFinalValue();
如果某个函数不存在,运算符将返回 undefined,而不会抛出错误。
Nullish Coalescing 运算符
Nullish Coalescing 运算符(??)是一种替代短路运算符 || 的新型运算符。当使用短路运算符时,如果左边的值为 falsy 值(例如 null、undefined、0、'' 等),则会返回右边的值。
const val1 = null || 'default'; // 'default' const val2 = undefined || 'default'; // 'default' const val3 = '' || 'default'; // 'default' const val4 = 0 || 'default'; // 'default'
使用 Nullish Coalescing 运算符,我们可以使用 ?? 代替 ||,仅在左侧值为 null 或 undefined 时返回默认值,如下所示:
const val1 = null ?? 'default'; // 'default' const val2 = undefined ?? 'default'; // 'default' const val3 = '' ?? 'default'; // '' const val4 = 0 ?? 'default'; // 0
这样,我们可以用更加严格的方式设置参数的默认值。
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