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

时间: 2017-12-25阅读: 503标签: 条件

运用条件运算符将你的 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,以上的代码将会跳过,并仅仅弹出观影愉快。

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

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告合作文章投稿关于web前端网站长推荐网站地图站长QQ:522607023

小程序员专栏: 土味情话心理测试脑筋急转弯