如何在 JavaScript 中使用问号操作符（?）

原文： How the Question Mark (?) Operator Works in JavaScript

条件或问号运算符，用 ? 表示，是 JavaScript 中最强大的功能之一。? 运算符用于条件语句，当与 : 搭配时，可以作为 if...else 语句的一个替代品。

但它的作用远不止于此。? 操作符有三个主要用途，其中两个你可能没有使用过，甚至没有听说过。让我们来详细了解一下它们。

问号（?）在 JavaScript 中的三种主要用途

• 三元运算符
• 可选链
• 空值凝聚

我们将详细了解每一种用法，首先是最常见的 ? 运算符的使用方法——作为三元运算符。

三元运算符

三元的意思是由三个项目或部分组成。? 运算符也被称为三元运算符，因为它不像其他运算符，如严格相等（===）或余数（%），它是唯一需要三个操作数的运算符。

从 ? 开始，我们在左边添加一个条件，在右边添加一个值，当条件为真时返回。然后我们添加一个冒号（:），后面跟着一个值，当条件为假时返回。

三元运算符基本上是传统 if...else 语句的一个快捷方式。

让我们来比较一下三元运算符和一个较长的 if...else 语句：

在这里，三元运算符只用了一行代码，而 if...else 则需要七行。

使用三元运算符要有效得多，对吗？

可选链

在 2020 年，一个被称为“可选链”的很棒的新功能被引入。

为了理解它是如何运行的，想象一下这个场景。

假设你有代码调用一个不存在的对象属性，这在运行时触发了一个错误。这可能是因为你的数据库或 API 中的一个缺失或未定义的值：

由于有了可选链，你只需在属性名称和下一个属性之间的句号之间插入一个 ?。

有了这个，它将只是返回 undefined，而不是抛出一个错误。

可选链对于 JavaScript 开发者来说确实是一个很棒的功能。

空值凝聚

在某些情况下，你必须为一个缺失的属性名或值设置一个默认值。

例如，假设我们正在创建一个天气应用程序，其中我们要获取温度、湿度、风速、压力、日出日落时间和城市的图片。我们输入了一个地方，比方说班加罗尔，但由于某些原因，它的图片没有出现在数据库中。

当应用程序获取并显示数据时，图片将是空白的，这看起来很难看。在这种情况下，我们可以做的是为那些没有图片的城市（在我们的例子中是班加罗尔）设置一个默认图片。

这样，当应用程序显示数据时，没有图像的城市就会出现默认的图片。

你可以使用 || 操作符，也就是逻辑 OR 操作符，来实现这一目的：

但是如果你使用 || 来提供一个默认值，如果你认为某些值是可用的（例如，'' 或 0），你可能会遇到意想不到的行为。

考虑一种情况，即一个变量的值为 0 或一个空字符串。如果我们使用（||），它将被视为未定义或 NULL，并返回一些默认值。

你可以使用双问号（??）或者空值凝聚来代替逻辑 OR（||）运算符。

让我们通过一个例子来学习。

const value1 = 0 || 'default string';
console.log(value1);


const value2 = '' || 1000;
console.log(value2);

这里，我们在变量 value1 中有 0 和 default string。如果我们在控制台记录它的值，我们会得到 default string，这很奇怪。我们应该得到的不是 default string，而是 0，因为 0 不是未定义或空。所以，|| 在这里没有起到作用。

同样地， value2 也是如此。

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

但如果我们用 ?? 替换 ||，就会得到 0 和一个空字符串，这使得它变得非常酷。

空值凝聚的工作原理与逻辑 OR 运算符完全一样，只是当左边的值为 undefined 或 null 时，你会得到右边的值。

换句话说，?? 只允许 undefined 或者 null 值，不允许空字符串（''）或 0。

总结

现在，希望你能理解 ? 运算符在 JavaScript 中是如何工作的。它看起来很简单，但它是语言中最强大的字符之一。它以三种不同的方式提供语法糖。

试试吧，让我知道你有什么问题。

祝你学习愉快！