Ich glaube, dass jeder mehr oder weniger mit Projektcodes mit riesigen if else in Berührung gekommen ist. Manchmal ist es nach der Fehlerbehebung wirklich ärgerlich. Ich fühle mich ernsthaft ausgelaugt. if else 的项目代码吧，多重嵌套的 if else 在维护的时候真的让人很恼火，有时候一个 bug 排查下来，严重感觉身体被掏空。
本文并未有消灭或歧视 if else的意思，if else 的好用都知道，这里只是在某些特定场景为大家额外提供一种思路，增加我们代码的可读性。
Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else
|| 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。下面用一个简单的案例来表述
let c
if(a){
c = a
} else {
c = b
}大家看着上面的代码会难受嘛（本人有一丢丢的强迫症），明明就是一个很简单的判断却需要写好几行代码才能实现。这个时候我们就可以用短路运算去简化我们的代码啦。
let c = a || b
这样看起来是不是就简洁了很多?。
三元运算符我觉得大家应该都很熟悉吧，很多时候简单的一些判断我们都可以使用三元运算符去替代 if else，这里只推荐 一层 三元运算符，因为多层嵌套的三元运算符也不具备良好的可读性。
例子：条件为 true 时返回1，反之返回0：
const fn = (nBoolean) {
if (nBoolean) {
return 1
} else {
return 0
}
}
// 使用三元运算符
const fn = (nBoolean) {
return nBoolean ? 1 : 0
}三元运算符使用的地方也比较多，比如：条件赋值，递归...
// num值在nBoolean为true时为10，否则为5
let num = nBoolean ? 10 : 5
// 求0-n之间的整数的和
let sum = 0;
function add(n){
sum += n
return n >= 2 ? add(n - 1) : result;
};
let num = add(10);//55上述的两种方式：短路运算跟三元运算虽然很好用，代码也很简洁，不过都只能用于简单的判断，遇到多重条件判断就不能使用了。
对于 switch case，虽然它的可读性确实比 else if 更高，但是我想大家应该都觉得它写起来比较麻烦吧（反正我觉得很麻烦）。
例：有A、B、C、D四种种类型，在A、B的时候输出1，C输出2、D输出3，默认输出0。
let type = 'A'
//if else if
if (type === 'A' || type === 'B') {
console.log(1);
} else if (type === 'C') {
console.log(2);
} else if(type === 'D') {
console.log(3);
} else {
console.log(0)
}
//switch case
switch (type) {
case 'A':
case 'B':
console.log(1)
break
case 'C':
console.log(2)
break
case 'D':
console.log(3);
break;
default:
console.log(0)
}对象配置看起来跟 策略模式 差不多，都是根据不同得参数使用不同得数据/算法/函数。
策略模式就是将一系列算法封装起来，并使它们相互之间可以替换。被封装起来的算法具有独立性，外部不可改变其特性。
接下来我们用对象配置的方法实现一下上述的例子
let type = 'A'
let tactics = {
'A': 1,
'B': 1,
'C': 2,
'D': 3,
default: 0
}
console.log(tactics[type]) // 1接下来用几个例子让大家更加熟悉一点。
根据不同的用户使用不同的折扣，如：普通用户不打折，普通会员用户9折，年费会员8.5折，超级会员8折。
使用if else实现
// 获取折扣 --- 使用if else
const getDiscount = (userKey) => {
if (userKey === '普通会员') {
return 0.9
} else if (userKey === '年费会员') {
return 0.85
} else if (userKey === '超级会员') {
return 0.8
} else {
return 1
}
}
console.log(getDiscount('普通会员')) // 0.9使用对象配置/策略模式实现?
// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
// 我们可以根据用户类型来生成我们的折扣对象
let discounts = {
'普通会员': 0.9,
'年费会员': 0.85,
'超级会员': 0.8,
'default': 1
}
return discounts[userKey] || discounts['default']
}
console.log(getDiscount('普通会员')) // 0.9从上面的案列中可以明显看得出来，使用对象配置比使用if else可读性更高，后续如果需要添加用户折扣也只需要修改折扣对象就行。
对象配置不一定非要使用对象去管理我们键值对，还可以使用 Map去管理?，如：
// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
// 我们可以根据用户类型来生成我们的折扣对象
let discounts = new Map([
['普通会员', 0.9],
['年费会员', 0.85],
['超级会员', 0.8],
['default', 1]
])
return discounts.get(userKey) || discounts.get('default')
}
console.log(getDiscount('普通会员')) // 0.9公司的年终奖根据员工的工资基数和绩效等级来发放的。例如，绩效为A的人年终奖有4倍工资，绩效为B的有3倍，绩效为C的只有2倍。
假如财务部要求我们提供一段代码来实现这个核算逻辑，我们要怎么实现呢？
这不是很简单嘛，一个函数就搞定了。
const calculateBonus = (performanceLevel, salary) => {
if (performanceLevel === 'A'){
return salary * 4
}
if (performanceLevel === 'B'){
return salary * 3
}
if (performanceLevel === 'C'){
return salary * 2
}
}
calculateBonus( 'B', 20000 ) // 输出：60000可以发现，这段代码十分简单，但是 calculateBonus函数比较庞大，所有的逻辑分支都包含在if else语句中，如果增加了一种新的绩效等级D，或者把A等级的倍数改成5，那我们必须阅读所有代码才能去做修改。
所以我们可以用对象配置/策略模式去简化这个函数
let strategies = new Map([
['A', 4],
['B', 3],
['C', 2]
])
const calculateBonus = (performanceLevel, salary) => {
return strategies.get(performanceLevel) * salary
}
calculateBonus( 'B', 20000 ) // 输出：60000至此，这个需求做完了，然后产品经理说要加上一个部门区分，假设公司有两个部门D和F，D部门的业绩较好，所以年终奖翻1.2倍，F部门的业绩较差，年终奖打9折。
改造以上代码，把状态值拼接，然后存入Map中
// 以绩效_部门的方式拼接键值存入
let strategies = new Map([
['A_D', 4 * 1.2],
['B_D', 3 * 1.2],
['C_D', 2 * 1.2],
['A_F', 4 * 0.9],
['B_F', 3 * 0.9],
['C_F', 2 * 0.9]
])
const calculateBonus = (performanceLevel, salary, department) => {
return strategies.get(`${performanceLevel}_${department}`) * salary
}
calculateBonus( 'B', 20000, 'D' ) // 输出：72000本文主要是向大家传递一种思想，我们有很多的方法去优化我们的代码，提高我们代码的可读性。
对if else并没有歧视的意思，只是希望在大家以后的代码中不仅仅只有if else
if else nicht eliminieren oder diskriminieren. Jeder kennt den Nutzen von if else Geben Sie einige spezifische Szenarien an, um die Lesbarkeit unseres Codes zu verbessern.
||s Kurzschlussbetrieb können manchmal sein Wird verwendet, um eine relativ einfache Kurzschlussoperation von if else|| zu ersetzen: Wenn die linke Seite in true konvertiert werden kann, kehre zurück den Wert der linken Seite der Formel, andernfalls wird der Wert der Gleichung auf der rechten Seite zurückgegeben. if else. Hier wird nur der einstufige ternäre Operator empfohlen, da der mehrstufige verschachtelte ternäre Operator keine gute Lesbarkeit aufweist. 🎜🎜Beispiel: Geben Sie 1 zurück, wenn die Bedingung wahr ist, andernfalls geben Sie 0 zurück:🎜rrreee🎜Der ternäre Operator wird auch an vielen Stellen verwendet, z. B. bei bedingter Zuweisung, Rekursion ... 🎜rrreeeswitch case tatsächlich besser ist als die von else if, denke ich, dass jeder denkt, dass das Schreiben schwieriger ist (jedenfalls denke ich, dass es sehr problematisch ist). 🎜🎜Beispiel: Es gibt vier Typen: A, B, C und D. Wenn A und B ausgegeben werden, wird 1 ausgegeben, C gibt 2 aus und D gibt 3 aus. Die Standardausgabe ist 0. 🎜rrreeeStrategiemodus, beide basieren auf „Unterschiedlich“. Parameter verwenden unterschiedliche Daten/Algorithmen/Funktionen. 🎜🎜Das Strategiemuster kapselt eine Reihe von Algorithmen und macht sie austauschbar. Der gekapselte Algorithmus ist unabhängig und seine Eigenschaften können nicht extern geändert werden. 🎜🎜Als nächstes werden wir die Objektkonfigurationsmethode verwenden, um das obige Beispiel zu implementieren🎜rrreee🎜Als nächstes werden wir einige Beispiele verwenden, um alle vertrauter zu machen. 🎜if else zur Implementierung🎜rrreee🎜Verwenden Sie Objektkonfiguration/Strategiemuster zur Implementierung?🎜rrreee🎜Aus den oben genannten Fällen geht hervor, dass die Verwendung der Objektkonfiguration besser lesbar ist als die Verwendung von if else High Sie müssen Benutzerrabatte später hinzufügen, Sie müssen nur das Rabattobjekt ändern. 🎜🎜Die Objektkonfiguration muss nicht unbedingt Objekte verwenden, um unsere Schlüssel-Wert-Paare zu verwalten. Sie können auch Map zum Verwalten verwenden?, wie zum Beispiel: 🎜rrreeecalculateBonus ist relativ umfangreich. Alle logischen Zweige sind in der Anweisung if else enthalten Wenn die Leistungsstufe D ist oder das Vielfache der Stufe A auf 5 geändert wird, müssen wir den gesamten Code lesen, bevor wir Änderungen vornehmen können. 🎜🎜Wir können also das Objektkonfigurations-/Strategiemuster verwenden, um diese Funktion zu vereinfachen🎜rrreee🎜An diesem Punkt ist diese Anforderung erfüllt, und dann sagte der Produktmanager, dass eine Abteilungsunterscheidung hinzugefügt werden sollte. Angenommen, das Unternehmen hat zwei Abteilungen D und F, und die Leistung von Abteilung D ist besser, daher wird der Jahresendbonus um das 1,2-fache erhöht. Die Leistung von Abteilung F ist schlecht, daher wird der Jahresendbonus um 10 % abgezinst. 🎜🎜Transformieren Sie den obigen Code, verbinden Sie die Statuswerte und speichern Sie sie dann in der Karte🎜rrreeeif else nicht diskriminieren, ich hoffe nur, dass es in Ihrem zukünftigen Code mehr als nur if else gibt. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜 
![JavaScript-Kern-Tutorial [DOM-Stücklistenoperationen, die JS kennen muss]](https://img.php.cn/upload/course/000/000/041/61c56ae28d02a390.jpg)
![Eingehende JavaScript-Analyse [Web-Frontend muss über Grundkenntnisse verfügen]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![TypeScript-Einführungsvideo [kann auch ohne JavaScript-Lernen verstanden werden]](https://img.php.cn/upload/course/000/000/068/6242c0fc4be39373.png)
![Praktische Entwicklung einer Nachahmung der Meituan APP [Ein unverzichtbares JavaScript-Projekt für Front-End-Programmierer]](https://img.php.cn/upload/course/000/000/068/6242bebc05ca9210.png)
![Grundlegende JavaScript-Syntax [dom|bom|es6 neue Syntax|jQuery|Datenvisualisierungs-Echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
