其实你可以少写点if else与switch(推荐)


Posted in Javascript onJanuary 10, 2019

前言

作为搬砖在第一线的底层工人,业务场景从来是没有做不到只有想不到的复杂。

不过他强任他强,if-else全搞定,搬就完了。但是随着业务迭代或者项目交接,自己在看自己或者别人的if代码的时候,心情就不再表述了,各自深有体会。所以我们一起看看if还能怎么写

最基本if-else

假设有这么个场景,不同情况下打印不同值。

因为涉及到的条件太多,就不提三目运算之类优化了。

if (a == 1) {
 console.log('a1')
} else if (a == 2) {
 console.log('b2')
} else if (a == 3) {
 console.log('c3')
} else if (a == 4) {
 console.log('d4')
}
/* n..... */

现在还算能看,因为逻辑简单,如果逻辑复杂,迭代多个版本之后,你还敢动吗。

每动一下就战战兢兢,谁知道哪里会遗漏。

那么换种方式呢

switch-case

这样稍微清晰那么一点,差别好像没什么差别:

switch(a){
 case 1:
  console.log('a1');
  break;
 /* 省略。。。 */ 
 case 40:
  console.log('a40');
  break;
}

分离配置信息与执行动作

object映射

定义一个object作为配置对象来存放不同状态,通过链表查找

const statusMap = {
 1:()=>{
  console.log('a1')
 },
 2:()=>{
  console.log('b2')
 }
 /* n.... */
}
// 执行
let a = 1 
statusMap[a || 1]()

这样比较清晰,将条件配置与具体执行分离。如果要增加其他状态,只修改配置对象即可。

数组映射

当然在某些状态下可以使用数组,来做这个配置对象。

// 这里就涉及其他优化了,例如将执行函数抽离出来,大家不要关注func的内容就好。
// 它就是个function,内容很复杂
const statusArr = [function(){
 console.log(1)
},
 function () {
  console.log(2)
 },]
// 执行
let a = 1
statusArr[a || 1]()

数组的要求更高一点,如果是其他key,例如字符串,那么数组就不能满足需求了

升级版:不同key相同value

这样看起来好一点了,那么需求又有变动了,

前面是每种处理方式都不同,下面有几种情况下处理函数相同的,

例如1-39的时候,调用a,40之后调用b,如果我们继续来用映射的方式来处理。

function f1 (){
 console.log(1)
}
function f2 (){
 console.log(2)
}
const statusMap={
 1:f1,
 2:f1,
 3:f1,
 4:f1,
 //省略
 40:f2
}
let a = 2
statusMap[a]()

这样当然也可以,不过重复写那么多f1,代码看起来不够简洁。

开始重构之前我们先捋一下思路,无非是想把多个key合并起来,对应一个value。

也就是说我们的键值不是字符串而是个数组,object显然只支持字符串,

那么可以将这么多key合并成一个:'1,2,3,4,..,9'。

但是查找的时候有点问题了,我们的参数肯定不能完全匹配。

接着走下去,是不是做个遍历加个判断,包含在子集内的都算匹配,那么代码看起来就是下面这个样子。

// 将键值key设置为一个拼接之后的字符串
const statusMap = {
 '1,2,3,4,5': f1,
 //省略
 40: f2
}
// 获取所有的键值,待会遍历用
const keys = Object.keys(statusMap),
 len = keys.length
// 遍历获取对应的值 
const getVal=(param='')=>{
 // 用for循环的原因在于匹配之后就不需要继续遍历
 for (let i = 0; i < len; i++) {
  const key = keys[i],
   val = statusMap[key]
  // 这里用什么来判断就随便了,两个字符串都有。 
  if (key.includes(param)) {
   return val
  }
 }
}
let a = 2,
 handle = getVal(a)
handle() // 1

但是这样来看,增加了个遍历的过程,而且是拼接字符串,万一哪天传了个逗号进来,会得到了预料之外的结果。

map

es6有个新的数据结构Map,支持任意数据结构作为键值。如果用Map可能更清晰一点。

/**
 * map键值索引的是引用地址,
 * 如果是下面这样的写法不好意思,永远得不到值
 * map1.set([1,4,5],'引用地址')
 * map1.get([1,4,5]) //输出为undefined
 * 就像直接访问
 * map1.get([1,2,3,4,5]) //同样为undefined
 */
const map1 = new Map()
const statusArr = [1,2,3,4,5]
map1.set(statusArr,f1)
// 预设默认值,因为不能直接遍历
let handle = function(){}
const getVal = (param = '') => {
for (let value of map1.entries()) {
 console.log(JSON.stringify(value))
 if (value[0].includes(param)){
  console.log(value)
  // 不能跳出 只能处理了
  handle = value[1]
 }
}
}
const a = 2
getVal(a)
handle()

个人而言虽然这样减少了重复代码,但是又增加了一步匹配值的操作,优劣就见仁见智吧。

二维数组

肯定有部分人就是不想做遍历的操作,既然一个数组不能满足,那么两个数组呢。

// 键值数组和value 保持对应关系
const keyArr = ['1,2,3,4,5','40']
const valArr = [f1,f2]
const getVal = (param = '')=>{
 // 查找参数对应的下标
 let index = keyArr.findIndex((it)=>{
  return it.includes(param)
 })
 // 获取对应值
 return valArr[index]
}
let a = 2,
 handle = getVal(a)
handle()

利用数组提供的下标,将key和value对应起来,进而获取想要的值。

这里一直没有达到我最初的目的,即键里面重复的数组,可以不通过多余操作匹配到,上面不管怎么样都进行了处理,这不是懒人的想要的。

总结

这是在写业务需求的时候做的一点总结,数组和对象的映射可能大家都在用。当遇到了不同key相同value的情况时,从懒出发不像重复罗列,就尝试了下。当然了,因为个人水平问题,肯定有更好的处理方式,欢迎一起讨论,抛砖引玉共同进步。此外现有成熟的库里loadsh也是可以到达目的,不过自己思考过之后再去看大神的作品理解会更深入一点。

Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
jQuery 入门级学习笔记及源码
Jan 22 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
JS实现留言板功能
Jun 17 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 #Javascript
浅谈JavaScript 代码简洁之道
Jan 09 #Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 #Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 #Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 #Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 #Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
咖啡的传说和历史
2021/03/03 新手入门
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php实现简单洗牌算法
2013/06/18 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
jquery入门—访问DOM对象方法
2013/01/07 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
python word转pdf代码实例
2019/08/16 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
建筑个人求职信范文
2014/01/25 职场文书
《太阳》教学反思
2014/02/21 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
2014年导购员工作总结
2014/11/18 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
小学大队干部竞选稿
2015/11/20 职场文书