Heim > Web-Frontend > js-Tutorial > Eliminieren Sie if else und sorgen Sie dafür, dass Ihr Code eleganter aussieht

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

coldplay.xixi
Freigeben: 2020-10-12 18:05:28
nach vorne
2569 Leute haben es durchsucht

In der Spalte

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

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

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']
}
Nach dem Login kopieren

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];
}
Nach dem Login kopieren

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
    }
  }
}
Nach dem Login kopieren

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)
}
Nach dem Login kopieren

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)
}
Nach dem Login kopieren

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))
}
Nach dem Login kopieren

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) {
            // ...
        }
    }
}
Nach dem Login kopieren

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)
Nach dem Login kopieren

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 &#39;ramda&#39;
var fn = R.cond([
  [R.equals(0),   R.always(&#39;water freezes at 0°C&#39;)],
  [R.equals(100), R.always(&#39;water boils at 100°C&#39;)],
  [R.T,           temp => &#39;nothing special happens at &#39; + temp + &#39;°C&#39;]
]);
fn(0); //=> &#39;water freezes at 0°C&#39;
fn(50); //=> &#39;nothing special happens at 50°C&#39;
fn(100); //=> &#39;water boils at 100°C&#39;
Nach dem Login kopieren

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!

Verwandte Etiketten:
js
Quelle:juejin.im
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage