JavaScript复杂推断逻辑写法技巧-百分百源码网

JavaScript复杂推断逻辑写法技巧

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于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特性，可以去理解下，上面的用途关于大量的推断逻辑来说，确实是优化了许多了。。

愿今后的日子里，不只是有if/else/switch。。。。

以上就是JavaScript复杂推断逻辑写法技巧的具体内容，更多请关注百分百源码网其它相关文章！

打赏