Vermeiden Sie die Verwendung zu vieler if-Anweisungen in JS-Skripten. Hier sind 6 Möglichkeiten, if zu ersetzen

Empfohlenes Tutorial: „JavaScript-Video-Tutorial“

Kürzlich habe ich bei der Umgestaltung des Codes festgestellt, dass der frühe Code zu viele if-Anweisungen in einem Ausmaß verwendet hat, das ich noch nie zuvor gesehen hatte . Deshalb halte ich es für wichtig, diese einfachen Tipps zu teilen, die uns dabei helfen können, die Verwendung zu vieler if-Anweisungen zu vermeiden. if 语句，其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的，这些技巧可以帮助我们避免过多的使用 if 语句。

接下来会介绍6种方式来代替 if 的使用，这样做不是坚决不使用 if 偏执狂，而是换个方式思考我们的编码思路。

1. 三元运算符

事例1

带有IF的代码：

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

重构后代码：

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

使用 ES6

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

事例2

带有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
  }
}

重构后代码：

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

事例3

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

重构后代码：

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

2.短路运算符

事例1

带有IF的代码：

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

if (isOnline){
    makeReservation(user);
}

重构后代码：

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

isOnline&&makeReservation(user);

事例2

带有IF的代码：

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

const sendMoney = ()=>{};

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

重构后代码：

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

const sendMoney = ()=>{};

active && loan && sendMoney();

3.函数委托:

事例1

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

重构后代码：

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

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

我和阿里云合作服务器，折扣价比较便宜：89/年，223/3年，比学生9.9每月还便宜，买了搭建个项目，熟悉技术栈比较香（老用户用家人账号买就好了，我用我妈的)推荐买三年的划算点，点击本条就可以查看。

4.非分支策略

此技巧尝试避免使用switch语句，相反是用键/值创建一个映射并使用一个函数访问作为参数传递的键的值。

事例1

带有switch

Als nächstes stellen wir 6-Möglichkeiten vor, um die Verwendung von if zu ersetzen. Dabei geht es nicht darum, paranoid zu sein, if nicht zu verwenden, sondern darum Ändern Sie die Art und Weise, wie Sie über unsere Codierungsideen nachdenken. 1. Ternärer Operator

mit IF-Code:

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

Refactored Code:

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")

Fall 3

Code mit 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

Überarbeiteter Code:

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

2. Kurzschlussoperator

Fall. 1

Code mit 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));

Refactored Code:

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

Fall 2

Code mit IF:

rrreeeÜberarbeiteter Code:rrreee

🎜🎜3. Funktionskommission: 🎜🎜🎜🎜🎜Fall 1🎜🎜🎜Code mit IF: 🎜rrreee🎜Überarbeiteter Code : 🎜rrreee🎜Alle sagten, dass es kein Projekt gibt, das in den Lebenslauf geschrieben werden könnte, also habe ich für jeden ein Projekt gefunden und auch [Bau-Tutorial] gegeben. 🎜🎜Ich kooperiere mit Alibaba Cloud auf dem Server und der ermäßigte Preis ist relativ günstig: 89/Jahr, 223/3 Jahre, was für Studenten günstiger ist als 9,9 pro Monat. Ich habe es gekauft, um ein Projekt zu erstellen, und es ist mehr Es ist angenehm, mit dem Technologie-Stack vertraut zu sein (alte Benutzer können es von ihren Familienmitgliedern kaufen). Okay, ich werde die Empfehlung meiner Mutter nutzen, um einen Dreijahresvertrag zu kaufen. Klicken Sie auf diesen Artikel, um ihn anzuzeigen. 🎜🎜🎜🎜4. Strategie ohne Verzweigung 🎜🎜🎜🎜Dieser Trick versucht, die Verwendung einer switch-Anweisung zu vermeiden und erstellt stattdessen eine Karte mit Schlüssel/Wert und verwendet eine Funktion, um auf den Wert des Schlüssels zuzugreifen als Parameter übergeben. 🎜🎜🎜Fall 1🎜🎜🎜Code mit switch: 🎜rrreee🎜Refactored Code: 🎜rrreee🎜🎜🎜5. Funktioniert als Daten 🎜🎜🎜🎜Wir wissen, dass Funktionen in JS die erste Klasse sind, Damit können wir den Code in ein Funktionsobjekt aufteilen. 🎜🎜Code mit IF: 🎜rrreee🎜Überarbeiteter Code: 🎜rrreee🎜🎜🎜 6. Polymorphismus 🎜🎜🎜🎜Polymorphismus ist die Fähigkeit eines Objekts, mehrere Formen anzunehmen. Die häufigste Verwendung von Polymorphismus in OOP ist die Verwendung einer übergeordneten Klassenreferenz, um auf ein untergeordnetes Klassenobjekt zu verweisen. 🎜🎜Code mit IF: 🎜rrreee🎜Überarbeiteter Code: 🎜rrreee🎜🎜Originaltext: https://dev.to/damxipo/avoid-use-if-on-our-js-scripts-1b95🎜🎜Autor: Damian Ciplat 🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmierkurse🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonVermeiden Sie die Verwendung zu vieler if-Anweisungen in JS-Skripten. Hier sind 6 Möglichkeiten, if zu ersetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!