Dieser Artikel stellt Ihnen technische Schreibmethoden (Codebeispiele) zu komplexen logischen Urteilen vor. Ich hoffe, dass er Ihnen als Referenz dienen wird.
Wenn wir js-Code schreiben, stoßen wir häufig auf komplexe logische Urteile. Normalerweise können wir if/else oder switch verwenden, um mehrere bedingte Urteile zu implementieren, aber dies wird ein Problem darstellen Mit zunehmender Geschwindigkeit wird der if/else/-Schalter im Code immer aufgeblähter und schwieriger zu verstehen. In diesem Artikel erfahren Sie, wie Sie die Beurteilungslogik eleganter schreiben können.
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')
}
}Sie können die Klicklogik dieser Schaltfläche anhand des Codes erkennen: Führen Sie zwei Dinge aus Senden Sie das Protokoll entsprechend den verschiedenen Aktivitätszuständen, um den Punkt zu begraben, und springen Sie zur entsprechenden Seite. Sie können problemlos einen Umschreibungsplan für diesen Code vorschlagen:
/**
* 按钮点击事件
* @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
}
}Nun, das sieht viel klarer aus, als wenn /else. Seien Sie vorsichtig. Wenn Fall 2 und Fall 3 die gleiche Logik haben, können Sie die Ausführungsanweisung weglassen und dann die Logik von Fall 3 automatisch ausführen.
Zu diesem Zeitpunkt werden einige Schüler sagen, dass es eine einfachere Möglichkeit gibt, Folgendes zu schreiben:
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)
}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 = 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])
}Macht es nicht mehr Spaß, so zu schreiben, dass das Map-Objekt in es6 verwendet wird? Was ist der Unterschied zwischen Kartenobjekt und Objektobjekt?
1. Ein Objekt hat normalerweise seinen eigenen Prototyp, daher hat ein Objekt immer einen „Prototyp“-Schlüssel.
2. Der Schlüssel eines Objekts kann nur eine Zeichenfolge oder ein Symbol sein, aber der Schlüssel einer Karte kann ein beliebiger Wert sein.
3. 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.
Früher mussten wir nur den Status beurteilen, wenn wir auf die Schaltfläche klickten:
/**
* 按钮点击事件
* @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
}
}
}Verzeihen Sie, dass das nicht der Fall ist Schreiben der spezifischen Logik jedes Urteils. 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.
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)
}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 von Objektobjekten implementiert wird, sieht er natürlich ähnlich aus:
const actions = {
'guest_1': () => { /*do sth*/ },
'guest_2': () => { /*do sth*/ },
//....
}
const onButtonClick = (identity, status) => {
let action = actions[`${identity}_${status}`] || actions['default']
action.call(this)
}
如果有些同学觉得把查询条件拼成字符串有点别扭，那还有一种方案，就是用Map对象，以Object对象作为key：
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))
}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 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 dies etwas, das ich nicht akzeptieren möchte wie folgt 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 zum Tragen. Als Schlüssel können reguläre Typen 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 Sie 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:
Das obige ist der detaillierte Inhalt vonTechnische Schreibmethoden für komplexe logische Urteile in JavaScript (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
