javascript教程:關(guān)于if簡寫語句優(yōu)化的方法

更新時(shí)間：2014年05月17日 01:50:40 作者：

這篇文章主要介紹了js中if簡寫語句優(yōu)化的方法,需要的朋友可以參考下

UglifyJS是一個(gè)對(duì)javascript進(jìn)行壓縮和美化的工具，在它的文檔說明中，我看到了幾種關(guān)于if語句優(yōu)化的方法。盡管我還沒使用它去做一些嘗試性的測試，但從這里可以看到它的確對(duì)js作了美化的工作。也許有人認(rèn)為if語句就那么簡單，能優(yōu)化到什么程度？但是看看以下的幾種方式，你也許會(huì)改變看法。

一、使用常見的三元操作符

if (foo) bar(); else baz(); ==> foo?bar():baz();
if (!foo) bar(); else baz(); ==> foo?baz():bar();
if (foo) return bar(); else return baz(); ==> return foo?bar():baz();

對(duì)于以上使用三元操作符來優(yōu)化if語句你肯定不會(huì)陌生，或許你經(jīng)常使用它。

腳本之家給出的例子：

復(fù)制代碼代碼如下:

<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>

輸出結(jié)果：

100

二、使用and(&&)和or(||)運(yùn)算符

if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();

老實(shí)說，我并沒有這樣去寫過代碼，這種寫法我在學(xué)習(xí)《鳥哥的 Linux 私房菜》時(shí)看到過，但我并沒想到在js中實(shí)現(xiàn)它。

三、省略大括號(hào){}

if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}

這種寫法你我都很熟悉，但我建議在代碼優(yōu)化的時(shí)候這樣做，或者交給UglifyJS幫你去解決。畢竟少一個(gè)大括號(hào)，代碼的可閱讀性并不高。

寫到這里，我想到j(luò)Query之父在《精通 JavaScript》中的一個(gè)獲取HTML元素屬性的方法。

function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};

如果我們不這樣寫，可能我們需借助于兩個(gè)if語句來進(jìn)行處理，而上面的代碼不僅簡潔有效，而且可閱讀性強(qiáng)。

仔細(xì)想想，好些時(shí)候我們都能找到解決問題的有效途徑，但關(guān)鍵在于我們是否用心去尋找一種更好的途徑。

【javascript技巧】if(x==null)簡寫

if(x==null)或if (typeof (x) == 'undefined')可以簡寫為if(!x)，未驗(yàn)證。

反之if(x)表示x非空

判斷對(duì)象是否存在

復(fù)制代碼代碼如下:

if(document.form1.softurl9){
//判斷是否存在softurl9，防止js出錯(cuò)
}

復(fù)制代碼代碼如下:

if(document.getElementById("softurl9")){
//判斷是否存在softurl9，防止js出錯(cuò)
}

補(bǔ)充：

javascript || && 簡寫 if

復(fù)制代碼代碼如下:

<script type="text/javascript"> 

    如果你想寫 
    if (!false) 
    { 
        alert('false'); 
    } 

    不妨考慮寫成: 
    false || alert('false'); 

    false || alert('false'); true || alert('true'); //output false; 
    用"||"的情況下,第一個(gè)條件true,不檢測第二個(gè)直接返回true.第一個(gè)條件false，會(huì)執(zhí)行第二個(gè)條件檢測 

    false && alert('false'); true && alert('true'); //output true 
    用"&&"的情況下,第一個(gè)條件true，還會(huì)檢測第二個(gè)條件。第一個(gè)條件false，直接返回false退出。 

    簡而言之, 替換 if 的簡單實(shí)用, ? : 替換 if else的實(shí)用。 寫短小精悍的代碼 

    usage: 
    $("#regform input[type!=hidden]").each( 
        function(index) { 
            $(this).parent().has("div.valid-under").length || $('<div class="valid-under"></div>').appendTo($(this).parent()); 
        } 
    );   
</script>