ES11 大法好：空值合并 Nullish Coalescing 运算符

在过去，为了判断一个变量是否为空或 undefined，我们通常会使用 || 运算符来进行判断。然而，在某些情况下，这种方法会带来难以预料的结果。

ES11 中新增了一个空值合并 Nullish Coalescing 运算符 ??，它可以更好地处理空值和默认值。本文将详细介绍这个新的运算符，并提供示例代码和学习指导。

?? 运算符是什么？

?? 运算符是一种新的逻辑运算符，用于检查一个值是否为 null 或者 undefined。如果该值为 null 或 undefined，则返回默认值，否则返回该值本身。该运算符不会将 0 或者空字符串视为 null 或 undefined。

示例代码：

const foo = null ?? 'default value';
console.log(foo); // 'default value'

const bar = 'defined value' ?? 'default value';
console.log(bar); // 'defined value'

const baz = '' ?? 'default value';
console.log(baz); // ''

const qux = 0 ?? 'default value';
console.log(qux); // 0

从上面的示例中可以看出，当变量值为 null 或 undefined 时，如果使用 ?? 运算符，则会返回默认值。否则，返回变量值本身。

与 || 运算符的比较

在过去，我们通常使用 || 运算符来实现类似的功能。但是，当变量为 0 或空字符串时，使用该运算符会带来问题。

示例代码：

const foo = null || 'default value';
console.log(foo); // 'default value'

const bar = 'defined value' || 'default value';
console.log(bar); // 'defined value'

const baz = '' || 'default value';
console.log(baz); // 'default value'

const qux = 0 || 'default value';
console.log(qux); // 'default value'

从上面的示例中可以看出，当变量值为 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