ES2020 中的链判断运算符与 Nullish Coalescing 运算符探究

在前端开发中,我们常常需要处理各种数据。有时候我们需要访问一个深层次的对象或数组的某个属性或元素,但是却不确定这个对象或数组是否存在。在 ES2020 中,加入了链判断运算符(Optional Chaining Operator)和 Nullish Coalescing 运算符(空合并运算符),它们为我们简化了许多代码,提高了开发效率。

链判断运算符

在 ES2020 之前,如果我们需要获取一个深层次的对象或数组的某个属性或元素时,我们通常需要进行一系列的判断,如下所示:

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

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

这样的代码很容易出现嵌套,代码量也较大,而且一旦对象结构发生变化,代码也需要跟着修改。

在 ES2020 中,我们可以使用链判断运算符(?.),它可以简化上述代码的写法。链判断运算符可以在对象属性或数组元素为 null 或 undefined 时,立即停止表达式求值,返回 undefined,而不会导致 TypeError 错误。

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

这样的代码看起来简洁很多,而且不需要进行条件判断,代码也更容易维护,但是在使用链判断运算符的时候,需要注意以下几点:

  1. 一定要在对象或数组上使用,而不能在变量或函数调用上使用。

  2. 这个运算符不会捕捉任何明确抛出的异常。

  3. 这个运算符不会访问 undefined 属性或方法的原型链上的任何东西。

  4. 这个运算符的最后一项不能是函数或调用。如果是,请使用常规的函数调用语法。

Nullish Coalescing 运算符

在实际应用中,我们经常需要判断一个值是否为 null 或 undefined,并在其为 null 或 undefined 时设置一个默认值。在 ES2020 中,我们可以使用 Nullish Coalescing 运算符(??)来取代以前的逻辑运算符 ||。

以往我们可以使用以下方式来实现上述功能:

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

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

而现在,我们可以使用 Nullish Coalescing 运算符(??)来简化上述代码:

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

这样的代码看起来更加直观明了,并且不需要进行条件判断。

需要注意以下几点:

  1. ?? 运算符仅在值为 null 或 undefined 时返回默认值,否则返回该值。

  2. ?? 运算符不会将 0、空字符串和 false 视为 null 或 undefined

  3. ?? 运算符不会将任何字符串转换为布尔值 false。即使一个空字符串也不会。

示例

下面是一个综合应用链判断运算符和 Nullish Coalescing 运算符的示例代码:

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

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

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

结论

在 ES2020 中,链判断运算符和 Nullish Coalescing 运算符为我们提供了更加简洁明了的代码编写方式。它们让我们能够更加专注于解决业务问题,而不是被冗长的代码所困扰。但是在使用它们时,我们需要了解并熟悉它们的特性和限制,更好地利用它们来优化代码。

值得一提的是,链判断运算符和 Nullish Coalescing 运算符并不是语言本身的必要部分,许多浏览器可能不支持它们。因此,在实际开发中,需要注意是否需要进行相关兼容性问题的处理。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/670b76bfd91dce0dc88ac468