Javascript三元條件運算符

今天談一個小知識點，三元運算符。三元運算，顧名思義會有三個要素，表達式的大致組成為condition ? expr1 : expr2；一個語句加兩個表達式。問號之前為判斷語句。如果為真，則執行第一個表達式，如果為假，則執行第二個表達式。我的理解其實就是簡化的if else語句，舉個栗子，經常看到的一個點擊展開，再點擊隱藏按鈕。

我想實現點擊輸入法，實現下面ul的展開與隱藏，如果我們用if else的話可能會這么寫：

   oBth.onclick=function(){
        if (oUl.style.display=='block') {
            oUl.style.display=='none';
        }else{
            oUl.style.display=='block';
        }
    }

但是如果我們用三元運算符的話可能就只需要下面這一行代碼：

oBth.onclick=function(){
    oUl.style.display == "block" ? oUl.style.display="none" : oUl.style.display="block"
}

有木有很神奇。當然我只是用了一個比較容易理解的寫法，還有很大的優化空間，我們當然也可以這樣：

oBth.onclick=function(){
    var style = oUl.style.display;
    oUl.style.display= style == "block" ? "none":"block"  //這樣寫的話就一定不能忘了把運算結果重新賦值給元素 - -
　　//oUl.style.display= (style == "block" ? "none":"block") 可讀性更高
}

 

上面代碼的意思是，如果style == "block" 成立的話就把none返回，不成立就返回block，然后把返回結果賦值給作用元素，不過要特別注意 = 和 == 用法和區別。因為賦值運算符（=）的優先級比較低，所以會最后執行賦值運算。如果把后面的三元運算符加上（）可讀性會更高一點，但效果是一樣的。

比較容易出錯的地方：

 三元運算比較容易出錯的應該就是運算的優先級問題：

var isMember = false;
    console.log("當前費用" + isMember ? "$2.00" : "$10.00"); //返回$2.00

出錯的原因是？的運算優先級比+低，所以實際運行的語句是：

"當前費用false" ? "$2.00" : "$10.00");

在js中字符串是為真的，所以會輸出$2.00.

不過為了避免以上錯誤的話，可以記住：

不是false, 0, undefined, NaN, "" or null，js都認為是true;

所以具體是用三元運算符還是用if else見仁見智，視具體情況而定吧。

感謝閱讀！