在 JavaScript 中,常常会使用到或运算符 ||
来进行默认值设置。但是,这种做法会出现一些问题,例如当计算结果为 0
、''
、false
等 falsy 值时,也会返回默认值,这显然是不符合我们的预期的。
ES12 中新增了一个 Nullish Coalescing 操作符 ??
,它可以解决这个问题。
Nullish Coalescing 操作符的作用
Nullish Coalescing 操作符用于取代或运算符,可以提供更加精确的默认值设置。
在使用 Nullish Coalescing 操作符时,只有在变量的值为 null
或 undefined
时才会返回默认值。
例如:
----- ------- - ----- ----- ---------- - ---------- ----- ------ - ------- -- ----------- -------------------- -- ---------
在上面的代码中,someVal
的值为 null
,因此返回了 defaultVal
。
与之前的或运算符相比:
----- ------- - ----- ----- ---------- - ---------- ----- ------ - ------- -- ----------- -------------------- -- ---------
由于 someVal
是一个 falsy 值,因此返回了 defaultVal
,这可能并不是我们想要的结果。
Nullish Coalescing 操作符和 Falsy 值
然而,在处理 falsy 值时,Nullish Coalescing 操作符仍然存在问题。
例如:
----- ------- - --- ----- ---------- - ---------- ----- ------ - ------- -- ----------- -------------------- -- --
在上面的代码中,someVal
是一个空字符串,这是一个 falsy 值,然而由于它不是 null
或 undefined
,因此返回了 someVal
的值,而不是默认值 defaultVal
。
要解决这个问题,我们需要将 Nullish Coalescing 操作符与逻辑非操作符 !
一起使用。
通过在变量前面加上一个逻辑非操作符 !
,可以将所有 falsy 值(包括空字符串、0、false 等)都转换成 null
或 undefined
,从而使 Nullish Coalescing 操作符生效。
例如:
----- ------- - --- ----- ---------- - ---------- ----- ------ - -------- -- ----------- -------------------- -- ---------
在上面的代码中,通过使用逻辑非操作符将 someVal
转换成了 null
,因此返回了默认值 defaultVal
。
总结
通过使用 Nullish Coalescing 操作符,我们可以精确地设置默认值,并且避免了或运算符处理 falsy 值的问题。然而,在处理 falsy 值时,Nullish Coalescing 操作符仍然存在一些问题。通过将 Nullish Coalescing 操作符与逻辑非操作符 !
一起使用,可以解决这个问题。
在编写代码时,我们应该根据具体的场景来选择使用哪种默认值设置方式,以避免出现意想不到的问题。
示例代码:
----- ------- - ----- ----- ---------- - ---------- ----- ------ - ------- -- ----------- -------------------- -- --------- ----- ------------ - --- ----- ----------------- - ----------------- ----- ------------- - ------------- -- ------------------ --------------------------- -- ----------------
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64f416a6f6b2d6eab3d3de71