Comment remplacer if-else et basculer dans js-js tutoriel-php.cn

Cet article explique principalement comment remplacer if-else et switch dans js. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

1.

Je crois que beaucoup de gens ont cette expérience. Lorsque le projet est occupé, ils envisageront d'abord la mise en œuvre et mettront en œuvre la solution de la meilleure façon possible à ce moment-là. Lorsque le projet n'est pas occupé, ils examineront le code précédent et réfléchiront. à ce sujet. Existe-t-il une meilleure solution de mise en œuvre ou d'optimisation ? L'auteur ne fait pas exception. Permettez-moi de partager avec les lecteurs ma solution récente pour remplacer if-else et basculer dans des situations spécifiques. Si vous avez des idées, veuillez laisser un message dans la zone de commentaires et laissez-nous communiquer davantage.

2.table de recherche au lieu de if-else

Par exemple, vous pouvez rencontrer des exigences similaires à celles-ci : Par exemple, si la cote de crédit d'une certaine plateforme dépasse 700- 950, cela signifie un excellent crédit, 650-700 a un excellent crédit, 600-650 a un bon crédit, 550-600 a un crédit moyen et 350-550 a un mauvais crédit.

La mise en œuvre est très simple

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;
}

Copier après la connexion

Comment remplacer if-else et basculer dans js

Il n'y a pas de problème en fonctionnement, mais il y a aussi des problèmes

1 En. cas de besoins futurs, changement Par exemple, 650-750 signifie un excellent crédit et 750-950 signifie un excellent crédit. C’est donc toute la méthode qui doit être modifiée.

2. Il y a différents nombres magiques dans la méthode : 700, 650, 600, 550. Il peut y avoir des problèmes avec la maintenance future.

3. Il y a trop de if-else, ce qui semble un peu obsessionnel

Utilisons donc une table de recherche pour séparer les données de configuration et la logique métier

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>

Copier après la connexion

L'avantage d'une telle modification est que s'il y a besoin de la modifier, il suffit de modifier graceForLevel et levelText. La logique métier n'a pas besoin d'être modifiée.

Pourquoi est-il recommandé ici de séparer les données de configuration de la logique métier ?

1. La modification des données de configuration est moins coûteuse et moins risquée que la modification de la logique métier
2. Les sources de données de configuration et les modifications. sont possibles Très flexible
3. Il est recommandé de séparer la configuration et la logique métier, afin que vous puissiez trouver plus rapidement le code qui doit être modifié

Si vous souhaitez être plus flexible. , vous pouvez encapsuler une fonction de recherche légèrement plus générale.

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>

Copier après la connexion

Comment remplacer if-else et basculer dans js

Il existe un autre avantage à utiliser les données de configuration recommandées et la séparation de la logique métier, qui n'est pas reflété dans l'exemple ci-dessus. Parlons-en brièvement ci-dessous. Par exemple, saisissez une attraction et indiquez la ville où se trouve l'attraction.

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

Copier après la connexion

Entrez dans la tour de Canton pour retourner à Guangzhou. Entrez dans le lac de l'Ouest et retournez à Hangzhou. Mais une ville a plus d’une attraction, donc certaines personnes ont l’habitude de l’écrire ainsi.

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

Copier après la connexion

S'il y a de nombreuses attractions et que les données sont très longues, cela semble inconfortable. Certaines personnes aiment écrire comme ça

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

Copier après la connexion

Comment remplacer if-else et basculer dans js

. C'est correct, mais le code écrit peut ressembler à ceci,

le style n'est pas uniforme.

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

Copier après la connexion

Même si vous utilisez switch, une telle situation peut se produire

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

Copier après la connexion

Bien que la probabilité que le code ci-dessus apparaisse est très faible, cela se produira après tout. Un tel code pourrait prêter à confusion à l'avenir. Ce problème peut être évité si les données de configuration et la logique métier sont séparées.

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

Copier après la connexion

Certaines personnes ne sont pas habituées à ce que le nom clé d'un objet soit en chinois. Cela peut également être géré de manière flexible

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> De cette façon, si vous souhaitez ajouter des attractions ou des villes correspondantes à l'avenir, vous pouvez uniquement modifier la cityConfig ci-dessus. La logique métier n'a pas besoin d'être modifiée. , et il ne peut pas être modifié. Le style de codage est unifié. <p></p>
<p>Voici un bref résumé des avantages de l'utilisation d'une forme de séparation des données de configuration et de la logique métier<strong></strong></p>
<ol class=" list-paddingleft-2">
<li>Modifier les données de configuration est moins coûteux que de modifier la logique métier, risque moindre<p></p>
</li>
<li>Les sources de données de configuration et les modifications peuvent être très flexibles<p></p>
</li>
<li>La séparation de la configuration et de la logique métier permet une identification plus rapide des modifications nécessaires Les données de configuration du code<p></p>
</li>
<li> et la logique métier peuvent rendre le style de code unifié<p></p>
</li>
</ol>Mais tous les if-else ne recommandent pas cette transformation, certains Il n'est pas recommandé d'utiliser la transformation de recherche en fonction des besoins. Par exemple, s’il n’y a pas beaucoup de if-else et que la logique du jugement if n’est pas utilisée de manière uniforme, il est toujours recommandé d’utiliser la méthode if-else. Mais ce chiffre magique doit être dissipé. <blockquote></blockquote>Par exemple, ce qui suit élimine le besoin d'horodatage entrant et affiche l'heure du commentaire, <p></p>
<p>Publier les commentaires dans l'heure : il y a x minutes<strong></strong></p> <p>Publier les commentaires de 1h à 24h : il y a x heures <strong></strong></p>
<p>Publier les commentaires de 24h à 30 jours : il y a x jours >Avis publiés il y a plus de 30 jours : mois/ jour<strong></strong></p>
<p>Commentaires publiés l'année dernière et datant de plus de 30 jours : commentaires publiés il y a plus de 30 jours : année/mois/jour<strong></strong></p>Ce n'est pas difficile de réaliser, juste quelques si-sinon <p><strong></strong></p>
<p></p>
<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>

Copier après la connexion

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 '微信支付';
    }
}

Copier après la connexion

Comment remplacer if-else et basculer dans js

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

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

Copier après la connexion

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

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

Copier après la connexion

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