三元运算是很有意思的，但在具体了解它之前，先看看 if ... else ... 语句。我们假定现在在斟酌如何给 a 和 b 两位员工发红包，我们的依据是贡献的大小：

如果 a 大于 b，给 a 加钱钱，500块吧；反之，给 b 加钱钱，当然也是加500块。

财务总监用 JS 解决这个问题：

var a = 2.1; // 员工 a 的贡献系数
var b = 2.1; // 员工 b 的贡献系数
var a_hb = 2000; //员工a的基础红包
var b_hb = 2000; //员工b的基础红包

if (a>b) {
    a_hb = a_hb + 500;
}else{
    b_hb = b_hb + 500;
}



用人话解释 if ... else ...  代码：如果 a>b 成立，则 a_hb 的值在自身值基础上加500，反之，如果 a>b 不成立，则 b_hb 的值在自身值基础上加500。也就是说，谁的贡献系数大，这500元钱就给谁。相等的情形呢？归b，这是题外话不提。

if ... else ... 语句容易阅读，也方便代码修改，但略显啰嗦，有一种替代的方法来表达，很简洁，它就是三元运算符。试看：

a>b ? a_hb = a_hb + 500 : b_hb = b_hb + 500;

三元运算符用一个问号和一个冒号组成表达式。问号之前是条件语句，问号就是问这个条件是否成立，如果成立，执行问号后面的语句，反之如果不成立，就执行冒号后面的语句。一行代码完成人家五行代码的工作，太精巧了。

三元运算符的作用在于让代码更简洁，仅此而已。

------------------------------------------------------------------------------------------------

此前，我介绍过 JS 的三元运算符。这里再讲一次，免得小童鞋们老发蒙。

我们来做个简单的数学题：已知a和b的值，根据ab的大小求c，具体题意是，如果a大于等于b，则 c = a - b，反之，c = a + b。

用 if（如果）... else（否则）... 语句，容易看得懂，但代码多几行：

<script>

let a = 20, b = 10, c; // 声明变量并给 a、b 赋值

if(a >= b) {
    c = a - b;
} else {
    c = a + b;
}

console.log(c); // 在控制台显示结果


</script>


用 三元运算符，代码少，但不容易看懂：

<script>

let a = 20, b = 10, c; // 声明变量并给 a、b 赋值

c = a >= b ? a - b : a + c;

console.log(c); // 在控制台显示结果


</script>



我们来分析一下三元那一句：

c = a >= b ? a - b : a + c;

c = 是求 c 的表达；
a >= b ? 是条件语句，问号 ? 相当于“如果”，即如果 a >= b 这个条件成立；
a - b 是执行语句一，它放在 ? 的后面，意思是如果 a >= b 这个条件成立，则执行 a - b  这一句；
: a + c 中，冒号 : 是“否则”的意思，其后紧跟的 a + c 是执行语句二，即，反之执行 a + c 这一句。

三元运算语句不好懂，细细体会我上面的解释方能领悟。理解了之后，还要明白三元运算语句的多执行语句和三元运算的嵌套，这里只讲讲三元运算语句的多执行语句。

多执行语句，我们需要改装一下三元的句式：

条件 ?  (执行语句群一) : (执行语句群二);

条件语句必须放前面，接着用问号 ？ 来问条件是否成立，如果成立，则执行语句群一的语句集合；接着用冒号 ：表示否则，就是若条件不成立，则执行语句群二的语句集合。

语句群可以是多句，群一、群二的句数可以不同。每一个语句群都需要用小括号包裹起来，句子之间用小角逗号隔开，最后一个句子后面不要小角逗号。例如（我们增加了一个布尔变量 do）：

a >= b ? (c = a - b, do = true) : (c = a + b, do = false);

上句只是举个样式，实际应用中可以依照这个结构来组织自己的三元语句代码（例如我们在帖子中经常使用的音乐播放/暂停时处理关键帧动画和视频）。

前一篇: JS教程一
下一篇: JS教程三——简单控制audio的播放与暂停详解