我正在尝试重构这段代码以避免使用这么多 if 语句,你有什么建议可以给我吗? .问题是我有 4 个不同的输入来给出一个答案。
const alert= markers.some((marker) => marker['hasAlerts'] > 0);
const warning= markers.some((marker) => marker['hasWarnings'] > 0);
const isCurrentHourAlert = markers.some((marker) => marker['isCurrentHourAlert'] > 0);
const isCurrentHourWarnings = markers.some((marker) => marker['isCurrentHourWarnings'] > 0);
let style = 0;
if (isCurrentHourAlert && isCurrentHourWarnings) {
style = 4;
} else if (isCurrentHourAlert) {
style = 4;
} else if (isCurrentHourWarnings) {
style = 5;
} else if (alert && warning) {
style = 2;
} else if (alert) {
style = 2;
} else if (warning) {
style = 3;
} else {
style = 1;
}
我尝试将其转换为 switch case 语句,但它仍然是经过大量验证的代码。
我想知道我是否可以应用一些更易于阅读和重构代码的模式或其他结构。
迭代标记并检查您感兴趣的属性的函数会有所帮助。
不管
style = 4;
是否为真,你都运行isCurrentHourAlert
,所以你可以完全消除第一个分支。
const markersHas = prop => markers.some(marker => marker[prop] > 0);
let style = 0;
if (markersHas('isCurrentHourAlert')) {
style = 4;
} else if (markersHas('isCurrentHourWarnings')) {
style = 5;
}
// etc
如果你想使用
switch
,它看起来像
switch (true) {
case markersHas('isCurrentHourAlert'):
style = 4;
break;
case markersHas('isCurrentHourWarnings'):
style = 5;
break;
// etc
另一种选择是使用条件/样式对数组,然后遍历数组以找到第一个真实条件,并使用其关联的样式。
const styleConds = [
[markersHas('isCurrentHourAlert'), 4],
[markersHas('isCurrentHourWarnings'), 5],
// etc
];
const styleCond = styleConds.find(cond => cond[0]);
const style = styleCond?.[1] ?? 0;
从更高层次的角度来看,您还可能会考虑是否有办法完全避免这些神奇的数字——如果可能的话,最好使用信息量更大的东西。 (例如,像
style = 4;
这样的一行乍看之下并没有那么多意义 - 4 是什么意思?)