在 JavaScript 开发中,经常会遇到判断一个变量是否为 undefined 或 null 的情况。以前,我们常常使用 || 运算符来解决 undefined 和 null 的问题,但是它还存在一些缺点。为了解决这些问题,ES11 引入了 Nullish Coalescing Operator(空值合并运算符),本文将为大家详细介绍它的用法和指导意义。
问题
在 JavaScript 中,我们经常需要判断一个变量是否为 undefined 或 null,比如:
----- ------ - ----- -- ----------
上面的代码中,如果 value 为 undefined 或 null,变量 result 就会取到默认值 'default',否则就取到 value 的值。这种写法的问题在于,当 value 的值为 falsy 值时,写法会产生问题。
-- ------ ----- ----- ----- ---------------------------------- ----- ----------- - --- ----- ------- - ----------- -- ---------- -- --------- ----- ---------- - ----- ----- ------- - ---------- -- ---------- -- ---------
在第一个例子中,falseyValue 的值为 '',即为 falsy 值,按照 || 运算符的规则它会被转化为 false,导致 result1 取到默认值 'default'。在第二个例子中,falsyValue 的值为 null,同样由于 || 运算符的规则,它也会被转化为 false,所以 result2 也取到了默认值 'default',但实际上我们希望它取到 null。
解决方案
为了解决上述问题,ES11 引入了 Nullish Coalescing Operator(空值合并运算符),它是由两个问号(??)组成的,用于判断一个值是否为 null 或 undefined。
使用方法如下:
----- ------ - ----- -- ----------
上面的代码中,如果 value 的值为 null 或 undefined,表达式就会返回 'default',否则就返回 value 的值。在这里,?? 运算符不会把 falsey 值当作是 null 或 undefined,它只有在这两个值存在时才会生效。
----- ----------- - --- ----- ------- - ----------- -- ---------- -- --
在上面的代码中,falseyValue 虽然为 falsy 值,但是由于它不是 null 或 undefined,因此 ?? 运算符会返回 ''。因此,值为 falsy 的变量也不会被当作 null 或 undefined。
----- ---------- - ----- ----- ------- - ---------- -- ---------- -- ---------
在上面的代码中,falsyValue 的值为 null,所以 ?? 运算符会返回默认值 'default'。因为它是一个真正的 null 或 undefined 值。
总结
Nullish Coalescing Operator(空值合并运算符)是 ES11 新增的一个语法,在判断变量是否为 null 或 undefined 时非常有用。相较于 || 运算符,?? 运算符能够更加严格地判断变量是否为 null 或 undefined。因此,在实际开发中,合理运用 ?? 运算符能够有效地避免空值错误,提高代码质量和开发效率。
示例代码
----- ------ - ----- ----- ------ - ---------- ----- ------ - ------ ----- ------ - -- ----- ------ - --- ----- ------- - ------ -- ---------- -- --------- ----- ------- - ------ -- ---------- -- --------- ----- ------- - ------ -- ---------- -- ----- ----- ------- - ------ -- ---------- -- - ----- ------- - ------ -- ---------- -- --
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65a0c792add4f0e0ff8fe73a