ES11 中的 nullish 合并运算符

在 JavaScript 中,我们经常会使用 || 运算符来对变量进行默认值的设置。例如:

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

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

在上面的例子中,如果 name 的值为 falsy(比如空字符串、0、false 等),那么 name || 'world' 表达式的结果就是 'world',从而为 name 设置了默认值。

然而,在这种情况下,如果 name 的值为 nullundefined,那么默认值 'world' 会被使用,这可能并不是我们想要的行为。

ES11 中引入了一种新的运算符,叫做 nullish 合并运算符 ??,它可以将空值 null 和未定义值 undefined 区分开来。

使用 nullish 合并运算符

nullish 合并运算符的语法很简单,就是 ??,它的作用是如果左侧的值为 null 或 undefined,则使用右侧的值作为默认值。例如:

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

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

在上面的例子中,我们使用了 nullish 合并运算符将 nullundefined 区分开来。当 name 的值为 nullundefined 时,使用 ?? 运算符将其替换为 'world',从而得到了正确的默认值。

nullish 合并运算符与 || 运算符的区别

使用 nullish 合并运算符可以避免使用 || 运算符时的一些问题。例如,当值为 0 或空字符串 '' 时,|| 运算符会将其视为 falsy,从而使用默认值。而使用 nullish 合并运算符时,只有当值为 nullundefined 时才会使用默认值。

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

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

总结

nullish 合并运算符是 ES11 中的新特性,它可以将空值 null 和未定义值 undefined 区分开来,避免了使用 || 运算符时的一些问题。在编写 JavaScript 代码时,建议使用 nullish 合并运算符来设置默认值,以避免不必要的错误。

示例代码

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

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

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

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

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