ES10 新增 Nullish Coalescing 运算符解决 Undefined 和 Null 判断的问题

在前端开发中，我们经常需要对变量进行类型判断、空值判断等处理。在过去，我们一般使用 || 运算符来判断一个值是否为 undefined 或 null，如下所示：

const name = undefined;
const fullName = name || "default name";
console.log(fullName);

以上代码的输出结果为 default name。

但是，当 name 取到一个假值（如 0、false、"" 等）时，fullName 的值也会被设置为 default name，这显然不是我们期望的结果。为了解决这个问题，ES10 新增了 Nullish Coalescing 运算符 ??。

Nullish Coalescing 运算符的使用

Nullish Coalescing 运算符 ?? 的使用方式非常简单，它的作用是检查一个值是否为 null 或 undefined。如果是 null 或 undefined，结果就为右侧的默认值，否则结果就为该值本身。例如：

const name = null;
const fullName = name ?? "default name";
console.log(fullName);

以上代码的输出结果为 default name。

在上面的例子中，因为 name 的值为 null，所以 fullName 的值被设置为了默认值 default name。而如果把 name 的值设为非空字符串或数字，fullName 的值就会取到 name 的值。例如：

const name = "John";
const fullName = name ?? "default name";
console.log(fullName);

以上代码的输出结果为 John。

Nullish Coalescing 运算符和普通或运算符的区别

Nullish Coalescing 运算符 ?? 和普通的或运算符 || 有什么区别呢？在上面的例子中，我们已经看到了它们之间的一些差异。具体来说，它们之间的区别如下：

• 当左侧的值是 null 或 undefined 时，?? 运算符才会执行右侧的表达式；
• 当左侧的值是任何“假值”（如 0、false、"" 等）时，?? 和 || 都会执行右侧的表达式；
• 当左侧的值是任何“真值”（如非空字符串、非零数字等）时，?? 和 || 都会返回左侧的值。

换句话说，?? 运算符不仅仅可以帮我们检查变量是否为 null 或 undefined，而且还可以避免与“假值”混淆。

总结

在实际的前端开发中，我们常常会遇到需要对变量进行类型判断、空值判断等处理的情况。在过去，我们一般使用 || 运算符来判断一个值是否为 undefined 或 null，但是这种方式存在一些限制。ES10 新增的 Nullish Coalescing 运算符 ??，可以避免与“假值”混淆，更加准确地检查变量是否为 null 或 undefined。在实际开发中，我们应该适时地使用这个新的运算符，以提高代码的健壮性和可读性。

示例代码

const name1 = undefined;
const name2 = null;
const name3 = "";
const name4 = "Tom";
const name5 = 0;
const name6 = false;

console.log(name1 ?? "default name"); // "default name"
console.log(name2 ?? "default name"); // "default name"
console.log(name3 ?? "default name"); // ""
console.log(name4 ?? "default name"); // "Tom"
console.log(name5 ?? "default name"); // 0
console.log(name6 ?? "default name"); // false

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a19a99add4f0e0ff9a8d66