Heim > Artikel > Web-Frontend > So ersetzen Sie if-else und wechseln in js

So ersetzen Sie if-else und wechseln in js

不言Original: 2018-07-16 09:56:494267Durchsuche

Dieser Artikel stellt hauptsächlich vor, wie man if-else und switch in js ersetzt. Jetzt kann ich ihn mit Ihnen teilen

Vorwort

Ich glaube, dass viele Leute diese Erfahrung machen, wenn das Projekt beschäftigt ist, sie werden zuerst über die Implementierung nachdenken und die beste Methode zur Implementierung der Lösung verwenden. Wenn das Projekt nicht beschäftigt ist, schauen Sie sich den vorherigen Code an und denken Sie darüber nach . Gibt es eine bessere Implementierungslösung oder Optimierungslösung? Der Autor ist keine Ausnahme. Lassen Sie mich meine aktuelle Lösung zum Ersetzen von if-else und switch in bestimmten Situationen mit den Lesern teilen. Wenn Sie Ideen haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich und lassen Sie uns mehr kommunizieren.

2. Nachschlagetabelle anstelle von if-else

Zum Beispiel können Anforderungen ähnlich den folgenden auftreten: Wenn beispielsweise die Kreditwürdigkeit einer bestimmten Plattform 700 überschreitet- 950 bedeutet, dass die Kreditwürdigkeit ausgezeichnet ist, 650-700 hat eine ausgezeichnete Kreditwürdigkeit, 600-650 hat eine gute Kreditwürdigkeit, 550-600 hat eine mittlere Kreditwürdigkeit und 350-550 hat eine schlechte Kreditwürdigkeit.

Die Implementierung ist sehr einfach

function showGrace(grace) {
    let _level='';
    if(grace>=700){
        _level='信用极好'
    }
    else if(grace>=650){
        _level='信用优秀'
    }
    else if(grace>=600){
        _level='信用良好'
    }
    else if(grace>=550){
        _level='信用中等'
    }
    else{
        _level='信用较差'
    }
    return _level;
}

So ersetzen Sie if-else und wechseln in js

Es gibt kein Problem beim Laufen, aber es gibt auch Probleme

1 zukünftige Nachfrage, ändern Sie das Beispiel 650-750 bedeutet ausgezeichnete Bonität und 750-950 bedeutet ausgezeichnete Bonität. Auf diese Weise muss die gesamte Methode geändert werden.

2. Es gibt verschiedene magische Zahlen in der Methode: 700, 650, 600, 550. Bei zukünftigen Wartungsarbeiten kann es zu Problemen kommen.

3. Es gibt zu viele if-else, was etwas aufdringlich aussieht

Also verwenden wir eine Nachschlagetabelle, um die Konfigurationsdaten und die Geschäftslogik zu trennen

function showGrace(grace) {
    let graceForLevel=[700,650,600,550];
    let levelText=['信用极好','信用优秀','信用良好','信用中等','信用较差'];
    for(let i=0;i<graceforlevel.length>=graceForLevel[i]){
            return levelText[i];
        }
    }
    //如果不存在，那么就是分数很低，返回最后一个
    return levelText[levelText.length-1];
}</graceforlevel.length>

Der Vorteil einer solchen Änderung besteht darin, dass Sie bei Änderungsbedarf nur GraceForLevel und LevelText ändern müssen. Die Geschäftslogik muss nicht geändert werden.

Warum wird hier empfohlen, Konfigurationsdaten von der Geschäftslogik zu trennen?

1. Das Ändern von Konfigurationsdaten ist billiger und weniger riskant als das Ändern der Geschäftslogik.
2 sind möglich Sehr flexibel
3. Es wird empfohlen, Konfiguration und Geschäftslogik zu trennen, damit Sie den Code, der geändert werden muss, schneller finden

Wenn Sie flexibler sein möchten können Sie eine etwas allgemeinere Suchfunktion kapseln.

function showGrace(grace,level,levelForGrace) {
    for(let i=0;i<level.length>=level[i]){
            return levelForGrace[i];
        }
    }
    //如果不存在，那么就是分数很低，返回最后一个
    return levelForGrace[levelText.length-1];
}
let graceForLevel=[700,650,600,550];
let levelText=['信用极好','信用优秀','信用良好','信用中等','信用较差'];</level.length>

So ersetzen Sie if-else und wechseln in js

Die Verwendung der empfohlenen Konfigurationsdaten und der Trennung der Geschäftslogik bietet einen weiteren Vorteil, der im obigen Beispiel nicht widergespiegelt wird. Geben Sie beispielsweise eine Attraktion ein und geben Sie die Stadt an, in der sich die Attraktion befindet.

function getCityForScenic(scenic) {
    let _city=''
    if(scenic==='广州塔'){
        _city='广州'
    }
    else if(scenic==='西湖'){
        _city='杭州'
    }
    return _city;
}

Betreten Sie den Canton Tower, um nach Guangzhou zurückzukehren. Betreten Sie West Lake und kehren Sie nach Hangzhou zurück. Aber eine Stadt hat mehr als eine Attraktion, deshalb sind es manche Leute gewohnt, sie so zu schreiben.

if(scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'){
    _city='广州'
}

Wenn es viele Attraktionen gibt und die Daten sehr lang sind, sieht es unangenehm aus. Manche Leute schreiben gerne so

let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街']
if(~scenicOfHangZhou.indexOf(scenic)){
    _city='杭州'
}

So ersetzen Sie if-else und wechseln in js

Das ist richtig, aber der geschriebene Code Es könnte wie folgt aussehen:

Der Stil ist nicht einheitlich.

function getCityForScenic(scenic) {
    let _city='';
    let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街'];
    if(scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'){
        _city='广州'
    }
    else if(~scenicOfHangZhou.indexOf(scenic)){
        _city='杭州'
    }
    return _city;
}

Selbst wenn Sie den Schalter verwenden, kann eine solche Situation auftreten

function getCityForScenic(scenic) {
    let _city='';
    let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街'];
    switch(true){
        case (scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'):_city='广州';break;
        case (!!~scenicOfHangZhou.indexOf(scenic)):return '杭州';   
    }
    return     _city;
}

Obwohl die Wahrscheinlichkeit, dass der obige Code erscheint, sehr gering ist, wird er doch passieren. Ein solcher Code könnte in Zukunft zu Verwirrung führen. Dieses Problem kann vermieden werden, wenn Konfigurationsdaten und Geschäftslogik getrennt werden.

function getCityForScenic(scenic) {
    let cityConfig={
        '广州塔':'广州',
        '花城广场':'广州',
        '白云山':'广州',
        '西湖':'杭州',
        '湘湖':'杭州',
        '京杭大运河':'杭州',
        '砂之船生活广场':'杭州',
        '南宋御街':'杭州',
    }
    
    return cityConfig[scenic];
}

Manche Leute sind es nicht gewohnt, dass der Schlüsselname des Objekts auf Chinesisch ist. Es kann auch flexibel gehandhabt werden

function getCityForScenic(scenic) {
    let cityConfig=[
        {
            scenic:'广州塔',
            city:'广州'
        },
        {
            scenic:'花城广场',
            city:'广州'
        },
        {
            scenic:'白云山',
            city:'广州'
        },
        {
            scenic:'西湖',
            city:'杭州'
        },
        {
            scenic:'湘湖',
            city:'杭州'
        },
        {
            scenic:'京杭大运河',
            city:'杭州'
        },
        {
            scenic:'砂之船生活广场',
            city:'杭州'
        }
    ]
    for(let i=0;i<cityconfig.length></cityconfig.length>

Wenn Sie in Zukunft Attraktionen oder entsprechende Städte hinzufügen möchten, können Sie nur die obige Stadtkonfiguration ändern. Die Geschäftslogik muss nicht geändert werden es kann nicht geändert werden. Der Codierungsstil ist einheitlich.

Hier finden Sie eine kurze Zusammenfassung der Vorteile einer Form der Trennung von Konfigurationsdaten und Geschäftslogik

Das Ändern von Konfigurationsdaten ist kostengünstiger Das Risiko ist geringer als das Ändern der Geschäftslogik.
Konfigurationsdatenquellen und -änderungen können sehr flexibel sein.
Die Trennung von Konfiguration und Geschäftslogik ermöglicht Ihnen um Änderungen zu finden, die schneller vorgenommen werden müssen Der Code
Konfigurationsdaten und Geschäftslogik können den Codestil vereinheitlichen

Aber nicht alle wenn -else empfiehlt diese Transformation, einige Es wird nicht empfohlen, die Suchtransformation entsprechend den Anforderungen zu verwenden. Wenn es beispielsweise nicht viele if-else gibt und die Logik der if-Beurteilung nicht einheitlich verwendet wird, wird dennoch empfohlen, die if-else-Methode zu verwenden. Aber die magische Zahl muss geklärt werden.

Zum Beispiel macht das Folgende die Notwendigkeit eingehender Zeitstempel überflüssig und zeigt die Kommentarzeit an:

Kommentare innerhalb von 1 Stunde veröffentlichen: vor x Minuten

Gepostete Kommentare von 1 Stunde bis 24 Stunden: vor x Stunden

Gepostete Kommentare von 24 Stunden bis 30 Tagen: vor x Tagen >Kommentare, die vor mehr als 30 Tagen veröffentlicht wurden: Monat/ Tag

Kommentare, die letztes Jahr veröffentlicht wurden und mehr als 30 Tage alt sind: Kommentare, die vor mehr als 30 Tagen veröffentlicht wurden: Jahr/Monat/Tag

Es ist nicht schwierig zu erreichen, nur ein paar if-else

function formatDate(timeStr){
    //获取当前时间戳
    let _now=+new Date();
    //求与当前的时间差
    let se=_now-timeStr;
    let _text='';
    //去年
    if(new Date(timeStr).getFullYear()!==new Date().getFullYear()&&se>2592000000){
      _text=new Date(timeStr).getFullYear()+'年'+(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
    }
    //30天以上
    else if(se>2592000000){
      _text=(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
    }
    //一天以上
    else if(se>86400000){
      _text=Math.floor(se/86400000)+'天前';
    }
    //一个小时以上
    else if(se>3600000){
      _text=Math.floor(se/3600000)+'小时前';
    }
    //一个小时以内
    else{
      //如果小于1分钟，就显示1分钟前
      if(se<strong></strong><p>运行结果没问题，但是也存在一个问题，就是这个需求有神仙数字：2592000000，86400000，3600000，60000。对于后面维护而言，一开始可能并不知道这个数字是什么东西。</p><p>所以下面就消灭神仙数字，常量化</p><pre class="brush:php;toolbar:false">function formatDate(timeStr){
    //获取当前时间戳
    let _now=+new Date();
    //求与当前的时间差
    let se=_now-timeStr;
    const DATE_LEVEL={
      month:2592000000,
      day:86400000,
      hour:3600000,
      minter:60000,
    }
    let _text='';
    //去年
    if(new Date(timeStr).getFullYear()!==new Date().getFullYear()&&se>DATE_LEVEL.month){
      _text=new Date(timeStr).getFullYear()+'年'+(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
    }
    //一个月以上
    else if(se>DATE_LEVEL.month){
      _text=(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
    }
    //一天以上
    else if(se>DATE_LEVEL.day){
      _text=Math.floor(se/DATE_LEVEL.day)+'天前';
    }
    //一个小时以上
    else if(se>DATE_LEVEL.hour){
      _text=Math.floor(se/DATE_LEVEL.hour)+'小时前';
    }
    //一个小时以内
    else{
      //如果小于1分钟，就显示1分钟前
      if(se<date_level.minter><p>运行结果也是正确的，代码多了，但是神仙数字没了。可读性也不差。</p>
<blockquote>这里也顺便提一下，如果硬要把上面的需求改成look-up的方式，代码就是下面这样。这样代码的修改的扩展性会强一些，成本会小一些，但是可读性不如上面。取舍关系，实际情况，实际分析。</blockquote>
<pre class="brush:php;toolbar:false">function formatDate(timeStr){
    //获取当前时间戳
    let _now=+new Date();
    //求与当前的时间差
    let se=_now-timeStr;
    let _text='';
    //求上一年最后一秒的时间戳
    let lastYearTime=new Date(new Date().getFullYear()+'-01-01 00:00:00')-1;
    //把时间差添加进去（当前时间戳与上一年最后一秒的时间戳的差）添加进去，如果时间差（se）超过这个值，则代表了这个时间是上一年的时间。
    //DATE_LEVEL.unshift(_now-lastYearTime);
    const DATE_LEVEL={
      month:2592000000,
      day:86400000,
      hour:3600000,
      minter:60000,
    }
    let handleFn=[
        {
            time:DATE_LEVEL.month,
            fn:function(timeStr){
                return (new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
            }
        },
        {
            time:DATE_LEVEL.day,
            fn:function(timeStr){
                return Math.floor(se/DATE_LEVEL.day)+'天前';
            }
        },
        {
            time:DATE_LEVEL.hour,
            fn:function(timeStr){
                return Math.floor(se/DATE_LEVEL.hour)+'小时前';
            }
        },
        {
            time:DATE_LEVEL.minter,
            fn:function(timeStr){
                return Math.ceil(se/DATE_LEVEL.minter)+'分钟前';
            }
        } 
    ];
    //求上一年最后一秒的时间戳
    let lastYearTime=new Date(new Date().getFullYear()+'-01-01 00:00:00')-1;
    //把时间差（当前时间戳与上一年最后一秒的时间戳的差）和操作函数添加进去，如果时间差（se）超过这个值，则代表了这个时间是上一年的时间。
    handleFn.unshift({
        time:_now-lastYearTime,
        fn:function(timeStr){
            if(se>DATE_LEVEL.month){
                return new Date(timeStr).getFullYear()+'年'+(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
                
            }
        },
    });
    let result='';
    for(let i=0;i<handlefn.length>=handleFn[i].time){
            result=handleFn[i].fn(timeStr);
            if(result){
                return result;
            }
        }
    }
    //如果发布时间小于1分钟，之际返回1分钟
    return result='1分钟前'
}</handlefn.length>

3.配置对象代替switch

比如有一个需求：传入cash，check，draft，zfb，wx_pay，对应输出：现金，支票，汇票，支付宝，微信支付。

需求也很简单，就一个switch就搞定了

function getPayChanne(tag){
    switch(tag){
        case 'cash':return '现金';
        case 'check':return '支票';
        case 'draft':return '汇票';
        case 'zfb':return '支付宝';
        case 'wx_pay':return '微信支付';
    }
}

So ersetzen Sie if-else und wechseln in js

但是这个的硬伤还是和上面一样，万一下次又要多加一个如：bank_trans对应输出银行转账呢，代码又要改。类似的问题，同样的解决方案，配置数据和业务逻辑分离。代码如下。

function getPayChanne(tag){
    let payChanneForChinese = {
        'cash': '现金',
        'check': '支票',
        'draft': '汇票',
        'zfb': '支付宝',
        'wx_pay': '微信支付',
    };
    return payChanneForChinese[tag];
}

同理，如果想封装一个通用的，也可以的

let payChanneForChinese = {
    'cash': '现金',
    'check': '支票',
    'draft': '汇票',
    'zfb': '支付宝',
    'wx_pay': '微信支付',
};
function getPayChanne(tag,chineseConfig){
    return chineseConfig[tag];
}
getPayChanne('cash',payChanneForChinese);

这里使用对象代替 switch 好处就在于

使用对象不需要 switch 逐个 case 遍历判断。
使用对象，编写业务逻辑可能更灵活
使用对象可以使得配置数据和业务逻辑分离。好处参考上一部分内容。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

In Verbindung stehende Artikel

Mehr sehen