在 ES10 中正确使用 nullish coalescing 运算符
在前端开发中,我们经常需要处理变量为空或未定义的情况,为了避免出现 TypeError,我们通常使用逻辑或运算符 ||
进行默认值的设置:
--- ---- - --- --- ----------- - ---------- --- ----------- - ---- -- ------------ -- - ---- ------ ----------- ------------------------- -- ---------
在大多数情况下,这种方式是可靠的。然而,如果 name
取值为 0 或者 false
等“假值”,就会出现问题。基于这个问题,ES10 中加入了 nullish coalescing 运算符 ??
,它的作用是取两个操作数中非 nullish 类型(null
或 undefined
)的值。和逻辑或有些相似,但 ??
只有左侧操作数为 nullish 时才会返回右侧操作数。
下面是使用 nullish coalescing 运算符的例子:
--- ------- --- --------- - ---- ------------------ -- ----------- -- ---
在上例中,因为 height
未定义,所以返回默认值 minHeight
。需要注意的是,如果 height
取值为 0 或 ''
,它们不属于 nullish 类型,仍然将从左侧取值。
除了提供了更加严谨的判断方式,nullish coalescing 运算符还可以让我们更方便地处理函数的默认参数。以之前的逻辑或为例,定义默认参数时需要对每个值都进行判空操作:
-------- ----------- - ---- - ---- -- -------- --------------------- ----------- - -------- -- -------- ------ --------------- -- -------- ------ ------------ -- -------- ------
这种方式的问题在于,如果 user
取值为 0 或者空字符串,将会被忽略。为了达到我们预期的默认值效果,我们需要更加严谨的判断:
-------- ----------- - ---- - ---- --- --------- - ------- - ----- --------------------- ----------- - -------- -- -------- ------ --------------- -- -------- ------ ------------ -- -------- ----- --------- -- -------- --
使用 nullish coalescing 运算符,我们可以更加方便地实现相同的功能:
-------- ---------- - -------- - --------------------- ----------- - -------- -- -------- ------ --------------- -- -------- ------ ------------ -- -------- ----- --------- -- -------- --
需要注意的是,nullish coalescing 运算符的优先级低于其他运算符。在使用时,最好加上括号,以便代码的清晰与易读。
总结:
nullish coalescing 运算符是 ES10 中的新特性,它可以更加方便、严谨地处理变量为空或未定义的情况。在使用时需要注意非 nullish 值的处理方式,以及运算符的优先级问题。对于函数默认参数的设置,建议使用 nullish coalescing 运算符进行简洁易读的设置。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65309bf17d4982a6eb22aa85