Javascript 简明教程

JavaScript - Conditional Operators

JavaScript Conditional Operators

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

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

JavaScript 中有六个假值。它们分别是 - 0（零）、false、空字符串（'' 或 ""）、null、undefined 和 NaN。在 JavaScript 中，所有其他值都视为真。

Syntax

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

var variable = condition ? exp1 : exp2;

Parameters

在此处，我们在上述语句中说明了参数。

  1. condition − 它是一个条件语句。

  2. exp1 − 如果条件语句计算为真，控制流执行 exp1 表达式。

  3. exp2 − 如果条件语句计算为假，控制流执行 exp2 表达式。

如果条件的值是任何假值，表达式的结果将是 exp2 的值；否则，它将是 exp1 的值。

Example

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

<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

Example

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

现在，想象一下，如果你需要编写 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

Example

此示例表明，你还可以使用表达式而不是值。根据条件语句，控制流计算第一个或第二个表达式并将结果值分配给 '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 语句。

Handling null values

我们可以使用 JavaScript 三元表达式来处理空值，如果用户传递了一个空值，它可以设置一个默认值。

Example

尝试以下示例：

<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