JavaScript条件判断： Js三元运算符介绍

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

由基础开始——if 语句

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

比如下面的例子

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

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

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

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

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

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

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

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

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

条件（三目）运算符

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

**if (** _condition_ **) {**
  _value if true;_
**} else {**
  _value if false;_
**}**

现在，三目运算如下：

_condition_ **?** _value if true_ **:** _value if false_

注意点：

condition 是真正需要验证的。条件的结果应该是 true 或者 false 或者至少强制转换成布尔值。
? 将条件和 true 值分开。如果 condition 的值是 true，任何介于？和 : 之间的都将会执行。
最后一个冒号 :。如果 condition 的值是 false。冒号后的代码将会执行。

案例——司机年龄

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

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

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

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

person.driver = ((person.age &gt;=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

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

首先检查我们的顾客是否为学生。如果 isStudent 是 false，只有第一个：后的代码执行。在：后，我们还有一个条件语句：
第二个条件语句是验证 isSenior ——如果是 true，只有介于 ? 和 : 之间的代码执行。
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，以上的代码将会跳过，并仅仅弹出观影愉快。

原文：https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff
翻译：http://www.zcfy.cc/read/discovery

链接: https://www.fly63.com/article/detial/277