JavaScript ——条件 (三元) 运算符介绍

运用条件运算符将你的 if 语句缩短为一行代码

由基础开始——if 语句

运用条件语句，比如 if，当 if 语句满足的情况下，允许我们执行指定一些代码块

比如下面的例子

person 对象包含 name，age，driver 属性

let person = { name: 'tony', age: 20, driver: null };

我们想测试如果 person 的年龄大于等于 16。如果这个是真，他们年龄已经足够驾驶车和司机应该认可。如果这个不是真的，司机应该否认。

我们可以使用一个 if 语句来完成这个例子：

if (person.age >= 16) { person.driver = 'Yes'; } else { person.driver = 'No'; }

但是，如果我告诉你，我们可以用一行代码完成同样效果呢？如下所示：

person.driver = person.age >=16 ? 'Yes' : 'No';

这个较短的代码具有跟 person.driver = 'yes' 一样的结果。

既然你已经了解到条件三目运算符的执行过程，接下来，我们就探索它是如何起作用的。

条件（三目）运算符

首先，了解下特殊的 if 语句的语法

if ( condition ) { value if true; } else { value if false; }

现在，三目运算如下：

condition ? value if true : value if false

注意点：

1. condition 是真正需要验证的。条件的结果应该是 true 或者 false 或者至少强制转换成布尔值。

2. ? 将条件和 true 值分开。如果 condition 的值是 true，任何介于 ？ 和 : 之间的都将会执行。

3. 最后一个冒号 :。如果 condition 的值是 false。冒号后的代码将会执行。

案例——司机年龄

我们将会花费一些时间重新思考文章中最初的例子：

let person = { name: 'tony', age: 20, driver: null };

person.driver = person.age >=16 ? 'Yes' : 'No';

注解最重要的部分是执行的顺序。添加一些圆括号帮助你虚拟代码的执行顺序：

person.driver = ((person.age >=16) ? 'Yes' : 'No';)

正如你们所希望的，首先是检查条件来判断 person.age >= 16 是 true 还是 false。

因为 20 是大于 16 的，当前值是 true。如下所示：

person.driver = (true ? 'Yes' : 'No';)

因为我们的条件语句的条件是 true，将返回介于 ? 和 : 之间的值。在当前案例中，也就是 'Yes'。

既然我们已经获取到返回的值，最后将要做的事情是设置其等于我们的变量:

person.driver = 'Yes';

非常棒！现在让我们继续一些更加复杂的例子。

案例——学生价格

在这个例子中，我们针对一个电影院编程。电影院提供两种票价：普通人$12，学生$8.

创建一个变量记录顾客是学生还是其他：

let isStudent = true;

通过变量，我们可以使用三目元算相应地改变价格：

let price = isStudent ? 8 : 12

console.log(price); // 8

因为我们 isStudent 的布尔值是 true，三目元算返回的变量 price 的值是8。

案例——嵌套三元

但是，如果上述的电影院对学生和老年人打折呢？

我们可以运用三元嵌套运算符来测试多个条件。

针对这个场景我们假设票价：普通人$12，学生$8，老年人$6。

这里将展示针对老年的代码片段：

let isStudent = false; let isSenior = true;

let price = isStudent ? 8 : isSenior ? 6 : 10

console.log(price); // 6

这段代码将有很多内容，所以中断下：

1. 首先检查我们的顾客是否为学生。如果 isStudent 是 false，只有第一个 ： 后的代码执行。在：后，我们还有一个条件语句：

2. 第二个条件语句是验证 isSenior ——如果是 true，只有介于 ? 和 : 之间的代码执行。

3. price 的值是6，然后打印在屏幕上。

案例——多元运算

多元运算运行在一个三元运算中是可能的。为了做到这些，我们必须使用逗号分隔运算表达式。当然，你也可以使用圆括号讲你的代码分组：

let isStudent = true; let price = 12;

isStudent ? ( price = 8, alert('Please check for student ID') ) : ( alert('Enjoy the movie') );

在以上的例子中，我们的电影 price 已经设置为 $12。如果 isStudent 是 true，我们调整价格为 $8，然后弹出一个警告来让收银员核对学生证。如果 isStudent 是 false，以上的代码将会跳过，并仅仅弹出观影愉快。