js中if語句的幾種優(yōu)化代碼寫法
更新時間：2011年03月12日 19:15:16 作者：
UglifyJS是一個對javascript進行壓縮和美化的工具，在它的文檔說明中，我看到了幾種關(guān)于if語句優(yōu)化的方法。
盡管我還沒使用它去做一些嘗試性的測試，但從這里可以看到它的確對js作了美化的工作。也許有人認為if語句就那么簡單，能優(yōu)化到什么程度？但是看看以下的幾種方式，你也許會改變看法。
一、使用常見的三元操作符
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();
對于以上使用三元操作符來優(yōu)化if語句你肯定不會陌生，或許你經(jīng)常使用它。
二、使用and(&&)和or(||)運算符
if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();
老實說，我并沒有這樣去寫過代碼，這種寫法我在學習《鳥哥的 Linux 私房菜》時看到過，但我并沒想到在js中實現(xiàn)它。
三、省略大括號{}
if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}
這種寫法你我都很熟悉，但我建議在代碼優(yōu)化的時候這樣做，或者交給UglifyJS幫你去解決。畢竟少一個大括號，代碼的可閱讀性并不高。
寫到這里，我想到j(luò)Query之父在《精通 JavaScript》中的一個獲取HTML元素屬性的方法。
function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};
如果我們不這樣寫，可能我們需借助于兩個if語句來進行處理，而上面的代碼不僅簡潔有效，而且可閱讀性強。
仔細想想，好些時候我們都能找到解決問題的有效途徑，但關(guān)鍵在于我們是否用心去尋找一種更好的途徑。
一、使用常見的三元操作符
復(fù)制代碼 代碼如下:
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();
對于以上使用三元操作符來優(yōu)化if語句你肯定不會陌生，或許你經(jīng)常使用它。
二、使用and(&&)和or(||)運算符
復(fù)制代碼 代碼如下:
if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();
老實說，我并沒有這樣去寫過代碼，這種寫法我在學習《鳥哥的 Linux 私房菜》時看到過，但我并沒想到在js中實現(xiàn)它。
三、省略大括號{}
復(fù)制代碼 代碼如下:
if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}
這種寫法你我都很熟悉，但我建議在代碼優(yōu)化的時候這樣做，或者交給UglifyJS幫你去解決。畢竟少一個大括號，代碼的可閱讀性并不高。
寫到這里，我想到j(luò)Query之父在《精通 JavaScript》中的一個獲取HTML元素屬性的方法。
復(fù)制代碼 代碼如下:
function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};
如果我們不這樣寫，可能我們需借助于兩個if語句來進行處理，而上面的代碼不僅簡潔有效，而且可閱讀性強。
仔細想想，好些時候我們都能找到解決問題的有效途徑，但關(guān)鍵在于我們是否用心去尋找一種更好的途徑。
您可能感興趣的文章:
- javascript教程:關(guān)于if簡寫語句優(yōu)化的方法
- nodejs的10個性能優(yōu)化技巧
- JavaScript性能優(yōu)化之小知識總結(jié)
- js性能優(yōu)化 如何更快速加載你的JavaScript頁面
- JavaScript也談內(nèi)存優(yōu)化
- JavaScript定時器和優(yōu)化的取消定時器方法
- JS對img標簽進行優(yōu)化使用onerror顯示默認圖像
- Uglifyjs(JS代碼優(yōu)化工具)入門 安裝使用
- 深入探究JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化
- js 優(yōu)化次數(shù)過多的循環(huán) 考慮到性能問題
- javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
- 整理AngularJS框架使用過程當中的一些性能優(yōu)化要點
- javascript定時器取消定時器及優(yōu)化方法
- JavaScript中對循環(huán)語句的優(yōu)化技巧深入探討
- JS代碼優(yōu)化技巧之通俗版(減少js體積)
- angularjs的一些優(yōu)化小技巧
- Extjs優(yōu)化(二)Form表單提交通用實現(xiàn)
- JS代碼優(yōu)化的8點建議
- JavaScript If Else 語句
相關(guān)文章
有提示確定與取消功能的彈出式窗的代碼...2007-04-04
分享十三個最佳JavaScript數(shù)據(jù)網(wǎng)格庫
數(shù)據(jù)網(wǎng)格可以幫助解決在 HTML 表格上對帶有過濾、分頁、排序、搜索以及內(nèi)聯(lián)編輯這些功能特性的大量數(shù)據(jù)集的處理問題,需要的朋友可以參考下2017-04-04
今天小編就為大家分享一篇在layui中select更改后生效的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序?qū)崿F(xiàn)歷史搜索功能的全過程(h5同理)
最近在使用微信小程序開發(fā)的時候遇到了一個需求,需要實現(xiàn)歷史搜索記錄的功能,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)歷史搜索功能(h5同理)的相關(guān)資料,需要的朋友可以參考下2022-12-12
ES6學習筆記之字符串、數(shù)組、對象、函數(shù)新增知識點實例分析
這篇文章主要介紹了ES6學習筆記之字符串、數(shù)組、對象、函數(shù)新增知識點,結(jié)合實例形式分析了ES6字符串、數(shù)組、對象、函數(shù)新增知識點、使用技巧與操作注意事項,需要的朋友可以參考下2020-01-01
javascript prototype的深度探索不是原型繼承那么簡單
JavaScript中對象的prototype屬性，可以返回對象類型原型的引用。這是一個相當拗口的解釋，要理解它，先要正確理解對象類型(Type)以及原型(prototype)的概念。2008-06-06
javascript hashtable實現(xiàn)代碼
javascript中沒有像c#,java那樣的哈希表(hashtable), 然而，javascript中的Array也只有一些類似于'哈希表'的非常簡單功能。2009-10-10
swiper+echarts實現(xiàn)多個儀表盤左右滾動效果
這篇文章主要為大家詳細介紹了swiper+echarts實現(xiàn)多個儀表盤左右滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本文給大家分享的是一段點擊自動添加inpu節(jié)點的代碼，非常的簡單實用，這里推薦給大家。2014-12-12
這篇文章主要為大家詳細介紹了axios實現(xiàn)簡單文件上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09