<Javascript>浅谈js“三元表达式” （三元运算符）

- 日理万妓 2022-06-14 08:22 491阅读 0赞

## 前言 ##

各位大神，大家好，相约周三。我们又见面了。  
众所周知，三元表达式在代码量上比if…else语句更简洁一些。但是博主在可读性上更加偏向于if…else语句。三元表达式不仅在js中使用，在很多后台程序语言，比如java、php中都有使用，不过在js中对于三元表达式的要求貌似要松很多。废话不多说。下面一起看看三元表达式。

## 三元表达式 ##

## 素质N连问 ##

**首先 为什么叫三元表达式？**  
顾名思义，有三个元素组成的表达式。

**哪三个元素呢？**  
“条件”“真结果”“假结果”。

**三元表达式的基本格式是什么呢？**  
条件?真结果:假结果

**三元表达式是如何对应if…else语句的？**  
条件 ? 真结果 : 假结果  
if(条件)\{真结果\}else\{假结果\}

我们来看一下官方的解释。W3C把“三元表达式”叫做"ECMAScript 条件运算符"![这里写图片描述][format_png]  
诶！中间为什么空了一块呢？  
我给它补上：  
**boolean\_expression ? true\_value : false\_value**  
这行代码的意思官方也给了具体的说明，这里不再赘述。

## 三元表达式结果执行多行代码表达： ##

大家也看到了，在官方的w3c文档中，给的只有一条结果执行语句，但是博主之前说过，至少在js中，三元表达式和if…else语句是可以相互替换的。  
那么既然if…else语句都可以在结果执行时写多行代码，三元表达式为什么不行呢？  
其实是可以的。

这下看明白了吗？只要在结果中多条语句之间加上“，”就可以了。

## 三元表达式在for循环中的运用 ##

以上代码打印一次 ‘成年人’,‘18岁以上’ 三次‘ 未成年人’，‘18岁以下’。（此处感谢 @nimapier 指出错误）

**三元表达式的嵌套**  
if…else语句可以嵌套多层，那想必三元表达式也可以进行嵌套吧！没错，三元表达式可以进行嵌套，而且理论上可以无限嵌套下去。为什么说理论上？因为暂时没有见过有人嵌套过多行三元表达式。首先不利于代码的阅读，其次对于逻辑能力不强的人来说，确实是一种脑力的摧残！大家自行感受一下。

其实这块代码看起来感觉还不是很明显，但是博主在调试过程中已经有点晕了，特别是在最后三个括号那里，纠结了！

所以归纳一下三元表达式的嵌套：  
条件1 ? 真结果1:( 条件1.1 真结果1.1 : (条件1.1.1 ? 真结果1.1.1:假结果1.1.1))  
**简便的写法可以不用括号**。  
是不是眼睛都看花了?

## 三元表达式的局限性 ##

最后，大家注意，三元表达式在使用过程中不能使用break,continue等语句。否则…  
![这里写图片描述][format_png 1]

最最后谢谢各位大神赏脸阅读鄙人拙劣的博客。撰写不恰当之处还希望各位大佬指出共同学习。

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

关注公众号“**原生JS**”

回复“**WebStorm**”: 以后不用再辛苦找寻注册码

回复“**礼包**”：免费领取84本前端PDF，最新BAT面试题与Flutter教程

不定期更新最新技术干货，用最简单明了的方式让你记住JS知识点

**你关注我  
我教你JavaScript  
你不关注我  
我教你同事JavaScript**  
![在这里插入图片描述][format_png 2]

[format_png]: /images/20220614/e7617ebec5fd4889b515ead6e9706f8c.png
[format_png 1]: /images/20220614/6a26f9d537e64828835a3d6dbca3df43.png
[format_png 2]: /images/20220614/b3edb5c13cba4a01bc9a62819ebb6229.png