Eliminieren Sie if else und sorgen Sie dafür, dass Ihr Code eleganter aussieht

In der Spalte

Javascript erfahren Sie, wie Sie if else entfernen und Ihren Code eleganter gestalten können.

Vorwort

Es sollte viele Studenten geben, die auf Code voller Wenn sonst gestoßen sind, führt die einfache und grobe Fortsetzung inkrementeller Änderungen oft nur zu Verwirrung. Die Komplexität wird höher und die Lesbarkeit schlechter. Dann ist es Zeit für eine Umgestaltung. Nehmen Sie sich ein paar Minuten Zeit, um diesen Artikel zu lesen, vielleicht hilft er Ihnen ein wenig.

Szenario 1: Zeigen Sie den entsprechenden Namen entsprechend dem Status an

Optimierungsplan 1: Objektobjekt

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

Verwenden Sie die Beurteilungsbedingung als Attributnamen des Objekts und die Verarbeitungslogik als Attributwert des Objekts Wenn Sie auf die Schaltfläche klicken, suchen Sie nach Objektattributen.

Optimierungsplan 2: Kartenobjekt

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

Auf diese Weise wird das Kartenobjekt in es6 verwendet Kartenobjekt und Objektobjekt?

Ein Objekt hat normalerweise seinen eigenen Prototyp, daher hat ein Objekt immer einen „Prototyp“-Schlüssel. Die Schlüssel eines Objekts können nur Zeichenfolgen oder Symbole sein, die Schlüssel einer Map können jedoch beliebige Werte sein. Sie können die Anzahl der Schlüssel-Wert-Paare in einer Karte einfach über das Größenattribut ermitteln, während die Anzahl der Schlüssel-Wert-Paare in einem Objekt nur manuell bestätigt werden kann.

Szenario 2: Mehrere bedingte entsprechende Namen

In der Vergangenheit mussten wir beim Klicken auf die Schaltfläche nur den Status beurteilen, aber jetzt müssen wir auch die Identität des Benutzers beurteilen:
„Zum Beispiel:“

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

Oben können wir anhand des Beispiels erkennen, dass sich die Menge Ihrer Beurteilung verdoppelt und sich auch die Menge Ihres Codes verdoppelt. Wie können Sie erfrischender schreiben? diesmal?

Optimierungsplan 1: Speichern Sie die Bedingung im Map-Objekt in Form von Zeichenspleißen

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

Die Kernlogik des obigen Codes lautet: Fügen Sie die beiden Bedingungen zu einer Zeichenfolge zusammen und verwenden Sie die bedingte Spleißzeichenfolge als Schlüssel , und verwenden Sie die Verarbeitungsfunktion als Das Map-Objekt des Werts wird gesucht und ausgeführt. Diese Schreibmethode ist besonders nützlich, wenn mehrere Bedingungen beurteilt werden.

Optimierungsplan 2: Speichern Sie die Bedingung im Objektobjekt in Form von Zeichenspleißen

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

Optimierungsplan 3: Speichern Sie die Bedingung im Kartenobjekt in Form von Objektobjekt

Es kann ein bisschen sein Es ist umständlich, Abfragebedingungen zum Bilden einer Zeichenfolge zu verwenden, nämlich Kartenobjekte und Objektobjekte als Schlüssel zu verwenden:

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

Szenario 3: Führen Sie entsprechende Operationen basierend auf dem Status durch

"Zum Beispiel :"

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) {
            // ...
        }
    }
}

Optimierungslösung 1: Suchtabelle, Nachschlagetabelle für die Verantwortungskette

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)

Obwohl es eher wie eine vorübergehende Lösung als eine dauerhafte Lösung erscheinen mag, ist dies nicht der Fall. Die Komplexität der Init-Funktion ist stark reduziert. Wir haben die komplexe Logik des Kontrollflusses in die Funktion „defineAction“ aufgeteilt: Optimierungsplan 2: Funktionale Programmierung. Beispielsweise können Anforderungen wie die folgenden auftreten: Wenn die Kreditwürdigkeit einer bestimmten Plattform beispielsweise 700–950 überschreitet Dies bedeutet eine ausgezeichnete Bonität, 650–700 eine ausgezeichnete Bonität, 600–650 eine gute Bonität, 550–600 eine mittlere Bonität und 350–550 eine schlechte Bonität.

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'

Optimierungsplan 1: Verwenden Sie Nachschlagetabellen, um Konfigurationsdaten und Geschäftslogik zu trennen Alles andere, was ersetzt werden muss, hängt von der Situation ab.

Weitere verwandte kostenlose Lerninhalte: Javascript

(Video)

Das obige ist der detaillierte Inhalt vonEliminieren Sie if else und sorgen Sie dafür, dass Ihr Code eleganter aussieht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!