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

android_c 發布于2019-08-19 18:01 / 2163人閱讀

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

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

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

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

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

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

可寫成：a = a || b

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

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

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

var _f = ["蘋果","梨子","桔子","檸檬","芒果"];
shuiguo = _f[fruit];

建議： 第一步：優化if邏輯

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

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

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

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

第二步：盡量少使用else

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

舉個簡單的例子，后端返回數據，前端根據狀態進行不同操作

$.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在性能上是沒有什么區別的，主要還是根據需求進行分析和選擇。

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

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

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

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

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

比如經典的值等分支，匹配一些狀態常量的時候，比if else結構方便許多，不用反復寫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.重構，用 OO 里面的繼承或者組合

1.如果是狗，則汪汪
2.如果是貓，則喵喵
3.如果是羊，則咩咩
4.如果是鴨，則嘎嘎

可以重構一下，改成 OO。

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

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

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

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

如果寫成函數，改成下面的會更好

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

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

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

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

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

云服務器 GPU云服務器 js的if判斷語句 if else if if-else webrtc如何在web中使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79090.html

前端開發面試題

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

roland_reed 2019-08-28 17:51 評論0 收藏0
前端開發面試題

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

stormgens 2019-08-01 14:36 評論0 收藏0
12個常用的javascript簡寫技巧---可以大大減少js代碼量

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

kyanag 2019-08-21 11:51 評論0 收藏0
webpack優化

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

ChanceWong 2019-08-22 17:34 評論0 收藏0
webpack4.0優化那些事兒

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

levy9527 2019-08-22 15:57 評論0 收藏0