Évitez d'utiliser trop d'instructions if dans les scripts JS. Voici 6 façons de remplacer if.

Tutoriel recommandé : "Tutoriel vidéo JavaScript"

Lorsque j'ai refactorisé le code récemment, j'ai trouvé que le premier code en utilisait trop if déclaration à un degré que je n'ai jamais vu auparavant. C'est pourquoi je pense qu'il est important de partager ces conseils simples qui peuvent nous aider à éviter d'utiliser trop de déclarations if.

Ensuite, nous présenterons 6 façons de remplacer l'utilisation de if. Il ne s'agit pas d'être paranoïaque à l'idée de ne pas utiliser if, mais de réfléchir à nos idées de codage d'une manière différente.

1. Opérateur ternaire

Cas 1

Code avec IF :

function saveCustomer(customer) {
  if (isCustomerValid(customer)) {
    database.save(customer)
  } else {
    alert('customer is invalid')
  }
}

Code refactorisé :

function saveCustomer(customer) {
  return isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')
}

Utilisation d'ES6

const saveCustomer = customer =>
   isCustomerValid(customer)?
     database.save(customer) : alert('customer is invalid')

Cas 2

Code avec IF :

function customerValidation(customer) {
  if (!customer.email) {
    return error('email is require')
  } else if (!customer.login) {
    return error('login is required')
  } else if (!customer.name) {
    return error('name is required')
  } else {
    return customer
  }
}

Code refactorisé :

const customerValidation = customer =>
  !customer.email   ? error('email is required')
  : !customer.login ? error('login is required')
  : !customer.name  ? error('name is required')
                    : customer

Exemple 3

Code avec IF :

function getEventTarget(evt) {
    if (!evt) {
        evt = window.event;
    }
    if (!evt) {
        return;
    }
    const target;
    if (evt.target) {
        target = evt.target;
    } else {
        target = evt.srcElement;
    }
    return target;
}

Code refactorisé :

function getEventTarget(evt) {
  evt = evt || window.event;
  return evt && (evt.target || evt.srcElement);
}

2. Opérateur de court-circuit

Cas 1

Code avec IF :

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

if (isOnline){
    makeReservation(user);
}

Code refactorisé :

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

isOnline&&makeReservation(user);

Exemple 2

Code avec IF :

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

if (active&&loan){
    sendMoney();
}

Code refactorisé :

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

active && loan && sendMoney();

Délégué de fonction :

Cas 1

Code avec IF :

function itemDropped(item, location) {
    if (!item) {
        return false;
    } else if (outOfBounds(location) {
        var error = outOfBounds;
        server.notify(item, error);
        items.resetAll();
        return false;
    } else {
        animateCanvas();
        server.notify(item, location);
        return true;
    }
}

Code refactorisé :

function itemDropped(item, location) {
    const dropOut = function() {
        server.notify(item, outOfBounds);
        items.resetAll();
        return false;
    }

    const dropIn = function() {
        server.notify(item, location);
        animateCanvas();
        return true;
    }

    return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}

Tout le monde a dit qu'il n'y avait pas projet à écrire sur leur CV, j'ai donc trouvé un projet pour tout le monde et j'ai également inclus un [Tutoriel de construction].

Je coopère avec Alibaba Cloud sur le serveur, et le prix discount est relativement bon marché : 89/an, 223/3 ans, ce qui est moins cher que 9,9 par mois pour les étudiants, je l'ai acheté pour construire un projet, et il est plus confortable de se familiariser avec la pile technologique (pour les anciens utilisateurs) Achetez-le simplement avec un compte familial. J'utilise la recommandation de ma mère pour l'acheter pendant trois ans. Vous pouvez le consulter en cliquant sur cet article.

4. Stratégie sans branchement

Cette astuce essaie d'éviter d'utiliser l'instruction switch, créez plutôt une carte avec clé/valeur et utiliser Une fonction accède à la valeur d'une clé passée en paramètre.

Cas 1

Code avec switch :

switch(breed){
    case 'border':
      return 'Border Collies are good boys and girls.';
      break;  
    case 'pitbull':
      return 'Pit Bulls are good boys and girls.';
      break;  
    case 'german':
      return 'German Shepherds are good boys and girls.';
      break;
    default:
      return 'Im default'
}

Code refactorisé :

const dogSwitch = (breed) =>({
  "border": "Border Collies are good boys and girls.",
  "pitbull": "Pit Bulls are good boys and girls.",
  "german": "German Shepherds are good boys and girls.",  
})[breed]||'Im the default';


dogSwitch("border xxx")

5 . Fonctionner en tant que données

Nous savons que la fonction est la première classe de JS, donc en l'utilisant, nous pouvons diviser le code en un objet fonction.

Code avec IF :

const calc = {
    run: function(op, n1, n2) {
        const result;
        if (op == "add") {
            result = n1 + n2;
        } else if (op == "sub" ) {
            result = n1 - n2;
        } else if (op == "mult" ) {
            result = n1 * n2;
        } else if (op == "p" ) {
            result = n1 / n2;
        }
        return result;
    }
}

calc.run("sub", 5, 3); //2

Code refactorisé :

const calc = {
    add : function(a,b) {
        return a + b;
    },
    sub : function(a,b) {
        return a - b;
    },
    mult : function(a,b) {
        return a * b;
    },
    p : function(a,b) {
        return a / b;
    },
    run: function(fn, a, b) {
        return fn && fn(a,b);
    }
}

calc.run(calc.mult, 7, 4); //28

6. Le polymorphisme

Le polymorphisme est la capacité d'un objet à avoir plusieurs formes. L'utilisation la plus courante du polymorphisme en POO consiste à utiliser une référence de classe parent pour faire référence à un objet de classe enfant.

Code avec IF :

const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER'
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA'
};

const calc = (person) =>{

    if (people.job_type==='DEVELOPER')
        return person.salary+9000*0.10;

    if (people.job_type==='QA')
        return person.salary+1000*0.60;
}

console.log('Salary',calc(bob));
console.log('Salary',calc(mary));

Code refactorisé :

const qaSalary  = (base) => base+9000*0.10;
const devSalary = (base) => base+1000*0.60;

//Add function to the object.
const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER',
  calc: devSalary
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA',
  calc: qaSalary
};

console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));

Texte original : https://dev.to/damxipo/avoid-use-if-on -our-js-scripts-1b95

Auteur : Damian Ciplat

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

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!