ECMAScript 2020:空值合并和可选链式操作符

阅读时长 4 分钟读完

ECMAScript 2020是当前JavaScript语言规范的最新版本,它引入了一些非常有用的新功能。在这篇文章中,我们将介绍两个新操作符:空值合并和可选链式。

空值合并操作符

空值合并操作符(??)用于处理空值(null或undefined)的情况,它可以在变量值为null或undefined时,提供一个默认值。这在处理表单数据和API响应等类型的数据时非常有用。

例如,我们可以使用??操作符设置默认值:

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

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

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

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

在上面的代码中,我们可以看到??操作符将undefinednull视为同样的空值。如果左边的变量为null或undefined,则返回右边的默认值,否则返回左边的变量值。

我们还可以将多个??操作符连用,来设置更多的默认值。例如:

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

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

在上面的代码中,当user对象属性值为undefinednull时,操作符会返回给定的默认值,以保证程序不出错。

这个新操作符使得我们可以在代码中更加严谨地处理变量值为空的情况,提高了程序的健壮性。

可选链式操作符

可选链式(?)操作符可以方便地处理嵌套对象属性的读取和函数调用。在传统的JavaScript中,如果要访问一个嵌套对象属性的值,必须一步步进行属性值的判断,比较繁琐:

而使用可选链式操作符,则可以更加简便地处理这种情况:

当属性值存在时,可选链式操作符会返回该属性值,否则会返回undefined

此外,可选链式操作符还可以用于调用嵌套函数:

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

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

在上面的代码中,getAddress()函数返回一个包含citystreet属性的对象,我们可以使用可选链式操作符来获取这些属性值。

当调用的函数不存在时,可选链式操作符会返回undefined而不会抛出错误:

上面的代码中,我们并没有为person对象定义getEmail函数,因此当我们尝试调用该函数时,可选链式操作符会返回undefined而不会抛出错误。

总结

空值合并和可选链式操作符是ES2020新引入的两个非常实用的操作符,可以帮助我们更加严谨和高效地处理变量为空的情况以及访问嵌套属性和函数。它们的出现将提高JavaScript代码的可读性和易用性。

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

纠错
反馈