JavaScript - 条件运算符

JavaScript 条件运算符

JavaScript 中的 条件 运算符首先计算表达式的真值或假值，然后根据计算结果执行两个给定语句之一。条件运算符也称为 三元 运算符。

JavaScript 条件(三元)运算符是唯一一个接受三个操作数的运算符:一个条件后跟一个问号 (?)，然后是条件为真时执行的第一个表达式，后跟一个冒号 (:)，最后是条件为假时执行的第二个表达式。

JavaScript 中有六个 falsy 值。它们是 -0(零)、false、空字符串('' 或 "")、null、undefined 和 NaN。所有其他值在 JavaScript 中均视为 truthy。

语法

以下是 JavaScript 中条件(三元)运算符的语法 -

var variable = condition ? exp1 : exp2;

参数

这里，我们解释了上述语句中的参数。

• condition - 这是一个条件语句。
• exp1 - 如果条件语句的计算结果为真，则控制流执行 exp1 表达式。
• exp2 - 如果条件语句的计算结果为假，则控制流执行 exp2 表达式。

如果 condition 的值为任意假值，则表达式的结果将为 exp2 的值;否则，将为 exp1 的值。

示例

在下面的示例中，我们比较条件语句中 num1 和 num2 变量的值。此处，条件语句的计算结果为真，因此结果变量包含第一个表达式的值。

<html>
<body>
<div id="output"></div>
<script>
   var num1 = 90;
   var num2 = 67;
   var res = num1 > num2 ? "num1 is greater than num2" : "num2 is greater than num1";
   document.getElementById("output").innerHTML = res;
</script>
</body>
</html>

它将产生以下结果 -

num1 is greater than num2

示例

在下面的示例中，我们根据条件语句的结果将值赋给对象属性。

现在，想象一下，如果您需要编写 if-else 语句来有条件地为每个属性赋值，会怎么样?代码会变得很复杂，但使用三元运算符，您只需一行代码即可轻松完成。

<html>
<body>
<div id="output"></div>
<script>
   const year = 2004;
   const obj = {
	  name: "John",
	  age: year < 2005 ? "adult" : "minor",
	  city: "New York"
   };

   document.getElementById("output").innerHTML = 
   obj.name + " is " + obj.age + " and lives in " + obj.city;
</script>
</body>
</html>

它将产生以下结果 -

John is adult and lives in New York

示例

此示例演示了如何使用表达式代替值。根据条件语句，控制流会计算第一个或第二个表达式的值，并将结果赋给"result"变量。

<html>
<body>
<div id="output"></div>
<script>
   let operator = '-';
   let res = operator == '+' ? 10 + 20 : 10 - 20;
   document.getElementById("output").innerHTML = "The result is: " + res;
</script>
</body>
</html>

它将产生以下结果 -

The result is: -10

简而言之，您可以使用三元运算符或条件运算符来缩短使用 if-else 语句的代码。

处理空值

我们可以使用 JavaScript 共轭运算符来处理空值，以便在用户传递空值时设置默认值。

示例

尝试以下示例 -

<html>
<body>
<div id="output"></div>
<script>
   const greet = (user) => {
      const name = user? user.name : "stranger";
      return `Hello, ${name}`;
   };
   document.getElementById("output").innerHTML =
   greet({ name: "John" }) + "<br>" +
   greet(null);
</script>
</body>
</html>

它将产生以下结果 -

Hello, John
Hello, stranger