JavaScript - 条件运算符

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>

它将产生以下结果 -

num1 is greater than num2

例

在下面的示例中，我们根据条件语句的结果将值分配给 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>

它将产生以下结果 -

John is adult and lives in New York

例

此示例演示了您还可以使用 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>

它将产生以下结果 -

The result is: -10

简而言之，您可以使用三元或条件运算符来缩短代码，它使用 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, John
Hello, stranger

打印本页