JavaScript 中的条件运算符首先评估一个表达式的真假值,然后根据评估的结果执行两个给定语句中的一个。条件运算符也被称为三元运算符。
JavaScript 条件(三元)运算符是唯一接受三个操作数的运算符——首先是条件,接着是一个问号(?),然后是当条件为真时要执行的第一个表达式,之后是一个冒号(:),最后是当条件为假时要执行的第二个表达式。
JavaScript 中有六个假值。这些是:0(零)、false、空字符串('' 或 "")、null、undefined 和 NaN。其他所有值在 JavaScript 中被视为真值。
语法
以下是 JavaScript 条件(三元)运算符的语法:
var 变量 = 条件 ? 表达式1 : 表达式2;
参数
在此语句中,参数如下所述:
-
-
表达式1 — 如果条件语句评估为真,控制流执行表达式1。
-
表达式2 — 如果条件语句评估为假,控制流执行表达式2。
如果条件的值是任何假值,那么表达式的结果将是表达式2 的值;否则,它将是表达式1 的值。
示例
在下面的例子中,我们在条件语句中比较 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 语句的代码。
处理 null 值
我们可以使用 JavaScript 条件运算符来处理 null 值,以在用户传递 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, John
Hello, stranger