JavaScript复杂判断逻辑写法是什么

发布时间:2020-10-15 20:10:33 作者:小新
来源:亿速云 阅读:152

这篇文章给大家分享的是有关JavaScript复杂判断逻辑写法是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

在某些场景中,我们可能会遇到多个判断条件的情况,针对这种情况,我们通常 会使使用if/else/switch来进行处理,但是多个判断下,这样的写法会有很多的代码,如何解决呢,请继续往下看

首先我们拿if/esle举个栗子,switch写法我就不再这写了

checkStatus(status) {
 if (status == 1) {
    function1();
  } else if (status == 2) {
    function2();
  } else if (status == 3) {
    function3();
  } else if (status == 4) {
    function4();
  } else if (status == 5) {
    function5();
  }
}

通过判断不同的status,执行不同的方法,这是很常见的写法,缺点是代码量很多,且不利于可读性,别人来维护的时候,不能快速的知道这个方法有多少个判断条件,需要调用多少个方法。必须要看完整个方法,才知道这些。下面就介绍些更优化的方法,本文针对vue写法

const actions = {
  '1': 'function1',
  '2': 'function2',
  '3': 'function3',
  '4': 'function4',
  '5': 'function5'
 }
 function checkStatus(status) {
   let action = actions[status];
  this[action]()
 }

这种写法将方法名和需要判断的类型值进行绑定,调用的时候通过属性名找到对应的属性值即可调用对应的方法,写法简单明了。我们在扩展下,假如类型为1的时候,我们不止要调用一种方法怎么办,请看下面:

const actions = {
 '1': ['function1','function2'],
 '2': ['function3','function4'],
 '3': ['function5','function6'],
}

我们可以将类型为1时,需要调用的方法,写在数组里面,那么调用的时候就可以这么拿:

function checkStatus(status) {
  let action = actions[status];
   this[action[0]]()
  this[action[1]]()
 }

以上两种方法,是针对一元判断的时候使用的,具体使用看具体的场景。
假如是多元判断呢?例如,在判断status为1的时候,我们还需要判断type值为否为1等等。。。
条件对应为

if (status == 1 && type == 1) {
    //do someThing
} else if (status == 2 && type == 2) {
   //do someThing
} else if (status == 3 && type == 3) {
   //do someThing
} else if (status == 4 && type == 4) {
   //do someThing
} else if (status == 5 && type == 5) {
   //do someThing
}

这种业务场景下,如果是用传统的if/else,代码量简直不敢想,接下来,看怎么优化这种情况

  const actions = new Map([
   [{type:'1',status:1},()=>{/*do sth*/}],
   [{type:'2',status:2},()=>{/*do sth*/}],
   //...
  ])

  function checkStatus(type,status)=>{
   let action = [...actions].filter(([key,value])=>(key.type == type && key.status == status))
   action.forEach(([key,value])=>value.call(this))
  }

这里需要解释的一点是,Map可以用任何类型的数据作为key。我们可以直接判断key是否符合我们的条件,对应的处理方法,可以写在对应的vulue值里面。这种写法基本能满足大部分判断逻辑了。。。下面将难度升级下。。。
上面我们讲到type和status 都是一对一对应的情况下执行相应的方法,加入type为1时,ststus为2和3 都需要执行相同的方法,type为2时,status为1,2也需要执行相同的方法呢?上面的方法也可以使用,下面这样:

const actions = new Map([
  [{type:'1',status:2},()=>{functionA}],
  [{type:'3',status:3},()=>{/functionB}],
  [{type:'2',status:1},()=>{functionC}],
  [{type:'1',status:3},()=>{functionA}],
  //...
 ])

这样写已经能满足日常需求了,但上面重写了2次status为2的情况还是有点不爽,假如判断条件变得特别复杂,比如type有3种状态,status有10种状态,那你需要定义30条处理逻辑,而往往这些逻辑里面很多都是相同的,再用上面的写法似乎很难接受,那么可以这么写:

  const actions = ()=>{
   const functionA = ()=>{/*do sth*/}
   const functionB = ()=>{/*do sth*/}
   const functionC = ()=>{/*send log*/}
   return new Map([
   [/^1_[1-4]$/,functionA],
   [/^2_.*$/,functionC], 
   //...
   ])
  }

  function checkStatus(type,status)=>{
   let action = [...actions()].filter(([key,value])=>(key.test(`${type}_${status}`)))
   action.forEach(([key,value])=>value.call(this))
  }

也就是说利用数组循环的特性,符合正则条件的逻辑都会被执行,那就可以同时执行公共逻辑和单独逻辑,因为正则的存在,你可以打开想象力解锁更多的玩法,不懂ES6Map特性,可以去了解下,上面的用法对于大量的判断逻辑来说,的确是优化了很多了。

感谢各位的阅读!关于JavaScript复杂判断逻辑写法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. JavaScript复杂逻辑判断的技巧性写法是什么
  2. JavaScript中复杂判断的用法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript avascript ava

上一篇:使用虚拟主机如何更换系统

下一篇:买了虚拟主机后怎样建站

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》