ECMAScript 2021 (ES12) 中的 Nullish Coalescing 运算符及其使用场景

在 ECMAScript 2021 中,新增了一个 Nullish Coalescing 运算符,即 ??。这个运算符主要用来判断一个值是否为 null 或 undefined,如果是的话,就使用另一个给定的默认值代替它。

Nullish Coalescing 运算符的使用

下面是一个简单的例子,展示了如何使用 Nullish Coalescing 运算符:

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

在上述代码中,foo 的值为 null,因此使用了 "hello world" 作为默认值。

如果去掉 Nullish Coalescing 运算符,可以得到以下代码:

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

在上面的代码中,使用了逻辑或运算符 ||,这样的话,如果 foo 的值为 falsy,就会使用右侧的默认值。但是,由于空字符串、0false 等值在逻辑运算时会被当作 falsy 值,因此无法区分 nullundefined

Nullish Coalescing 运算符准确地区分了 null 或 undefined 和其他 falsy 值,因此可以更精确地判断变量的值。

Nullish Coalescing 运算符与逻辑或运算符的区别

虽然 Nullish Coalescing 运算符看起来很像逻辑或运算符,但是它们有一个很重要的区别。当使用逻辑或运算符时,只要左侧运算结果为 falsy,就会返回右侧的默认值。但是使用 Nullish Coalescing 运算符时,只有当左侧运算结果为 null 或 undefined 时,才会返回右侧的默认值。

下面是一个例子,用来展示区别:

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

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

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

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

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

在上述代码中,变量 ab 的值分别为 undefinednull,变量 c 的值为 0。使用逻辑或运算符时,foobar 都返回默认值 "hello world",因为它们的值为 falsy。而使用 Nullish Coalescing 运算符时,只有 bazNullish 返回变量 c 的值 0,其他变量均返回默认值 "hello world"

Nullish Coalescing 运算符的使用场景

Nullish Coalescing 运算符常常用于判断变量值是否为 null 或 undefined,从而决定是否使用默认值。

例如,当使用 API 请求获取数据时,可能会得到一个空值。使用 Nullish Coalescing 运算符时,就可以使用一个默认值替代空值,从而避免出现 bug:

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

在上述代码中,如果 fetchData() 返回 null 或 undefined,就会使用默认值 { message: "请求出错,请稍后再试。" }

另一个使用场景是在不使用默认值的情况下,获得正确的结果。例如:

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

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

在上述代码中,使用 Nullish Coalescing 运算符时,返回了变量 x 的值 "",因为它不是 null 或 undefined。

结论

Nullish Coalescing 运算符可以帮助开发者更精确地判断变量值是否为 null 或 undefined,并使用默认值代替空值。它比逻辑或运算符更加准确,避免了空字符串、0false 等值被当作 falsy 值的问题。在 API 请求、函数返回值等场景下,Nullish Coalescing 运算符可以帮助我们避免出现 bug,提高代码质量。

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