ECMAScript 2020（ES11）是 JavaScript 语言的最新版本，其中引入了 Nullish coalescing 运算符。这个新运算符可以用来解决在 JavaScript 开发中常见的问题：如何判断一个变量是否为 null 或 undefined，并根据不同的情况执行不同的逻辑。
在本文中，我们将介绍什么是 Nullish coalescing 运算符，并展示如何使用逻辑赋值表达式的 && 和 || 来模拟 Nullish coalescing 的行为。我们还将提供实际的代码示例，帮助读者更好地理解这个新特性。
什么是 Nullish coalescing 运算符
在 JavaScript 中，我们通常使用 || 运算符来判断一个变量是否为 null 或 undefined。例如，下面的代码示例中，变量 name 是一个字符串，如果它为 null 或 undefined，我们会将其赋值为 "default"。
let name = null; name = name || "default"; // name 的值变为 "default"
这个判断的机制看上去是可行的，但是存在一个问题：如果变量的值为 falsy 值时（如空字符串 ""，数字 0，false），那么它也会被判断为 null 或 undefined。例如，下面的代码中，变量 age 被判断为 undefined，尽管它的值实际上是 0。
let age = 0; age = age || 18; // age 的值变为 18
为了解决这个问题，ES11 提供了 Nullish coalescing 运算符 ??。这个运算符只有在变量的值为 null 或 undefined 时才返回默认值。例如，可以使用下面的代码来判断变量 name 是否为 null 或 undefined：
let name = null; name = name ?? "default"; // name 的值变为 "default"
与 || 运算符不同，Nullish coalescing 运算符只有在变量的值为 null 或 undefined 时才返回默认值。如果变量的值为 falsy 值（如空字符串 ""，数字 0，false），则它的值不会被替换为默认值。
使用 && 和 || 模拟 Nullish coalescing
在实际的开发中，我们可能需要在旧代码中使用 Nullish coalescing，而这些代码可能在不升级到 ES11 的情况下运行。幸运的是，我们可以使用 && 和 || 运算符来模拟 Nullish coalescing。
具体来说，我们可以使用下面的代码来模拟 Nullish coalescing 的行为：
let name = null; name = (name !== null && name !== undefined) ? name : "default"; // name 的值变为 "default"
这个代码的行为与使用 Nullish coalescing 运算符的行为完全一致。在变量为 null 或 undefined 时，它会使用默认值 "default"。
在这个代码中，我们使用了逻辑赋值表达式的 && 和 ||，它们也被称为 null 合并或或合并运算符。具体来说，我们使用 && 运算符来判断变量不为 null 或 undefined，使用 || 运算符来提供默认值。
实际示例
为了更好地理解以上的概念和方法，我们在下面提供一个实际的示例，其中定义了一个函数 getUsername，它用于获取用户的用户名。如果获取失败，它将使用默认值 "guest"。
function getUsername(user) {
const name = user && user.name;
const username = name !== null && name !== undefined ? name : "guest";
return username;
}
console.log(getUsername({ name: "Alice" })); // 输出 "Alice"
console.log(getUsername(null)); // 输出 "guest"
console.log(getUsername({})); // 输出 "guest"以上代码中，我们首先使用了短路运算符 && 来获取 user 对象中的 name 属性，如果 user 为 null 或 undefined，它将返回 undefined。然后，我们使用逻辑赋值表达式的 && 和 || 运算符来完成 Nullish coalescing 的判断。
当 user 的 name 属性为 null 或 undefined 时，我们将返回默认值 "guest"。在这个示例中，我们也可以使用 Nullish coalescing 运算符来实现相同的行为。例如，可以使用如下的代码取代逻辑赋值表达式：
const username = name ?? "guest";
总结
本文中，我们介绍了 Nullish coalescing 运算符及其作用，解决了 || 运算符在变量为 falsy 值时的问题。我们还说明了如何使用逻辑赋值表达式的 && 和 || 来模拟 Nullish coalescing 的行为，并提供了实际的代码示例。我们相信，这个新特性在实际的开发中会给读者带来很大的便利，为编写更安全、更健壮的代码提供了帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b85a04add4f0e0ff0e1640