JS: if语句与三元运算符的比较

马黑黑

此前，我介绍过 JS 的三元运算符，JS三元运算符 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)。这里再讲一次，免得小童鞋们老发蒙。

我们来做个简单的数学题：已知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);

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

马黑黑

醉美水芙蓉 发表于 2023-6-21 11:50
问候老师中午好！

中午好

南无月

这个就是那个 要命的JS~~

南无月

老师的教程写得清楚明了，天下第一好教程

南无月

a >= b ? (c = a - b, do = true) : (c = a + b, do = false);如果成立，执行前者，否则执行后者。已是完美逻辑，再多加个变do变量就不太明白。。。。等有假找个实例瞧瞧看能不能啃懂。。

樵歌

我不蒙就不正常了

红影

三元运算符的语句不带括号的，若公式再多点很容易看迷糊，还是改装后的三元句式看得更清楚点。

红影

这个是看懂了，真正用在帖子中使用的音乐播放/暂停时处理的元素时还是不太懂

梦缘

问好老师，欣赏精彩分享，点赞！

马黑黑

梦缘 发表于 2023-6-21 16:58
问好老师，欣赏精彩分享，点赞！

马黑黑

南无月 发表于 2023-6-21 12:48
这个就是那个 要命的JS~~

看懂木有

马黑黑

南无月 发表于 2023-6-21 13:01
a >= b ? (c = a - b, do = true) : (c = a + b, do = false);如果成立，执行前者，否则执行后者。已是完美 ...

群，要懂这个。语句群，就是两个语句以上，条件成立依次执行，不成立则依次执行另一个语句群。

马黑黑

红影 发表于 2023-6-21 16:07
这个是看懂了，真正用在帖子中使用的音乐播放/暂停时处理的元素时还是不太懂

那要多研究研究

马黑黑

樵歌 发表于 2023-6-21 13:28
我不蒙就不正常了

不异常就好

马黑黑

红影 发表于 2023-6-21 15:54
三元运算符的语句不带括号的，若公式再多点很容易看迷糊，还是改装后的三元句式看得更清楚点。

不带括号的是简单的，带括号的是复杂的

南无月

马黑黑 发表于 2023-6-21 21:59
看懂木有

写得这么清楚，我自我感觉看懂了。。

南无月

马黑黑 发表于 2023-6-21 22:00
群，要懂这个。语句群，就是两个语句以上，条件成立依次执行，不成立则依次执行另一个语句群。

明白了，就是里面可以有多个要执行的任务。。。

马黑黑

南无月 发表于 2023-6-22 13:00
明白了，就是里面可以有多个要执行的任务。。。

对的

马黑黑

南无月 发表于 2023-6-22 13:00
写得这么清楚，我自我感觉看懂了。。

看懂了挺好