摘要：常见例子如何优雅地输出今天星期几今天星期日一二三四五六上面的例子可以看到表就是一个字符串参考资料表驱动法数据驱动编程
前端中的if/else
在编写业务代码的时候，经常会出现条件判断，如果判断条件众多，就会出现if/else天梯，如果新的业务场景出现，就需要再添加一个if/else，这样的代码维护起来，简直是灾难。
if (status === 0) {
//do something
} else if (status === 1) {
//do something
} else if (status === 2) {
//do something
} else if (status === 3) {
// do something
}
如果新的业务场景出现，status === 4，那就需要再写一个if else，这样的代码可读性太差了。
简单if/else ----> 三元表达式我们先从最简单的方式if/else进行改写
场景：
if (status === 0) {
action()
} else {
do();
}
像上面的状态判断，其实是没有必要的，那么如何进行判断的改写呢？
消除else上面的else没有什么必要
if (status === 0) {
action()
}
do();
使用三元表达式
status === 0 ? action() : do()
这样是不是更加简洁？毫无疑问
if/else 天梯转变为switch 天梯经过了简单的if/else，那么我们来看一下，多重if/else如果进行改写？可以通过switch进行改良代码
switch (status) {
case 0:
// ...
case 1:
// ...
case 2:
// ...
default:
//...
}
但是这样无非只是将if else转变为了switch，提高了代码的可读性。当遇到新的场景的时候，还是需要到switch里面去修改对应的代码。
使用map，将代码配置化定义一个map，里面存储对应的状态和对应状态的操作
const statusMap = new Map([ [0, doStatusZero], [1, doStatusOne], [2, doStatusThree] ]); // 当遇到对应的状态的时候，只需要 statusMap.get(status)();
如果可以的化，可以将配置文件抽离，形成一个配置文件，如果有新的状态改变，只需要改变配置文件就ok了。
匹配对应的规则使用map的好处，是代码可行性和整洁性提高了一个层次，但是只适用于一个单一的判断规则。如果具备多个判断的时候怎么办？假如一个判断是这样的，if(status === 0 && done === true && success == true), 那这样map简单配置的方式就不可以了，那既然简单不行，那就来电稍微复杂点的呗。
本质上if/else逻辑是一种状态匹配，转变为计算机的方式就是模式匹配，单一的模式不能满足需要，那就创建一个多元模式匹配。
场景：需要判断三种状态 status/done/success
多元状态匹配，需要进行两步操作
判断状态是否匹配
匹配完成要完成的动作
基于上面两种行为，我们将map抽象为下面的方式
const judgeMap = new Map([
[
(status, done, success) => status === 0 && done === 1 && success === 1,
() => {
// do something
}
],
[
(status, done, success) => status === 1 && done === 1 && success === 1,
() => {
// do something
}
]
]);
for (let [rule, action] of judgeMap) {
rule(status, done, success) && action()
}
总结
其实整个思想来源于表驱动法，使用表数据，存储对应的状态处理。其中表的概念，不局限于一个简单的map也可能是一个数组或者对象甚至是一个字符串，表的结构可以自己定义。常见例子
如何优雅地输出今天星期几？
`今天星期${"日一二三四五六".charAt((new Date()).getDay())}`
上面的例子可以看到表就是一个字符串
参考资料表驱动法
数据驱动编程
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106625.html
摘要：第二步尽量少使用如果在函数中，可以使用，先判断错误条件，然后立马结束函数，防止进入分支。在大多数情况下，的性能不会比低。 那么问题来了，在js开发中，如何减少if else语句的使用 代码中嵌套的if/else结构往往导致代码不美观，也不易于理解。面向过程的开发中代码有大量的IF ELSE，在java中可以用一些设计模式替换掉这些逻辑，那么在js中是否也有类似的方法用来尽可能减少代码中...
摘要：前端中的计算机领域的通常认为起源于。并对其主要内容作了自己的解读。搬到另一个地区会导致名气降低。年度报告，年最受欢迎的编程语言年上最流行的种编程语言及前十最火热的项目排行榜，分别由及登顶。技术周刊由小组出品，汇聚一周好文章，周刊原文。 showImg(https://segmentfault.com/img/bVWHC4?w=1000&h=710); 本期推荐 反击爬虫，前端工程师的脑...
摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...
摘要：大多数模板实现原理基本一致模板字符串首先通过各种手段剥离出普通字符串和模板语法字符串生成抽象语法树然后针对模板语法片段进行编译，期间模板变量均去引擎输入的变量中查找模板语法片段生成出普通片段，与原始普通字符串进行拼接输出。 前端模板的发展 模板可以说是前端开发最常接触的工具之一。将页面固定不变的内容抽出成模板，服务端返回的动态数据装填到模板中预留的坑位，最后组装成完整的页面html字符...
