亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

在js開發(fā)中，如何減少if else語句的使用

android_c / 2224人閱讀

摘要：第二步盡量少使用如果在函數(shù)中，可以使用，先判斷錯誤條件，然后立馬結(jié)束函數(shù)，防止進入分支。在大多數(shù)情況下，的性能不會比低。

那么問題來了，在js開發(fā)中，如何減少if else語句的使用

代碼中嵌套的if/else結(jié)構(gòu)往往導致代碼不美觀，也不易于理解。面向過程的開發(fā)中代碼有大量的IF ELSE，在java中可以用一些設計模式替換掉這些邏輯，那么在js中是否也有類似的方法用來盡可能減少代碼中的if/else嵌套呢？

有人認為：if else多就多唄，只要可讀性強，維護起來方便。jQuery.fn.init里就是一堆if else判斷，難道要質(zhì)疑jQuery作者的水平了？
并不是說if else多就不好，關(guān)鍵是看用的地方，jQuery.fn.init里除了if else判斷簡潔點，難道要改成switch？就算用工廠模式，還不是得做大量的if判斷。

代碼整潔強迫癥患者必須要來個拋磚引玉：

1. 
if(a為真){
    a=a
}else{
    a=b
}

可寫成：a = a || b

2. 
if(a==b){
    a=c
}else{
    a=d
}

可寫成：a = (a==b) ? c : d

3.

后臺接口通常會返回這種數(shù)據(jù)：
fruit: 0 // 0=蘋果，1=梨子，2=桔子，3=檸檬，4=芒果...
這時寫if...else是最痛苦的。從沖哥那偷來個方法：

var _f = ["蘋果","梨子","桔子","檸檬","芒果"];
shuiguo = _f[fruit];
建議： 第一步：優(yōu)化if邏輯

人們考慮的東西到時候，都會把最可能發(fā)生的情況先做好準備。優(yōu)化if邏輯的時候也可以這樣想：把最可能出現(xiàn)的條件放在前面，把最不可能出現(xiàn)的條件放在后面，這樣程序執(zhí)行時總會按照帶啊名的先后順序逐一檢測所有的條件，知道發(fā)現(xiàn)匹配的條件才會停止繼續(xù)檢測。

if的優(yōu)化目標：最小化找到分支之前所判斷條件體的數(shù)量。if優(yōu)化的方法：將最常見的條件放在首位。

if (i < 5) {
    // 執(zhí)行一些代碼
 } else if (i > 5 && i < 10) {
    // 執(zhí)行一些代碼
 } else {
    // 執(zhí)行一些代碼
 }

例如上面這個例子，只有在i值經(jīng)常出現(xiàn)小于5的時候是最優(yōu)化的。如果i值經(jīng)常大于或者等于10的話，那么在進入正確的分支之前，就必須兩次運算條件體，導致表達式的平均運算時間增加。if中的條件體應該總是按照從最大概率到最小概率排列，以保證理論速度最快。

第二步：盡量少使用else

如果在函數(shù)中，可以使用 if + return，先判斷錯誤條件，然后立馬結(jié)束函數(shù)，防止進入 else 分支。

舉個簡單的例子，后端返回數(shù)據(jù)，前端根據(jù)狀態(tài)進行不同操作

$.ajax().done(function (res) {
    if (res.state === "SUCCESS") {
        //TODO
    } else if (res.state === "FAIL") {
        //TODO
    } else {
        //TODO
    }
});

這里用if else不挺好的么，有啥問題么？不過我個人傾向于switch。

解決方法：

1. switch/case

switch和if else在性能上是沒有什么區(qū)別的，主要還是根據(jù)需求進行分析和選擇。

如果條件較小的話選用if else比較合適。

相反，條件數(shù)量較大的話，就建議選用switch。

一般來說，if else適用于兩個離散的值或者不同的值域。如果判斷多個離散值，使用switch更加合適。

在大多數(shù)的情況下switch比if else運行的更加快。

在大多數(shù)情況下，switch的性能不會比if else低。switch的確在實質(zhì)上跟if else if 完全一樣的效果，不過在很多情況下，使用switch要比if else方便不少

比如經(jīng)典的值等分支，匹配一些狀態(tài)常量的時候，比if else結(jié)構(gòu)方便許多，不用反復寫xx == yy

$.ajax().done(function (res) {
    switch (res.state) {
        case "SUCCESS":
            //TODO
            break;
        case "FAIL":
            //TODO
            break;
        default :
            //TODO
    }
});

注意：千萬不要忘記在每一個case語句后面放一個break語句。也可以放一個return或者throw。case語句匹配expression是用===而不是==。

2.hash 表 
if (key == "Apple") {
    val = "Jobs";
} else if (key == "microsoft"){
    val = "Gates";
} else if (key == "Google"){
    val = "Larry";
}

這個也可以用 switch case 解決，不過推薦的方法是 hash 表：

var ceos = {"Apple":"Jobs", "microsoft":"Gates", "Google":"Larry"};
val = ceos[key];
3.重構(gòu)，用 OO 里面的繼承或者組合 
1.如果是狗，則汪汪
2.如果是貓，則喵喵
3.如果是羊，則咩咩
4.如果是鴨，則嘎嘎

可以重構(gòu)一下，改成 OO。

*定義類： 動物（或者接口）
*定義方法：叫
*定義子類：狗、貓、羊、鴨
*重寫方法 ----  叫

也就是說將同的判斷按照功能，寫成函數(shù)，這樣也便于閱讀

比如我有一個方法根據(jù)類型獲取名稱，用if else會這樣

function getName(type) {
    if (type === "monkey") {
        return "monkey name";
    } else if (type === "cat") {
        return "cat name";
    } else {
        return "dog name";
    }
}

如果寫成函數(shù)，改成下面的會更好

function getName(type) {
    var data = {
        monkey: "monkey name",
        cat: "cat name",
        dog: "dog name"
    }

    return data[type] ? data[type] : data["dog"];
}

硬要把設計模式添加到JS里不是不可以，但是要看情況。生搬硬套過來的東西然并卵啊。
寫代碼記住三個字即可，短簡易。代碼短，讀起來簡單，維護容易，如果在性能和代碼長度上二選一，我肯定選代碼短，性能不行，加臺服務器就是了。而冗長的代碼并不是加個程序員就能搞定的。

保持著這個心態(tài)寫代碼，寫出的東西離設計模式也不會差太多了。

多說一句：存在必有其價值，不能說if else多了就不好，凡事無絕對，適合A的未必就適合B，每個東西都有其實現(xiàn)的場景。同理改寫設計模式未必就是最棒的，聽起來高大上點而已。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79090.html

相關(guān)文章

  • 前端開發(fā)面試題

    摘要：總結(jié)了一些優(yōu)質(zhì)的前端面試題多數(shù)源于網(wǎng)絡，初學者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學習，透徹學習，形成自己的知識鏈。如果需要使用，最好是通過動態(tài)給添加屬性值，這樣可以可以繞開以上兩個問題。 markyun 總結(jié)了一些優(yōu)質(zhì)的前端面試題（多數(shù)源于網(wǎng)絡），初學者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學習，透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關(guān)是錯誤的！ sho...

    roland_reed 評論0 收藏0

  • 前端開發(fā)面試題

    摘要：總結(jié)了一些優(yōu)質(zhì)的前端面試題多數(shù)源于網(wǎng)絡，初學者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學習，透徹學習，形成自己的知識鏈。如果需要使用，最好是通過動態(tài)給添加屬性值，這樣可以可以繞開以上兩個問題。 markyun 總結(jié)了一些優(yōu)質(zhì)的前端面試題（多數(shù)源于網(wǎng)絡），初學者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學習，透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關(guān)是錯誤的！ sho...

    stormgens 評論0 收藏0

  • 12個常用的javascript簡寫技巧---可以大大減少js代碼量

    摘要：極大的簡化了代碼量變量聲明盡管會自動講變量上提，使用該方法可以講所有的變量都在函數(shù)的頭部用一行搞定。簡化前簡化后譯者譯文原文 微信公眾號 個人博客 知乎 本文是并非本人所寫，只是我看了覺得對自己很有幫助，所以分享給大家，原文鏈接在最下面，謝謝觀看。1. 空(null, undefined)驗證當我們創(chuàng)建了一個新的變量，我們通常會去驗證該變量的值是否為空(null)或者未定...

    kyanag 評論0 收藏0

  • webpack優(yōu)化

    摘要：使用要給項目構(gòu)建接入動態(tài)鏈接庫的思想，需要完成以下事情把網(wǎng)頁依賴的基礎模塊抽離出來，打包到一個個單獨的動態(tài)鏈接庫中去。接入已經(jīng)內(nèi)置了對動態(tài)鏈接庫的支持，需要通過個內(nèi)置的插件接入，它們分別是插件用于打包出一個個單獨的動態(tài)鏈接庫文件。 webpack優(yōu)化 查看所有文檔頁面：全棧開發(fā)，獲取更多信息。原文鏈接：webpack優(yōu)化，原文廣告模態(tài)框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...

    ChanceWong 評論0 收藏0

  • webpack4.0優(yōu)化那些事兒

    摘要：配置以何種方式導出庫。當檢測文件不再發(fā)生變化，會先緩存起來，等等待一段時間后之后再通知監(jiān)聽者，這個等待時間通過配置。發(fā)布到線上給用戶使用的運行環(huán)境。 一 縮小文件搜索范圍 1 include & exclude 1) action 限制編譯范圍 2) useage module: { rules: [ { test...

    levy9527 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<