JavaScript 条件运算符
JavaScript 条件运算符首先评估表达式的 true 或 false 值，然后根据评估结果执行两个给定语句之一。条件运算符也称为三元运算符。
JavaScript 条件（三元）运算符是唯一采用三个操作数的运算符——一个条件后跟一个问号 （？），然后如果条件为真，则执行第一个表达式，后跟冒号 （:)，最后如果条件为假，则执行第二个表达式。
JavaScript 中有 6 个 falsy 值。它们是 − 0 （零）、false、空字符串 （'' 或 “”）、null、undefined 和 NaN。在 JavaScript 中，所有其他值都被视为 true。
语法
以下是 JavaScript 中条件（三元）运算符的语法 -
var variable = condition ? exp1 : exp2;
参数
在这里，我们已经解释了上述语句中的参数。
- condition − 这是一个条件语句。
- exp1 − 如果条件语句的计算结果为 truey，则控制流执行 exp1 表达式。
- exp2 − 如果条件语句计算 falsy，则控制流执行 exp2 表达式。
如果 condition 的值是任何 falsy 值，则表达式的结果将是 exp2 的值;否则，它将是 exp1 的值。
例在下面的示例中，我们比较了条件语句中 num1 和 num2 变量的值。此处，条件语句的计算结果为 true，因此 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>
它将产生以下结果 -
例
在下面的示例中，我们根据条件语句的结果将值分配给 object 属性。
现在，想象一下，如果你需要编写 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>
它将产生以下结果 -
例
此示例演示了您还可以使用 expression 而不是 values。根据条件语句，控制流计算第一个或第二个表达式，并将结果值分配给 '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>
它将产生以下结果 -
简而言之，您可以使用三元或条件运算符来缩短代码，它使用 if-else 语句。
处理 null 值
如果用户传递 null 值，我们可以使用 JavaScript conational 运算符来处理 null 值，以设置默认值。
例请尝试以下示例 -
<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, stranger
