JavaScript三元運算子的多種使用技巧 - 程式前沿

發現程式碼慢慢寫多了的時候會不自覺的將if else 用三元來替代，僅僅是未了讓程式碼更簡潔精闢，當然也有人說用三元可以讓你有高潮的感覺。

最近在寫js ... 程式語言前端開發IOS開發Android開發雲端運算人工智慧伺服器搜尋資料庫軟體開發工具JavaScript三元運算子的多種使用技巧2018.06.27前端開發javascript,三元運算子,技巧HOME前端開發JavaScript三元運算子的多種使用技巧Advertisement發現程式碼慢慢寫多了的時候會不自覺的將ifelse用三元來替代，僅僅是未了讓程式碼更簡潔精闢，當然也有人說用三元可以讓你有高潮的感覺。

最近在寫js的時候也有這樣的感覺，並且收集了一些小技巧，分享分享。

大鳥請跳過下面這段，大大鳥幫忙指正^__^====普及線====表示式(expr1)?(expr2):(expr3)在expr1求值為TRUE時的值為expr2，在expr1求值為FALSE時的值為expr3。

============普通用法當你發現你經常用ifelse複製程式碼程式碼如下:if(拜春哥||拜考試帝){   不掛科;}else{   門門掛;}那麼三元的表示法就是複製程式碼程式碼如下:拜春哥||拜考試帝?不掛科:門門掛很帥氣的發現程式碼精闢了好多。

日常中經常會有這樣的ifelse判斷，特別是巢狀比較多的時候用三元是比較和諧的，可以讓你的程式碼看起來更加清爽，結構清晰。

稍微聰明點的用法通過不斷的變化，可以衍生出很多三元的用法。

如下一段jquery程式碼複製程式碼程式碼如下:flag?$(‘body’).addClass(‘hover’):$(‘body’).removeClass(‘hover’);甚至更變態些的。

複製程式碼程式碼如下:$(‘.item’)[flag?‘addClass’:‘removeClass’](‘hover’)上面的程式碼看著比較困惑。

因為當flag=true的時候，程式碼就變成以下程式碼：複製程式碼程式碼如下:$(‘.item’)[‘addClass’](‘hover’)這樣寫法等同於。

複製程式碼程式碼如下:$(‘.item’).addClass(‘hover’)再昇華一下可以根據需要來呼叫自己想要的function來處理更多的事情。

複製程式碼程式碼如下:functiona(){     dosomething}functionb(){     dosomething}flag?a():b();那麼為師的完全體於是有了這麼個案例，兩個按鈕一個向前的行為，一個向後的行為。

操作的功能都差不多。

複製程式碼程式碼如下:   varaction_turn=function(e,type){       varself=$(e).closest(‘li’);       vartarget=self[type===‘prev’?‘prev’:‘next’]();       target.addClass(‘has-img’);       self.removeClass(‘has-img’)   }   varbtn_next=$(‘#item-photo-panela.next’)   btn_next.click(function(){       action_turn(this,‘next’);       returnfalse;   });   varbtn_prev=$(‘#item-photo-panela.prev’)   btn_prev.click(function(){       action_turn(this,‘prev’);       returnfalse;   });儘量避免的情況複製程式碼程式碼如下:alert(true?‘true’:false?‘t’:‘f’)我指的是儘量避免如上巢狀的三元，因為在js中語句是從右到左，上面的程式碼等同於複製程式碼程式碼如下:alert(true?‘true’:(false?‘t’:‘f’))如php中這個結果就完全不一樣，三元巢狀的時候是優先左邊的。

複製程式碼程式碼如下:echo((true?‘true’: false)?‘t’:‘f’ ) //php中tip：另外發現php中的三元有這樣的提示Note:注意三元運算子是個語句，因此其求值不是變數，而是語句的結果。

如果想通過引用返回一個變數這點就很重要。

在一個通過引用返回的函式中語句return$var==42?$a:$b;將不起作用，以後的PHP版本會為此發出一條警告。

但是經過試驗，發現在javascript中上面的做法是可以起作用的，大概是js比較BT，嚴謹度沒有php那麼大的原因。

目錄1.您可能感興趣的文章:您可能感興趣的文章:全面瞭解javascript三元運算子javascript三元運算子用法例項JS三目運算(三元運算)方法詳解Advertisement写评论取消回覆很抱歉，必須登入網站才能發佈留言。

近期文章Spark入門（一）用SparkShell初嘗Spark滋味2019.12.08Spark入門（二）如何用Idea運行我們的Spark項目2019.12.08Spark入門（三）Spark經典的單詞統計2019.12.08Spark入門（四）Spark的map、flatMap、mapToPair2019.12.08Spark入門（五）Spark的reduce和reduceByKey2019.12.08Spark入門（六）Spark的combineByKey、sortBykey2019.12.08Spark入門（七）Spark的intersection、subtract、union和distinct2019.12.08Spark實戰尋找5億次訪問中，訪問次數最多的人2019.12.08Spark實戰搭建我們的Spark分佈式架構2019.12.08【機器學習】深度學習開發環境搭建2019.12.08AdvertisementAdvertisement