前言
各位大神，大家好，相約週三。我們又見面了。
衆所周知，三元表達式在代碼量上比if…else語句更簡潔一些。但是博主在可讀性上更加偏向於if…else語句。三元表達式不僅在js中使用，在很多後臺程序語言，比如java、php中都有使用，不過在js中對於三元表達式的要求貌似要松很多。廢話不多說。下面一起看看三元表達式。
三元表達式
素質N連問
首先 爲什麼叫三元表達式？
顧名思義，有三個元素組成的表達式。
哪三個元素呢？
“條件”“真結果”“假結果”。
三元表達式的基本格式是什麼呢？
條件?真結果:假結果
三元表達式是如何對應if…else語句的？
條件 ? 真結果 : 假結果
if(條件){真結果}else{假結果}
我們來看一下官方的解釋。W3C把“三元表達式”叫做"ECMAScript 條件運算符"
誒！中間爲什麼空了一塊呢？
我給它補上：
boolean_expression ? true_value : false_value
這行代碼的意思官方也給了具體的說明，這裏不再贅述。
三元表達式結果執行多行代碼表達：
大家也看到了，在官方的w3c文檔中，給的只有一條結果執行語句，但是博主之前說過，至少在js中，三元表達式和if…else語句是可以相互替換的。
那麼既然if…else語句都可以在結果執行時寫多行代碼，三元表達式爲什麼不行呢？
其實是可以的。
<script>
var a='';
var b='';
var age=prompt("Input your age:");
age>18 ? (a='成年人',b='18歲以上') : (a='未成年人',b='18歲以下');
alert(a);
alert(b);
</script>
這下看明白了嗎？只要在結果中多條語句之間加上“，”就可以了。
三元表達式在for循環中的運用
<script>
var a='';
var b='';
for(var i=0;i<4;i++){
i>2 ? (a='成年人',b='18歲以上') : (a='未成年人',b='18歲以下');
alert(a);
alert(b);
}
</script>
以上代碼打印一次 ‘成年人’,‘18歲以上’ 三次‘ 未成年人’，‘18歲以下’。（此處感謝 @nimapier 指出錯誤）
三元表達式的嵌套
if…else語句可以嵌套多層，那想必三元表達式也可以進行嵌套吧！沒錯，三元表達式可以進行嵌套，而且理論上可以無限嵌套下去。爲什麼說理論上？因爲暫時沒有見過有人嵌套過多行三元表達式。首先不利於代碼的閱讀，其次對於邏輯能力不強的人來說，確實是一種腦力的摧殘！大家自行感受一下。
<script>
var a='';
var b='';
var age=prompt("Input your age:");
age<18 ? (a='兒童',b='18歲以下'):( age>50 && age<80 ? (a='老年人',b='50歲以上') : (age>=80 ? (a='長壽者',b='80歲以上'):(a='你的年齡是以下兩種',b='18、50')));
alert(a);
alert(b);
</script>
其實這塊代碼看起來感覺還不是很明顯，但是博主在調試過程中已經有點暈了，特別是在最後三個括號那裏，糾結了！
所以歸納一下三元表達式的嵌套：
條件1 ? 真結果1:( 條件1.1 真結果1.1 : (條件1.1.1 ? 真結果1.1.1:假結果1.1.1))
簡便的寫法可以不用括號。
是不是眼睛都看花了?
三元表達式的侷限性
最後，大家注意，三元表達式在使用過程中不能使用break,continue等語句。否則…
最最後謝謝各位大神賞臉閱讀鄙人拙劣的博客。撰寫不恰當之處還希望各位大佬指出共同學習。
關注公衆號“原生JS”
回覆“WebStorm”: 以後不用再辛苦找尋註冊碼
回覆“禮包”：免費領取84本前端PDF，最新BAT面試題與Flutter教程
不定期更新最新技術乾貨，用最簡單明瞭的方式讓你記住JS知識點
你關注我
我教你JavaScript
你不關注我
我教你同事JavaScript
