Éliminez if else et rendez votre code plus élégant

La colonne

javascript présente comment éliminer if else et rendre votre code plus élégant. Jetons un coup d'œil.

Avant-propos

Il devrait y avoir beaucoup d'étudiants qui ont J'ai rencontré cela, j'ai vu du code plein de if else. Face à un tel gâchis, continuer simplement et grossièrement à apporter des modifications incrémentielles ne fera souvent que rendre la complexité de plus en plus élevée et la lisibilité de pire en pire. Alors il est temps de refactoriser, prenez quelques minutes pour lire cet article, il vous sera peut-être utile.

Scénario 1 : Afficher le nom correspondant selon le statut

Solution d'optimisation 1 : objet objet

const statusStr = {
  '1': '待付款',
  '2': '待发货',
  '3': '已发货',
  '4': '交易完成',
  '5': '交易关闭',
  'default': '',
}
const getStatus = (status) =>{
  return statusStr[status] || statusStr['default']
}

jugera La condition est utilisée comme nom d'attribut de l'objet et la logique de traitement est utilisée comme valeur d'attribut de l'objet. Lorsque vous cliquez sur le bouton, un jugement logique est effectué en recherchant les attributs de l'objet.

Plan d'optimisation 2 : Objet Map

const statusStr = new map([
  '1': ['待付款'],
  '2': ['待发货'],
  '3': ['已发货'],
  '4': ['交易完成'],
  '5': ['交易关闭'],
  'default': [''],
])
const getStatus = (status) =>{
  let actions = statusStr.get(status) || statusStr.get('default')
  return  actions[0];
}

Cette écriture utilise l'objet Map dans es6, alors quelle est la différence entre l'objet Map et l'objet Object ?

Un objet a généralement son propre prototype, donc un objet a toujours une clé "prototype". Les clés d'un objet ne peuvent être que des chaînes ou des symboles, mais les clés d'une carte peuvent être n'importe quelle valeur. Vous pouvez facilement obtenir le nombre de paires clé-valeur dans une carte via l'attribut size, tandis que le nombre de paires clé-valeur dans un objet ne peut être confirmé que manuellement.

Scénario 2 : Noms correspondants à plusieurs conditions

Améliorons maintenant le problème. Dans le passé, il vous suffisait de juger l'état en cliquant. le bouton, mais maintenant vous devez encore déterminer l'identité de l'utilisateur :
"Par exemple :"

const onButtonClick = (status,identity)=>{
  if(identity == 'guest'){
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }else if(identity == 'master') {
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }
}

À partir de l'exemple ci-dessus, nous pouvons voir que lorsque votre logique est mise à niveau vers le jugement binaire, la quantité de votre jugement doublera et votre code Le volume doublera également. Comment pouvons-nous écrire plus clairement en ce moment ?

Plan d'optimisation 1 : stocker la condition dans l'objet Map sous forme d'épissage de caractères

const actions = new Map([
  ['guest_1', ()=>{/*do sth*/}],
  ['guest_2', ()=>{/*do sth*/}],
  ['guest_3', ()=>{/*do sth*/}],
  ['guest_4', ()=>{/*do sth*/}],
  ['guest_5', ()=>{/*do sth*/}],
  ['master_1', ()=>{/*do sth*/}],
  ['master_2', ()=>{/*do sth*/}],
  ['master_3', ()=>{/*do sth*/}],
  ['master_4', ()=>{/*do sth*/}],
  ['master_5', ()=>{/*do sth*/}],
  ['default', ()=>{/*do sth*/}],
])
const onButtonClick = (identity,status)=>{
  let action = actions.get(`${identity}_${status}`) || actions.get('default')
  action.call(this)
}

La logique de base du code ci-dessus est la suivante : fusionner les deux conditions en une chaîne, et passez Recherchez et exécutez l'objet Map en utilisant des chaînes de concaténation conditionnelle comme clés et des fonctions de traitement comme valeurs. Cette méthode d'écriture est particulièrement utile pour juger plusieurs conditions.

Plan d'optimisation 2 : Stocker la condition dans l'objet Objet sous forme d'épissage de caractères

const actions = {
  'guest_1':()=>{/*do sth*/},
  'guest_2':()=>{/*do sth*/},
  //....
}
const onButtonClick = (identity,status)=>{
  let action = actions[`${identity}_${status}`] || actions['default']
  action.call(this)
}

Plan d'optimisation 3 : Stocker la condition dans l'objet Map sous la forme d'un objet Object

Il peut être un peu gênant d'épeler les conditions de requête dans une chaîne. Il existe une autre solution, qui consiste à utiliser un objet Map et à utiliser l'objet Object comme clé. :

const actions = new Map([
  [{identity:'guest',status:1},()=>{/*do sth*/}],
  [{identity:'guest',status:2},()=>{/*do sth*/}],
  //...
])
const onButtonClick = (identity,status)=>{
  let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status))
  action.forEach(([key,value])=>value.call(this))
}

Scénario 3 : Effectuer les opérations correspondantes en fonction du statut

"Par exemple :"

function init () {
    if (isAnswer === 1) {
        if (isOldUser === 1) {
            // ...
        } else if (isOldUser === 2) {
            // ...
        }
    } else if (isAnswer === 2) {
        if (isOldUser === 1) {
            // ...
        } else if (isOldUser === 2) {
            // ...
        }
    } else if (isAnswer === 3) {
        if (isOldUser === 1) {
            // ...
        } else if (isOldUser === 2) {
            // ...
        }
    }
}

Plan d'optimisation 1 : Table de recherche, table de recherche de chaîne de responsabilité

const rules = [
    {
        match (an, old) {if (an === 1) {return true}},
        action (an, old) {
        if (old === 1) {// ...} 
        else if (old === 2) {// ...}
        }
    },
    {
        match (an, old) { if (an === 2) {return true } },
        action (an, old) {
            if (old === 1) {// ...} 
            else if (old === 2) {// ...}
        }
    },
    {
        match (an, old) {if (an === 3) {return true}},
        action (an, old) {
            if (old === 1) {// ...} 
            else if (old === 2) {// ...}
        }
    }
]
function init (an, old) {
    for (let i = 0; i < rules.length; i++) {
        // 如果返回true
        if (rules[i].match(an, old)) {
            rules[i].action(an, old)
        }
    }
}
init(isAnswer, isOldUser)

Bien que cela puisse sembler une solution temporaire mais pas la cause profonde, ce n'est pas le cas La complexité de l'initialisation. la fonction est considérablement réduite. Nous avons divisé la logique complexe du flux de contrôle en fonction déterminerAction

Plan d'optimisation 2 : Programmation fonctionnelle

import R from 'ramda'
var fn = R.cond([
  [R.equals(0),   R.always('water freezes at 0°C')],
  [R.equals(100), R.always('water boils at 100°C')],
  [R.T,           temp => 'nothing special happens at ' + temp + '°C']
]);
fn(0); //=> 'water freezes at 0°C'
fn(50); //=> 'nothing special happens at 50°C'
fn(100); //=> 'water boils at 100°C'

Scénario 4 : Traitement différent est effectué selon le périmètre

"Par exemple :" Par exemple, vous pouvez rencontrer des besoins similaires aux suivants : Par exemple, la cote de crédit d'une certaine plateforme, si elle dépasse 700-950, c'est un crédit Excellent, 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.

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

Solution d'optimisation 1 : utiliser des tables de recherche pour séparer les données de configuration et la logique métier

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

Résumé

Dans de nombreux cas, nous pouvons utiliser des méthodes plus flexibles pour remplacer if else et changer, mais pas tous if else doivent être remplacés, selon la situation.

Autres apprentissages gratuits connexes : javascript(Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!