在 ECMAScript 2021 中,新增了一个 Nullish Coalescing 运算符,即 ??
。这个运算符主要用来判断一个值是否为 null 或 undefined,如果是的话,就使用另一个给定的默认值代替它。
Nullish Coalescing 运算符的使用
下面是一个简单的例子,展示了如何使用 Nullish Coalescing 运算符:
----- --- - ---- -- ------ ------- ----------------- -- ------ ------
在上述代码中,foo
的值为 null
,因此使用了 "hello world"
作为默认值。
如果去掉 Nullish Coalescing 运算符,可以得到以下代码:
----- --- - ---- -- ------ ------- ----------------- -- ------ ------
在上面的代码中,使用了逻辑或运算符 ||
,这样的话,如果 foo
的值为 falsy,就会使用右侧的默认值。但是,由于空字符串、0
、false
等值在逻辑运算时会被当作 falsy 值,因此无法区分 null
和 undefined
。
Nullish Coalescing 运算符准确地区分了 null 或 undefined 和其他 falsy 值,因此可以更精确地判断变量的值。
Nullish Coalescing 运算符与逻辑或运算符的区别
虽然 Nullish Coalescing 运算符看起来很像逻辑或运算符,但是它们有一个很重要的区别。当使用逻辑或运算符时,只要左侧运算结果为 falsy,就会返回右侧的默认值。但是使用 Nullish Coalescing 运算符时,只有当左侧运算结果为 null 或 undefined 时,才会返回右侧的默认值。
下面是一个例子,用来展示区别:
----- - - ---------- ----- - - ----- ----- - - -- ----- --- - - -- ------ ------- ----- --- - - -- ------ ------- ----- --- - - -- ------ ------- ----- ---------- - - -- ------ ------- ----- ---------- - - -- ------ ------- ----- ---------- - - -- ------ ------- ----------------- -- ------ ------ ----------------- -- ------ ------ ----------------- -- ------ ------ ------------------------ -- ------ ------ ------------------------ -- ------ ------ ------------------------ -- -
在上述代码中,变量 a
和 b
的值分别为 undefined
和 null
,变量 c
的值为 0
。使用逻辑或运算符时,foo
和 bar
都返回默认值 "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,并使用默认值代替空值。它比逻辑或运算符更加准确,避免了空字符串、0
、false
等值被当作 falsy 值的问题。在 API 请求、函数返回值等场景下,Nullish Coalescing 运算符可以帮助我们避免出现 bug,提高代码质量。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6719becd3af17e55073249e4