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 Das Problem dabei ist, dass der if/else/switch im Code immer aufgeblähter und schwieriger zu verstehen wird. 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.
Die Schlüssel eines Objekts können nur Zeichenfolgen oder Symbole sein, aber die Schlüssel einer Karte können beliebige Werte sein.
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.
Wir müssen das Problem aktualisieren, wenn wir auf die Schaltfläche klicken. Jetzt müssen wir auch die Identität des Benutzers beurteilen:

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 Sie, dass ich nicht jedes Urteil schreibe. Die spezifische Logik hier liegt darin, dass der Code zu lang 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 mithilfe eines Object-Objekts 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.

Jetzt erhöhen wir den Schwierigkeitsgrad ein wenig. Was ist, wenn die Verarbeitungslogik von Status 1-4 im Gastfall dieselbe ist? Es handelt sich um den Cache der Verarbeitungslogikfunktion

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

Das Schreiben auf diese Weise kann bereits den täglichen Bedarf decken, aber im Ernst, es ist immer noch etwas umständlich, FunktionA viermal neu zu schreiben. Wenn die Beurteilungsbedingung besonders kompliziert wird, z Beispielsweise hat die Identität 3 Status. Dann müssen Sie 30 Verarbeitungslogiken definieren. Dies scheint etwas zu sein, das ich nicht akzeptieren möchte :

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 */}],
  //...
])

Hier kommen die Vorteile von Map noch deutlicher zur Geltung, was die Verwendung unbegrenzter Möglichkeiten ermöglicht, wenn für alle Gastsituationen ein Log-Vergrabungspunkt gesendet werden muss Unterschiedliche Statussituationen erfordern auch eine separate logische Verarbeitung. Dann können wir Folgendes schreiben:

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

Mit anderen Worten: Unter Verwendung der Eigenschaften von Array-Schleifen wird Logik ausgeführt, die die regulären Bedingungen erfüllt. Anschließend können Sie öffentliche Logik ausführen und individuelle Logik zugleich. Durch die Existenz regelmäßiger Regeln können Sie Ihrer Fantasie freien Lauf lassen und weitere Spielmöglichkeiten freischalten, auf die ich in diesem Artikel nicht näher eingehen werde.

Zusammenfassung

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

if/else

1. Schalter

2. Beim Ein-Yuan-Urteil: Speichern Sie es im Objekt

3. Beim Ein-Yuan-Urteil: Speichern Sie es unter Karte

4. Bei mehreren Beurteilungen: Fügen Sie die Bedingung in eine Zeichenfolge ein und speichern Sie sie im Objekt

5. Bei mehreren Beurteilungen: Fügen Sie die Bedingung zusammen eine Zeichenfolge und speichern Sie sie in der Karte

6. Bei mehreren Beurteilungen: Speichern Sie die Bedingung als Objekt und speichern Sie sie in der Karte

7. Beim Erstellen der Multivariate Beurteilung: Speichern Sie die Bedingung als regulären Ausdruck und speichern Sie sie in der Karte

8. An diesem Punkt endet dieser Artikel hoffentlich mehr als nur if/. else/switch in deinem zukünftigen Leben.

Empfohlenes Tutorial: „

JS-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!