Elegante Möglichkeit, komplexe Urteile in JavaScript zu schreiben

Prämisse

Beim Schreiben von JS-Code stoßen wir häufig auf komplexe logische Urteile. Normalerweise können Sie if/else oder switch verwenden, um mehrere bedingte Urteile zu implementieren, aber es wird eine geben Mit zunehmender Logik wird der if/else/switch im Code immer aufgeblähter und schwieriger zu verstehen. Dieser Artikel wird Ihnen also einen Versuch geben.

Zum Beispiel

Schauen Sie sich zuerst einen Code an

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */const onButtonClick = (status)=>{  if(status == 1){
    sendLog('processing')
    jumpTo('IndexPage')
  }else if(status == 2){
    sendLog('fail')
    jumpTo('FailPage')
  }else if(status == 3){
    sendLog('fail')
    jumpTo('FailPage')
  }else if(status == 4){
    sendLog('success')
    jumpTo('SuccessPage')
  }else if(status == 5){
    sendLog('cancel')
    jumpTo('CancelPage')
  }else {
    sendLog('other')
    jumpTo('Index')
  }
}复制代码

Durch den Code können Sie die Klicklogik dieser Schaltfläche sehen: Führen Sie zwei Dinge entsprechend unterschiedlichen Aktivitätszuständen aus. Senden Sie Protokolle, um den Punkt zu begraben und zur entsprechenden Seite zu springen. Sie können problemlos einen Umschreibungsplan für diesen Code vorschlagen kleiner Tipp: Wenn die Logik von Fall 2 und Fall 3 gleich ist, können Sie die Ausführungsanweisung und Pause weglassen, und die Logik von Fall 3 wird automatisch in Fall 2 ausgeführt.

Zu diesem Zeitpunkt werden einige Schüler sagen, dass es eine einfachere Möglichkeit gibt, Folgendes zu schreiben:

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */const onButtonClick = (status)=>{  switch (status){    case 1:
      sendLog('processing')
      jumpTo('IndexPage')      break
    case 2:    case 3:
      sendLog('fail')
      jumpTo('FailPage')      break  
    case 4:
      sendLog('success')
      jumpTo('SuccessPage')      break
    case 5:
      sendLog('cancel')
      jumpTo('CancelPage')      break
    default:
      sendLog('other')
      jumpTo('Index')      break
  }
}复制代码

Der obige Code sieht sauberer aus, weil er die Beurteilungsbedingung berücksichtigt als Objekt Der Attributname verwendet die Verarbeitungslogik als Attributwert des Objekts. Wenn Sie auf die Schaltfläche klicken, wird nach den Attributen des Objekts gesucht. Diese Schreibmethode eignet sich besonders für unäre bedingte Beurteilungen.

Gibt es eine andere Möglichkeit, es zu schreiben? Einige:

const actions = {  '1': ['processing','IndexPage'],  '2': ['fail','FailPage'],  '3': ['fail','FailPage'],  '4': ['success','SuccessPage'],  '5': ['cancel','CancelPage'],  'default': ['other','Index'],
}/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消
 */const onButtonClick = (status)=>{  let action = actions[status] || actions['default'],
      logName = action[0],
      pageName = action[1]
  sendLog(logName)
  jumpTo(pageName)
}复制代码

Das Schreiben wie dieses verwendet das Map-Objekt in es6. Macht das nicht mehr Spaß? Was ist der Unterschied zwischen Kartenobjekt und Objektobjekt?

Ein Objekt hat normalerweise seinen eigenen Prototyp, daher hat ein Objekt immer einen „Prototyp“-Schlüssel.

1. Die Schlüssel eines Objekts können nur Zeichenfolgen oder Symbole sein, aber die Schlüssel einer Karte können beliebige Werte sein.
2. Sie können die Anzahl der Schlüssel-Wert-Paare einer Karte einfach über das Größenattribut ermitteln, während die Anzahl der Schlüssel-Wert-Paare eines Objekts nur manuell bestätigt werden kann.
3. Früher mussten wir nur den Status beurteilen, wenn wir auf die Schaltfläche klickten:

const actions = new Map([
  [1, ['processing','IndexPage']],
  [2, ['fail','FailPage']],
  [3, ['fail','FailPage']],
  [4, ['success','SuccessPage']],
  [5, ['cancel','CancelPage']],
  ['default', ['other','Index']]
])/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */const onButtonClick = (status)=>{  let action = actions.get(status) || actions.get('default')
  sendLog(action[0])
  jumpTo(action[1])
}复制代码

Verzeihen Ich bedanke mich dafür, dass ich nicht die spezifischen Details jeder Urteilslogik schreibe, weil der Code zu ausführlich ist.

Verzeihen Sie mir, dass ich noch einmal if/else verwende, denn ich sehe, dass viele Leute immer noch if/else verwenden, um so lange logische Urteile zu schreiben.

Aus dem obigen Beispiel können wir ersehen, dass sich Ihre Beurteilungsmenge verdoppelt und sich auch Ihre Codemenge verdoppelt, wenn Ihre Logik zu diesem Zeitpunkt aktualisiert wird.

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 * @param {string} identity 身份标识：guest客态 master主态
 */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
    }
  }
}复制代码

Die Kernlogik des obigen Codes besteht darin, die beiden Bedingungen zu einer Zeichenfolge zusammenzufügen und das Map-Objekt unter Verwendung der bedingten Zeichenfolge als Schlüssel und der Verarbeitungsfunktion als Wert zu suchen und auszuführen mehrfach verwendet Dies ist besonders nützlich, wenn bedingte Urteile gefällt werden.

Wenn der obige Code mit einem Object-Objekt implementiert wird, sieht er natürlich ähnlich aus:

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*/}],
])/**
 * 按钮点击事件
 * @param {string} identity 身份标识：guest客态 master主态
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 */const onButtonClick = (identity,status)=>{  let action = actions.get(`${identity}_${status}`) || actions.get('default')
  action.call(this)
}复制代码

Wenn einige Schüler das Gefühl haben, dass es etwas umständlich ist, die Abfragebedingungen in eine Zeichenfolge zu buchstabieren , dann gibt es eine andere Lösung, die darin besteht, ein Map-Objekt zu verwenden und das Object-Objekt als Schlüssel zu verwenden:

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

Ist es nicht etwas fortgeschrittener?

Der Unterschied zwischen Karte und Objekt ist auch hier zu sehen. Karte kann jede Art von Daten als Schlüssel verwenden.

Lassen Sie uns nun den Schwierigkeitsgrad ein wenig erhöhen. Was ist, wenn die Verarbeitungslogik von Status 1-4 im Gastfall dieselbe ist:

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))
}复制代码

Eine bessere Art zu schreiben Es ist die Verarbeitungslogikfunktion im Cache:

const actions = new Map([
  [{identity:'guest',status:1},()=>{/* functionA */}],
  [{identity:'guest',status:2},()=>{/* functionA */}],
  [{identity:'guest',status:3},()=>{/* functionA */}],
  [{identity:'guest',status:4},()=>{/* functionA */}],
  [{identity:'guest',status:5},()=>{/* functionB */}],  //...])复制代码

Das Schreiben auf diese Weise kann bereits den täglichen Bedarf decken, aber im Ernst, es ist immer noch etwas umständlich, FunktionA oben viermal neu zu schreiben. Wenn die Beurteilungsbedingung besonders kompliziert wird, Zum Beispiel hat die Identität 3 Zustände und der Status 10. Dann müssen Sie 30 Verarbeitungslogiken definieren, und oft ist das etwas, was ich nicht akzeptieren möchte So implementiert:

const actions = ()=>{  const functionA = ()=>{/*do sth*/}  const functionB = ()=>{/*do sth*/}  return new Map([
    [{identity:'guest',status:1},functionA],
    [{identity:'guest',status:2},functionA],
    [{identity:'guest',status:3},functionA],
    [{identity:'guest',status:4},functionA],
    [{identity:'guest',status:5},functionB],    //...
  ])
}const onButtonClick = (identity,status)=>{  let action = [...actions()].filter(([key,value])=>(key.identity == identity && key.status == status))
  action.forEach(([key,value])=>value.call(this))
}复制代码

Hier kommen die Vorteile von Map stärker zur Geltung. Reguläre Typen können als Schlüssel verwendet werden, was unbegrenzte Möglichkeiten eröffnet. Wenn sich die Nachfrage ändert, muss für alle Gastsituationen ein Log-Vergrabungspunkt gesendet werden , und unterschiedliche Statussituationen erfordern auch eine separate logische Verarbeitung, dann können wir es so schreiben:

const actions = ()=>{  const functionA = ()=>{/*do sth*/}  const functionB = ()=>{/*do sth*/}  return new Map([
    [/^guest_[1-4]$/,functionA],
    [/^guest_5$/,functionB],    //...
  ])
}const onButtonClick = (identity,status)=>{  let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
  action.forEach(([key,value])=>value.call(this))
}复制代码

Mit anderen Worten, unter Verwendung der Eigenschaften von Array-Schleifen wird eine Logik ausgeführt, die die regulären Bedingungen erfüllt kann öffentliche Logik und individuelle Logik gleichzeitig ausführen. Da es reguläre Regeln gibt, können Sie Ihrer Fantasie freien Lauf lassen. Um weitere Spielmöglichkeiten freizuschalten, werde ich in diesem Artikel nicht näher darauf eingehen.

Zusammenfassung

In diesem Artikel haben Sie 8 Möglichkeiten kennengelernt, logische Urteile zu schreiben, darunter:

if/else

1. switch
2. Bei der Beurteilung mit einem Element: Speichern Sie es im Objekt
3. Bei der Beurteilung mit einem Element: Speichern Sie es in der Karte
4. Bei der Beurteilung mit mehreren Elementen: Fügen Sie die Bedingung in eine Zeichenfolge ein und speichern Sie sie in Objekt
5. Mehrere Elemente Bei der Beurteilung: Verketten Sie die Bedingung zu einer Zeichenfolge und speichern Sie sie in der Map
6. Bei der Durchführung mehrerer Beurteilungen: Speichern Sie die Bedingung als Objekt und speichern Sie sie in der Map
7. Wenn Sie mehrere Urteile fällen: Schreiben Sie die Bedingung als regulären Ausdruck und speichern Sie sie in der Karte
8. An diesem Punkt ist dieser Artikel hoffentlich zu Ende if/else/switch in deinem zukünftigen Leben.

Wenn Sie an diesem Artikel interessiert sind, folgen Sie bitte dem öffentlichen WeChat-Konto des Autors: „大 Zhuanzhuanfe“ Empfohlenes Tutorial: „

JavaScript-Grundlagen-Tutorial

》

Das obige ist der detaillierte Inhalt vonElegante Möglichkeit, komplexe Urteile in JavaScript zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!