首頁 > web前端 > 前端問答 > javascript三目運算子有哪些

javascript三目運算子有哪些

青灯夜游
發布: 2023-01-04 09:34:01
原創
3335 人瀏覽過

javascript只有一個三目運算子“? ... :”,可用於簡單的選擇結構,基本語法為“布林表達式? sentence1 : sentence2”;當“布林表達式”的值為真時,執行sentence1,否則執行sentence2。

javascript三目運算子有哪些

本教學操作環境:windows7系統、ECMAScript 5版、Dell G3電腦。

javascript 三目運算子

#javascript中的三目運算子用作判斷時,基本語法為: expression ? sentence1 : sentence2

expression的值為真時執行sentence1,否則執行sentence2,請看程式碼

var b = 1,
       c = 1 
       a = 2;
   a >= 2 ? b++ : b--;
   b   // 2
   a < 2 ? c++ : c--;
   c   // 0
登入後複製

從上面程式碼中,我們暫時會認為三目運算子相當於if else(下面再詳聊)

 if(expression){ 
      sentence1;
   } else {
      sentence2;
   }
登入後複製

expression為真,即expression不為undefinedNaN0null的時候執行sentence1,否則執行sentence2

既然這樣的功能和if相同,為什麼還要使用它?首先,在邏輯多次判斷的時候,三目運算子邏輯更簡潔:

 expression1 ? sentence1 :
   expression2 ? sentence2 :
   expression3 ? sentence3 :
   ...
登入後複製

只要任意一個expressionN的判斷為真,那麼sentenceN立即執行,這個判斷結束,後面的任何判斷不再執行。而如果我們寫成if-else

if(expression1){
      sentence1;
   } else if(expression2){ 
      sentence2;
   } else if(expression3){
      sentence3;
   } ...
登入後複製

這樣書寫邏輯看起來比較心累,所以在jquery和zepto源碼中,我們會大量看到三目運算符的應用。

賦值

另一個經典的應用程式場景在於賦值,var param = expression ? value1 : value2,這個相信大家經常用到

 var b,
      c = 1;
   var a = b ? 2 : 1;
   a    // 1
   var a = c > 0 ? 2 : 1
   a   // 2
登入後複製

再談判斷

#有一天寫了這樣的程式碼

 function xx(){
      var a = 1,
      b = 3;
      a < b ? return false : &#39;&#39;
  }
登入後複製

居然報錯了! 為什麼報錯,我們會仔細看一下上面的多個判斷

expression1 ? sentence1 :
   expression2 ? sentence2 :
   expression3 ? sentence3 :
   ...
登入後複製

#只要有一個expressionN成立,就馬上跳出。原因是什麼呢? 我們可以猜想是因為三目運算子return了sentenceN,所以判斷立即跳出。賦值的用法也一樣,之所以報錯的原因是

 if(expression){
      return (return 2);
   }
登入後複製

這樣的寫法肯定報錯了。那如果我們對上面的解釋有疑問,我們可以用這樣的程式碼來證明:

 var a = 1,
       b = 2;
   var c = b > 1 ? a++ : 0;
   c   // 1
登入後複製

c為什麼是1,因為n 是在執行完表達式後再加1,如果return a ,先return 再加1,所以這裡的c等於1

更多程式相關知識,請造訪:程式設計影片! !

以上是javascript三目運算子有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板