js中的&& ||運算子與if語句

標籤：style   ar   color   使用   sp   strong   on   div   問題   

這種&&、||運算子來寫if語句在某些人口中也被稱為是短路寫法。最初在網上學習這種寫法時，看到了一個例子：

var add_level = 0;  if(add_step == 5){add_level = 1;}else if(add_step == 10){add_level = 2;}else if(add_step == 12){add_level = 3;}else if(add_step == 15){add_level = 4;}else {add_level = 0;} 這種if else語句是最長見的寫法，也是最為簡單易懂的寫法，但缺點是代碼太多了。於是可以使用switch語句：var add_level = 0;switch(add_step){case 5 : add_level = 1;break;case 10 : add_level = 2;break;case 12 : add_level = 3;break;case 15 : add_level = 4;break;default : add_level = 0;break; 其實switch語句已經非常的精簡了，如果把其中的add_step==15，這種 “=” 條件改為 “>” 這種不等條件，那麼switch語句就無法實現了。 接下來我們再來看看&&、||運算子的寫法：var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;非常的精簡，只用了一行代碼就實現了。 是這段代碼，或者說是這個例子讓&&||運算子寫法進入了我的眼球。但也同樣這這個例子，讓我在理解這種寫法時走了不少彎路。看完這個例子後，我曾經一度的以為    &&前的內容是if()內的判斷條件，後面的則是條件成立後的執行代碼，而||則代表著else{}。這是大錯特錯，下面我就來講一下，&&、||運算子的本質：就拿下面這段代碼來說  var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;這其實就是在進行 ”與“ ”或“判斷。首先從左向右進行判斷，如果add_step==5運行結果為true，那就是true&&1，結果就是1，被判斷為真(但因為是作為數字賦值給變數，所以雖然被判斷為真，但卻不會被轉換為true)。而後面接的又是||運算子，當前面被判斷為真時就不會再向後進行運算。所以最後的結果就是1，然後被賦值給add_step。而如果add_step==5運算結果為false，則add_step==5&&1整個就是false，那麼就會通過後面的||運算子 繼續向後運算，向後面找。這就給了人一種類似於if(){}else{}語句的錯覺。其實這兩種寫法，只是最後的運算結果是一樣的，但是運算的原理確實不同的。運算子寫法，雖然非常的簡潔，精鍊。但是其中包含的邏輯卻非常的複雜。一般不會大量的用來開發，因為很有可能過了一段時間，你自己都在短時間內看不懂，更不要說讓別人來維護了。但是下面這段代碼卻是例外。經常使用，非常的方便有效，能很好的解決命名重複的問題。

var YAHOO = window.YAHOO || {};

這是雅虎官網處理js命名空間的語句。該寫法，目前在很多網站還比較流行且頻繁出現。

 

YAHOO是個變數，|| 關係運算子相當於一個if語句。

如果window.YAHOO已經定義，則YAHOO = window.YAHOO,否則YAHOO={};

{}是 new Object()的簡寫。

var YAHOO = {};  就是聲明一個 “對象級的變數” YAHOO。

js中的&& ||運算子與if語句