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

android_c 發(fā)布于2019-08-19 18:01 / 2172人閱讀

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

那么問(wèn)題來(lái)了，在js開(kāi)發(fā)中，如何減少if else語(yǔ)句的使用

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

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

代碼整潔強(qiáng)迫癥患者必須要來(lái)個(gè)拋磚引玉：

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

可寫(xiě)成：a = a || b

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

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

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

var _f = ["蘋(píng)果","梨子","桔子","檸檬","芒果"];
shuiguo = _f[fruit];

建議： 第一步：優(yōu)化if邏輯

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

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

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

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

第二步：盡量少使用else

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

舉個(gè)簡(jiǎn)單的例子，后端返回?cái)?shù)據(jù)，前端根據(jù)狀態(tài)進(jìn)行不同操作

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

這里用if else不挺好的么，有啥問(wèn)題么？不過(guò)我個(gè)人傾向于switch。

解決方法：

1. switch/case

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

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

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

一般來(lái)說(shuō)，if else適用于兩個(gè)離散的值或者不同的值域。如果判斷多個(gè)離散值，使用switch更加合適。

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

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

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

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

注意：千萬(wàn)不要忘記在每一個(gè)case語(yǔ)句后面放一個(gè)break語(yǔ)句。也可以放一個(gè)return或者throw。case語(yǔ)句匹配expression是用===而不是==。

2.hash 表

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

這個(gè)也可以用 switch case 解決，不過(guò)推薦的方法是 hash 表：

var ceos = {"Apple":"Jobs", "microsoft":"Gates", "Google":"Larry"};
val = ceos[key];

3.重構(gòu)，用 OO 里面的繼承或者組合

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

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

*定義類(lèi)： 動(dòng)物（或者接口）
*定義方法：叫
*定義子類(lèi)：狗、貓、羊、鴨
*重寫(xiě)方法 ----  叫

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

比如我有一個(gè)方法根據(jù)類(lèi)型獲取名稱(chēng)，用if else會(huì)這樣

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

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

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

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

硬要把設(shè)計(jì)模式添加到JS里不是不可以，但是要看情況。生搬硬套過(guò)來(lái)的東西然并卵啊。
寫(xiě)代碼記住三個(gè)字即可，短簡(jiǎn)易。代碼短，讀起來(lái)簡(jiǎn)單，維護(hù)容易，如果在性能和代碼長(zhǎng)度上二選一，我肯定選代碼短，性能不行，加臺(tái)服務(wù)器就是了。而冗長(zhǎng)的代碼并不是加個(gè)程序員就能搞定的。

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

多說(shuō)一句：存在必有其價(jià)值，不能說(shuō)if else多了就不好，凡事無(wú)絕對(duì)，適合A的未必就適合B，每個(gè)東西都有其實(shí)現(xiàn)的場(chǎng)景。同理改寫(xiě)設(shè)計(jì)模式未必就是最棒的，聽(tīng)起來(lái)高大上點(diǎn)而已。

GPU云服務(wù)器云服務(wù)器 js的if判斷語(yǔ)句 if else if if-else webrtc如何在web中使用

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79090.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

android_c

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#黑五# racknerd：美國(guó)便宜VPS低至$10.88/年，可選6個(gè)機(jī)房（洛杉磯，圣何塞，西雅圖

閱讀 2437·2021-11-23 10:04
九款程序員必備工具，老少皆宜

閱讀 1511·2021-09-02 15:21
常見(jiàn)的面試問(wèn)題：【CSS】CSS盒模型

閱讀 903·2019-08-30 15:44
CSS3動(dòng)畫(huà)簡(jiǎn)單案例

閱讀 1075·2019-08-30 10:48
純css修改瀏覽器scrollbar滾動(dòng)條樣式

閱讀 721·2019-08-29 17:21
2000! | 看上去如此簡(jiǎn)單的面試題，讓太多“前端”英雄好漢折戟

閱讀 3567·2019-08-29 13:13
4.7 multer文件上傳-博客后端Api-NodeJs+Express+Mysql實(shí)戰(zhàn)

閱讀 1992·2019-08-23 17:17
前端小知識(shí)10點(diǎn)（2019.4.14）

閱讀 1798·2019-08-23 17:04

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

**前端開(kāi)發(fā)面試題**

**前端開(kāi)發(fā)面試題**

12個(gè)常用的javascript簡(jiǎn)寫(xiě)技巧---可以大大減少js代碼量

webpack優(yōu)化

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

發(fā)表評(píng)論

0條評(píng)論

android_c

男|高級(jí)講師

TA的文章

#黑五# racknerd：美國(guó)便宜VPS低至$10.88/年，可選6個(gè)機(jī)房（洛杉磯，圣何塞，西雅圖

九款程序員必備工具，老少皆宜

常見(jiàn)的面試問(wèn)題：【CSS】CSS盒模型

CSS3動(dòng)畫(huà)簡(jiǎn)單案例

純css修改瀏覽器scrollbar滾動(dòng)條樣式

2000! | 看上去如此簡(jiǎn)單的面試題，讓太多“前端”英雄好漢折戟

4.7 multer文件上傳-博客后端Api-NodeJs+Express+Mysql實(shí)戰(zhàn)

前端小知識(shí)10點(diǎn)（2019.4.14）

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

在js開(kāi)發(fā)中，如何減少if else語(yǔ)句的使用

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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