在过去，为了判断一个变量是否为空或 undefined，我们通常会使用 || 运算符来进行判断。然而，在某些情况下，这种方法会带来难以预料的结果。
ES11 中新增了一个空值合并 Nullish Coalescing 运算符 ??，它可以更好地处理空值和默认值。本文将详细介绍这个新的运算符，并提供示例代码和学习指导。
?? 运算符是什么？
?? 运算符是一种新的逻辑运算符，用于检查一个值是否为 null 或者 undefined。如果该值为 null 或 undefined，则返回默认值，否则返回该值本身。该运算符不会将 0 或者空字符串视为 null 或 undefined。
示例代码：
-- -------------------- ---- ------- ----- --- - ---- -- -------- ------- ----------------- -- -------- ------ ----- --- - -------- ------ -- -------- ------- ----------------- -- -------- ------ ----- --- - -- -- -------- ------- ----------------- -- -- ----- --- - - -- -------- ------- ----------------- -- -展开代码
从上面的示例中可以看出，当变量值为 null 或 undefined 时，如果使用 ?? 运算符，则会返回默认值。否则，返回变量值本身。
与 || 运算符的比较
在过去，我们通常使用 || 运算符来实现类似的功能。但是，当变量为 0 或空字符串时，使用该运算符会带来问题。
示例代码：
-- -------------------- ---- ------- ----- --- - ---- -- -------- ------- ----------------- -- -------- ------ ----- --- - -------- ------ -- -------- ------- ----------------- -- -------- ------ ----- --- - -- -- -------- ------- ----------------- -- -------- ------ ----- --- - - -- -------- ------- ----------------- -- -------- ------展开代码
从上面的示例中可以看出，当变量值为 0 或空字符串时，使用 || 运算符会返回默认值，而不是变量本身。
如何使用 ?? 运算符
在实际开发中，可以将 ?? 运算符用于检查函数参数是否为空或 undefined，以及设置默认值。
示例代码：
function greet(name) { const userName = name ?? 'anonymous'; console.log(`Hello, ${userName}!`); } greet(); // 'Hello, anonymous!' greet('Peter'); // 'Hello, Peter!'
在上面的示例中，我们使用 ?? 运算符来检查函数参数是否为空或 undefined。如果是，则将其替换为默认值。
总结
ES11 中新增的空值合并 Nullish Coalescing 运算符 ??，可以更好地处理空值和默认值。与 || 运算符相比，?? 运算符不会误将 0 或空字符串等非 null 或 undefined 的值视为 null 或 undefined。
在实际开发中，可以将 ?? 运算符用于检查函数参数是否为空或 undefined，以及设置默认值。掌握该运算符可以使我们代码更加简洁和易于阅读。
希望本文能够为你带来帮助，也欢迎在评论区分享你的想法和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b0ebf0add4f0e0ffa433ca
