使用 ES11 的 nullish 合并运算符有效判空

阅读时长 3 分钟读完

在前端开发中,经常需要判断变量是否为 null 或者 undefined。在 ES6 中,我们可以使用默认参数值和逻辑或运算符来实现简单的判空。但是这种方式存在一些缺陷,比如当变量的值为 0 或者空字符串时,也会被判断为空。在 ES11 中,引入了 nullish 合并运算符,可以有效地解决这个问题。

nullish 合并运算符

nullish 合并运算符(??)是一个新的二元运算符,它可以判断左侧的操作数是否为 null 或者 undefined,如果是,则返回右侧的操作数,否则返回左侧的操作数。这个运算符的行为类似于逻辑或运算符,但是它只会在左侧的操作数为 null 或者 undefined 时才会返回右侧的操作数。

下面是一个简单的示例:

在上面的代码中,第一个例子中,foo 的值为 null,所以使用 nullish 合并运算符返回了默认值 'default'。而在第二个例子中,bar 的值为 'bar',所以不会使用默认值。

nullish 合并运算符的优势

使用 nullish 合并运算符有以下几个优势:

  1. 精确判断空值:nullish 合并运算符只会在左侧的操作数为 null 或者 undefined 时才会返回右侧的操作数,而不会像逻辑或运算符一样将其他 falsy 值也视为空值。

  2. 更加简洁:使用 nullish 合并运算符可以将判空的逻辑写得更加简洁,不需要使用繁琐的 if 判断语句。

  3. 更加高效:使用 nullish 合并运算符可以避免不必要的计算,提高代码的执行效率。

示例代码

下面是一个示例代码,演示了如何使用 nullish 合并运算符判断变量是否为空:

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

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

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

在上面的代码中,我们定义了一个函数 printUserInfo,接收一个包含用户信息的对象作为参数。在函数内部,我们使用 nullish 合并运算符来判断每个属性是否为空,并给出默认值。这样可以保证在输出用户信息时,不会出现 undefined 或者 null 的情况。

总结

nullish 合并运算符是 ES11 中新增的一个运算符,它可以精确判断变量是否为空,并且使用起来更加简洁和高效。在实际开发中,我们可以使用 nullish 合并运算符来优化判空逻辑,提高代码的可读性和执行效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6556cc2fd2f5e1655d12a0e7

纠错
反馈