在 JavaScript 中,对于未定义、 null 和空字符串等空值所涉及到的处理,一度令开发者头疼不已。为了解决这个问题,ES12 中引入了空值合并运算符,可以方便地处理这些空值。
什么是空值合并运算符?
空值合并运算符(nullish coalescing operator)是 ES12 中新增的一种运算符,用于简化处理空值的场景。其表示为 ??
。它的作用是如果该运算符左侧的操作数是 null 或 undefined,则返回右侧操作数,否则返回该运算符左侧操作数。
空值合并运算符的使用
下面我们来看一下它的使用示例:
----- - - --------- -- ---------- --------------- -- --------- ----- - - ---- -- ---------- --------------- -- --------- ----- - - ----- -- ---------- --------------- -- ----- ----- - - -- -- ---------- --------------- -- --
在第一个示例中,由于 x
的左侧是 undefined,所以最终的结果为右侧字符串 'default'。而在第二个示例中,由于 y
的左侧是 null,同样返回右侧的 'default' 。对于布尔值和空字符串,它们不属于空值,因此 z
和 m
都返回自身的值,即 false 和 ''。
空值合并运算符与逻辑或运算的区别
ES6 中的逻辑或运算符(||
)也可以实现类似的功能,实际上二者的效果很相似。例如:
----- - - --------- -- ---------- --------------- -- --------- ----- - - ---- -- ---------- --------------- -- --------- ----- - - ----- -- ---------- --------------- -- --------- ----- - - -- -- ---------- --------------- -- ---------
在本例中,由于 undefined
、 null
、 false
和空字符串都是假值(falsy),所以逻辑或运算符都会返回其右侧的默认值 'default'。然而,在某些情况下二者的表现是不同的。例如:
----- - - -- ----- - - ----- ----- - - --- ----- - - - -- - -- -- --------------- -- -- ----- - - - -- - -- -- --------------- -- -
在这个例子中,变量 a
的值为 0,因为 0 也是假值,所以逻辑或运算符会继续往后检查下一个变量,也就是 b
。由于 b
的值是 null,因此逻辑或运算符会返回空字符串。而空值合并运算符则会返回左侧变量 a
的值,即 0。
小结
通过对 ES12 中空值合并运算符的讲解,我们可以得出以下结论:
- 空值合并运算符的作用是返回左侧操作数,如果该操作数是 null 或 undefined,则返回右侧操作数。
- 空值合并运算符的使用可以简化处理空值的场景。
- 在进行多个值判断的情况下,空值合并运算符的表现和逻辑或运算符有所不同。
最后,我们再来说一下空值合并运算符的使用建议。由于小心谨慎永远是最明智的策略,我们在使用空值合并运算符时,一定要注意审查代码逻辑,确保使用正确。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/670920aad91dce0dc876ab58