JS教程二——三元运算
如果 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的播放与暂停详解
评论列表 [0条]