javascript教程:關(guān)于if簡(jiǎn)寫(xiě)語(yǔ)句優(yōu)化的方法
UglifyJS是一個(gè)對(duì)javascript進(jìn)行壓縮和美化的工具,在它的文檔說(shuō)明中,我看到了幾種關(guān)于if語(yǔ)句優(yōu)化的方法。盡管我還沒(méi)使用它去做一些嘗試性的測(cè)試,但從這里可以看到它的確對(duì)js作了美化的工作。也許有人認(rèn)為if語(yǔ)句就那么簡(jiǎn)單,能優(yōu)化到什么程度?但是看看以下的幾種方式,你也許會(huì)改變看法。
一、使用常見(jiàn)的三元操作符
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ì)于以上使用三元操作符來(lái)優(yōu)化if語(yǔ)句你肯定不會(huì)陌生,或許你經(jīng)常使用它。
腳本之家給出的例子:
<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í)說(shuō),我并沒(méi)有這樣去寫(xiě)過(guò)代碼,這種寫(xiě)法我在學(xué)習(xí)《鳥(niǎo)哥的 Linux 私房菜》時(shí)看到過(guò),但我并沒(méi)想到在js中實(shí)現(xiàn)它。
三、省略大括號(hào){}
if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}
這種寫(xiě)法你我都很熟悉,但我建議在代碼優(yōu)化的時(shí)候這樣做,或者交給UglifyJS幫你去解決。畢竟少一個(gè)大括號(hào),代碼的可閱讀性并不高。
寫(xiě)到這里,我想到j(luò)Query之父在《精通 JavaScript》中的一個(gè)獲取HTML元素屬性的方法。
function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};
如果我們不這樣寫(xiě),可能我們需借助于兩個(gè)if語(yǔ)句來(lái)進(jìn)行處理,而上面的代碼不僅簡(jiǎn)潔有效,而且可閱讀性強(qiáng)。
仔細(xì)想想,好些時(shí)候我們都能找到解決問(wèn)題的有效途徑,但關(guān)鍵在于我們是否用心去尋找一種更好的途徑。
【javascript技巧】if(x==null)簡(jiǎn)寫(xiě)
if(x==null)或if (typeof (x) == 'undefined')可以簡(jiǎn)寫(xiě)為if(!x),未驗(yàn)證。
反之if(x)表示x非空
判斷對(duì)象是否存在
if(document.form1.softurl9){
//判斷是否存在softurl9,防止js出錯(cuò)
}
if(document.getElementById("softurl9")){
//判斷是否存在softurl9,防止js出錯(cuò)
}
補(bǔ)充:
javascript || && 簡(jiǎn)寫(xiě) if
<script type="text/javascript">
如果你想寫(xiě)
if (!false)
{
alert('false');
}
不妨考慮寫(xiě)成:
false || alert('false');
false || alert('false'); true || alert('true'); //output false;
用"||"的情況下,第一個(gè)條件true,不檢測(cè)第二個(gè)直接返回true.第一個(gè)條件false,會(huì)執(zhí)行第二個(gè)條件檢測(cè)
false && alert('false'); true && alert('true'); //output true
用"&&"的情況下,第一個(gè)條件true,還會(huì)檢測(cè)第二個(gè)條件。第一個(gè)條件false,直接返回false退出。
簡(jiǎn)而言之, 替換 if 的簡(jiǎn)單實(shí)用, ? : 替換 if else的實(shí)用。 寫(xiě)短小精悍的代碼
usage:
$("#regform input[type!=hidden]").each(
function(index) {
$(this).parent().has("div.valid-under").length || $('<div class="valid-under"></div>').appendTo($(this).parent());
}
);
</script>
相關(guān)文章
JS逆向之愛(ài)奇藝滑塊加密的實(shí)現(xiàn)
本文主要介紹了JS逆向之愛(ài)奇藝滑塊加密的實(shí)現(xiàn),文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問(wèn)題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令,對(duì)于模塊的導(dǎo)出和引入,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07js 頁(yè)面?zhèn)鲄?shù)時(shí) 參數(shù)值含特殊字符的問(wèn)題
解決方法就是利用js的escape函數(shù),這個(gè)函數(shù)在解決中文亂碼等方面應(yīng)用的比較廣泛。推薦使用。2009-12-12JavaScript返回網(wǎng)頁(yè)中錨點(diǎn)數(shù)目的方法
這篇文章主要介紹了JavaScript返回網(wǎng)頁(yè)中錨點(diǎn)數(shù)目的方法,涉及javascript使用document.anchors獲取錨點(diǎn)數(shù)目的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04前端項(xiàng)目npm?install?安裝依賴(lài)報(bào)錯(cuò)的解決方案(三種問(wèn)題解決方案)
本文給大家介紹前端項(xiàng)目npm?install?安裝依賴(lài)報(bào)錯(cuò)的解決方案(三種問(wèn)題解決方案),給大家總結(jié)了前端項(xiàng)目安裝依賴(lài),遇到過(guò)的問(wèn)題,每一種問(wèn)題給大家完美解決方案,感興趣的朋友一起看看吧2023-12-12javascript自執(zhí)行函數(shù)之偽命名空間封裝法
比較之后,我們可以發(fā)現(xiàn),第二方法更加的直觀,易于理解。但是少了封裝過(guò)程,代碼完全裸露在外。2010-12-12