JavaScript三元運算符的使用進階三元運算邏輯拓展篇

三元運算符其實是很友善很好用的一種條件判斷方法，這個方法可以使調用或渲染資料時逐級篩選。不僅如此，如果适當的擴充三元運算符的邏輯，這個判斷方法還會很好玩，也可以在某種情景下提高代碼效率。有人會說，三元運算符隻适合一些簡單的判斷場景，其實并不然！

文法

我們先來看一下三元運算符的最基本的文法：

條件表達式?True:False

這是三元運算符最基本的文法結果，首先`?`前是一個條件表達式，`?`後面的即是逐級執行的條件，如果條件為真值時，`?`後面的一個事件将被觸發，否将會觸發下一個事件。這個結構類似于：

if(條件表達式){
  //True
}else{
  //False
}

運用

實踐才是一切開始的必要條件，下面我們就通過實際需求運用一下三元運算符。三元運算符其實和if...else...的原理基本無差，三元運算符能實作的其實if...else...也能實作，但是存在即合理，他能在有些需求更友善的做條件判斷。

比如你要給一個變量指派的時候，需要按照不同條件賦予不同值的時候，比如我們有兩種狀态，不同狀态下要賦給變量不同的值，我們可以對比下三元運算符和if...else...的寫法

//三元運算符
var status = (type==1?'已售':'未售')

//if...else...
if(type==1){
  var status = '已售'
}else{
  var status = '未售'
}

對比一下這兩種寫法，很明顯的三元運算符的條件判斷寫法代碼量更簡潔，而常用的if...else...判斷則顯得有點臃腫，而且也不夠優美。

拓展

如果你認為，隻有在這種簡單的條件判斷下才能用到三元運算符，那你就大錯特錯了，三元運算符也能在一些複雜的場景下運用，那我們就通過三元運算符來模拟if...else if..else...的判斷模式

我們再拓展一下之前的那個簡單的條件表達式，比如，現在我們還是兩種狀态碼，但是有一種狀态碼裡還有一種不同的情況存在，我們通過三元運算符來實作一下：

//簡單的條件判斷
var status = (type==1?'已售':'未售')

//拓展的條件判斷
var status = (type==1?(agagin==1?'再售':'已售'):'未售')

上面拓展的條件判斷裡實作了if...else if...else...的寫法，我們通過if...else if...else...來是實作一下，以友善了解：

if(type==1 && again==1){
  var status='再售'
}else if(type==1 && again==0){
  var status='已售'
}else{
  var status='未售'
}

那我們可以換一個角度來看三元運算符，我們上面一個拓展的條件判斷可以分解為兩個條件表達式，第一個是type==1，第二個就是again==1，也就是說，隻是表達式的條件判斷為真值時，就會執行該判斷`:`前的一個事件，是以當第一個條件表達式判斷後還會執行下一個判斷。

進階

我們按照這種方式了解三元運算符後，就可以猜想到，這個條件表達式裡其實不單單是一個判斷或者一個結果，也可以是函數，畢竟JavaScript本就是函數式程式設計的腳本語言。比如：

check()?Ture:False
status==1?True():False()

有了函數的加入，那三元判斷的拓展空間也就更強了。你們可以舉一反三的試試看，還有沒有更有趣的寫法加入到三元運算符。

台州網站開發_台州博格科技

繼續閱讀