精通 ES11 中的 nullish coalescing 操作符

阅读时长 4 分钟读完

在 JavaScript 中,我们通常使用 || 操作符来给变量赋默认值。但是,如果变量的值是 falsy 值(如 false、0、""、null、undefined),那么 || 操作符就会返回错误的默认值。为了解决这个问题,ES11 引入了 nullish coalescing 操作符(??)。

什么是 nullish coalescing 操作符?

nullish coalescing 操作符是一种用于为变量赋默认值的操作符。它只在变量的值为 null 或 undefined 时才返回默认值,否则返回变量的实际值。

下面是一个使用 nullish coalescing 操作符的例子:

在上面的例子中,foo 的值为 null,因此返回了默认值。而 bar 的值为 "hello",因此返回了变量的实际值。

与 || 操作符的区别

为了更好地理解 nullish coalescing 操作符,让我们来看一下它与 || 操作符的区别。

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

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

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

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

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

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

在上面的例子中,我们使用 || 操作符为变量赋默认值。但是,如果变量的值为 falsy 值,|| 操作符会返回错误的默认值。例如,0、""、null、undefined、NaN 和 false 都是 falsy 值,因此它们会返回错误的默认值。

相比之下,nullish coalescing 操作符只有在变量的值为 null 或 undefined 时才返回默认值。这意味着它可以安全地用于为变量赋默认值。

如何使用 nullish coalescing 操作符

使用 nullish coalescing 操作符非常简单。只需在变量名后面加上 ??,然后紧跟默认值即可。

下面是一个使用 nullish coalescing 操作符的例子:

在上面的例子中,我们使用 nullish coalescing 操作符为变量赋默认值。如果变量的值为 null 或 undefined,就返回默认值。否则,返回变量的实际值。

总结

nullish coalescing 操作符是一种用于为变量赋默认值的操作符。它只在变量的值为 null 或 undefined 时才返回默认值,否则返回变量的实际值。相比之下,|| 操作符会在变量的值为 falsy 值时返回错误的默认值。因此,使用 nullish coalescing 操作符可以更安全地为变量赋默认值。

在编写 JavaScript 代码时,我们经常需要为变量赋默认值。nullish coalescing 操作符是一个非常实用的工具,可以让我们更轻松地实现这一目标。希望本文能够帮助你更好地理解和使用 nullish coalescing 操作符。

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

纠错
反馈