ECMAScript 2020：空值合并运算符可以避免在检查 null 和 undefined 时出现的重复代码

在 JavaScript 开发中，经常需要检查 null 和 undefined 值。这些检查很容易导致代码的臃肿，而且会减慢代码的运行速度。幸运的是，ECMAScript 2020 引入了一个新的运算符——空值合并运算符，可以帮助我们简化检查 null 和 undefined 值的代码。

空值合并运算符

空值合并运算符（??）可以将左操作数转换为布尔值。如果左操作数是 null 或 undefined，则返回右操作数。否则，返回左操作数。

下面是一个简单的示例：

const x = null ?? 'hello';
console.log(x); // 输出 hello

const y = 'world' ?? 'hello';
console.log(y); // 输出 world

空值合并运算符的优先级与或运算符相同。如果你想使用空值合并运算符和其他运算符一起使用，你必须使用小括号将其包裹起来。

为什么需要空值合并运算符

在 JavaScript 中，检查 null 和 undefined 值的代码非常常见。在这个例子中，我们想确定变量 x 是否存在：

let x;
if (x === null || x === undefined) {
  x = 'default';
}

这段代码工作得很好，但存在两个问题：

• 检查 null 和 undefined 值的代码非常繁琐。
• 这样做会使代码变得臃肿。

空值合并运算符可以帮助解决这些问题。我们可以改写上面的代码：

let x = undefined;
x = x ?? 'default';

这段代码与上面的代码达到的目的相同，但是更好。

如何在实际中使用空值合并运算符

下面是一个使用空值合并运算符的更复杂的示例：

const user = {
  name: null,
  email: 'support@example.com',
};
const name = user.name ?? 'unknown';
const email = user.email ?? 'unknown';
console.log(`${name} ${email}`);

在这个示例中，我们有一个用户对象，它可能会缺少名称和电子邮件地址。我们使用 ?? 运算符检查每个属性。如果属性的值为 null 或 undefined，我们使用默认值。

总结

空值合并运算符是 ECMAScript 2020 中的一个新特性，它可以帮助我们简化检查 null 和 undefined 值的代码。使用空值合并运算符可以使代码更加简洁明了，同时提高代码的可读性。

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