网站制作方案的重要性,如何做公众号,电商营销推广有哪些?,在线做任务的网站多少算太多#xff1f;
有些人认为数字就是一#xff0c;你应该总是用至少一个三元运算符来代替任何单个 if 语句。我并不这样认为#xff0c;但我想强调一些摆脱常见的 if/else 意大利面条代码的方法。
我相信很多开发人员很容易陷入 if/else 陷阱#xff0c;不是因为其…
多少算太多
有些人认为数字就是一你应该总是用至少一个三元运算符来代替任何单个 if 语句。我并不这样认为但我想强调一些摆脱常见的 if/else 意大利面条代码的方法。
我相信很多开发人员很容易陷入 if/else 陷阱不是因为其他解决方案的复杂性而是因为它遵循这样的自然语言模式if 执行此操作 else 执行此操作。
等等什么是三元运算符
三元运算符与 if/else 并没有革命性的区别因为它们都是条件操作但三元运算符会返回一个值因此可以直接用于赋值。
const greaterThanFive (8 5) ? yep : nope;console.log(greaterThanFive); // yep基本模式只是一个条件如果为真则返回一个值如果为假则返回另一个值。
(condition) ? isTruthy : isFalsyIF/ELSE 的替代方案
让我们从一个场景开始逐步了解不同解决方案的示例。
我们将从用户输入中获取颜色并需要将它们转换为一些预设的颜色代码来匹配以便我们可以更改背景颜色。因此我们将检查颜色名称字符串并在匹配时设置颜色代码。
const setBackgroundColor (colorName) {let colorCode ;if(colorName blue) {colorCode #2196F3;} else if(colorName green) {colorCode #4CAF50;} else if(colorName orange) {colorCode #FF9800;} else if(colorName pink) {colorCode #E91E63;} else {colorCode #F44336;};document.body.style.backgroundColor colorCode;
};这个 if/else 就完成了工作。但是我们背负着大量重复逻辑比较 colorName 和重复赋值 colorCode。
Switch 转变
现在我们可以更恰当地将其更改为 switch 语句。它更符合我们正在尝试做的事情的概念我们有几种想要匹配的字符串情况如果没有一种情况匹配则有一个默认值。
const setBackgroundColor (colorName) {let colorCode ;switch(colorName) {case blue:colorCode #2196F3;break;case green:colorCode #4CAF50;break;case orange:colorCode #FF9800;break;case pink:colorCode #E91E63;break;default:colorCode #f44336;};document.body.style.backgroundColor colorCode;
};但是 switch 仍然带有大量我们可以不需要的样板文件和重复代码。
Lookup Table 查找表
那么我们真正想要实现什么目标呢我们需要将十六进制颜色代码分配给颜色名称因此让我们创建一个将颜色名称作为键、将颜色代码作为值的对象。然后我们可以使用 object[key] 通过颜色名称查找颜色代码。我们需要一个默认值因此如果没有找到键则返回默认值的短三元运算符将在创建对象的默认部分时执行此操作。
const colorCodes {blue : #2196F3,green : #4CAF50,orange : #FF9800,pink : #E91E63,default: #F44336
};const setBackgroundColor (colorName) {document.body.style.backgroundColor colorCodes[colorName]? colorCodes[colorName]: colorCodes[default];
};现在我们有了一个查找表可以整齐地列出我们的输入和可能的输出。
这并不是奇迹般地减少了“代码行数”(LOC)我们从 15 行减少到 20 行再减少到 12 行。事实上其中一些解决方案可能会增加您的 LOC但我们提高了可维护性、易读性并且实际上通过仅对默认回退进行一次逻辑检查来降低复杂性。
数据的交易逻辑
在 if/else 或 switch 上使用查找表的最重要成就是我们将比较逻辑的多个实例转换为数据。代码更具表现力它将逻辑显示为操作。代码更具可测试性逻辑被减少了。而且我们的比较更容易维护它们被合并为纯数据。
让我们将五个比较逻辑运算减少为一个并将我们的值转换为数据。
场景我们需要将成绩百分比转换为对应的字母成绩。
if/else 很简单我们从上到下检查成绩是否高于或等于匹配字母成绩所需的成绩。
const getLetterGrade (gradeAsPercent) {if(gradeAsPercent 90) {return A;} else if(gradeAsPercent 80) {return B;} else if(gradeAsPercent 70) {return C;} else if(gradeAsPercent 60) {return D;} else {return F};
};但我们一遍又一遍地重复相同的逻辑运算。
因此让我们将数据提取到一个数组中以保留顺序并将每个等级的可能性表示为一个对象。现在我们只需对对象进行一次 比较并找到数组中第一个匹配的对象。
const gradeChart [{minpercent: 90, letter: A},{minpercent: 80, letter: B},{minpercent: 70, letter: C},{minpercent: 60, letter: D},{minpercent: 0, letter: F}
];const getLetterGrade (gradeAsPercent) {const grade gradeChart.find((grade) gradeAsPercent grade.minpercent);return grade.letter;
};开始将您的比较想象为数据
当你需要比较或“检查”数值时很自然地会想到 if/else这样你就可以用语言逐步解决问题。但下一次请试着思考如何将您的值表示为数据并通过简化逻辑来解释这些数据。
您的代码最终将变得更具可读性、可维护性和目的性并且其所代表的概念清晰分离。 原文https://dreith.com/blog/theres-such-a-thing-as-using-too-many-ifs/
