优化逻辑判断

我们在编写js代码的过程中，经常会遇到多重逻辑判断的情况。一般在正则情况下，我们首先会想到的就是利用if/else或者switch来实现多个条件判断。那么当我们遇到复杂场景业务的时候，就有可能出现大量的逻辑嵌套，可读性、扩展性难以恭维。

例如： 下列这段代码，就存在了过多的if/else，若是需求发生变化，那么这段代码可能就不支持新的需求。后期维护成本会大大增加，也容易出现bug

 if (condition1) {
  
 } else if (condition2) {
  
 } else if (condition3) {
  
 } else if (condition4) {
  
 } else {
  
 }

下面展示几种情况下我们可以选择的方式

1、使用数组来代替if/else的逻辑判断

若是你的需要的逻辑，只是简单的在不同情况下对某个状态、数值进行更改

 // 我们可以先定义好一个数组或者对象，通过传入不同的值来设置不同的对象
 let statusArr = ['go','leave','return']
 // 通过接口或者什么方式来获取到你需要值
 let status = getStatus()
 // 通过我们预先定义好的数据，从中间获取，避免if/else等判断
 let statusResult = statusArr[status]
 
 // 若是对象的时候
 let statusObj = {
   red: [1,2,3],
   blue: [4,5,6],
   yellow: [7,8,9]
 }
 // 取值还是一样的，将key当作索引值，直接通过Object.key来获取内容

2、若是还是使用if/else

若是存在莫一个条件为前置条件的时候，我们可以即使的使用return将函数直接结束，没有必要再走一层。减少嵌套的层级

 function arr(e) {
   let arr = [1,2,3,4,5,6,7]
   if(arr.length>0){ // 这层其实没有必要存在，可以写 
     // if(arr.lenth<=0) return  直接结束
     if(arr.includes(e)){
       console.log(e)
     }else {
       console.log('没有该选项')
     }
   }  
 }

3、使用every函数

当我们遇到一个场景，需要判断一个对象中所有的数据都满足莫一个条件的时候才会执行，我们就可以使用every。

 const fruits = [
   { name: 'a', hobby: 'pingpang' },
   { name: 'b', hobby: 'basketball' },
   { name: 'c', hobby: 'swim' }
 ];
 
 function match() {
   // 条件：所有的人爱好都要是basketball，才会通过
   const isAll = fruits.every(f => f.hobby === 'basketball'
 
   console.log(isAll); // false
 }

4、使用some函数

当我们遇到一个场景，需要判断一个对象中所有的数据中只要有一个满足莫一个条件的时候才会执行，我们就可以使用every。

 const fruits = [
   { name: 'a', hobby: 'pingpang' },
   { name: 'b', hobby: 'basketball' },
   { name: 'c', hobby: 'swim' }
 ];
 
 function match() {
   // 条件：所有的人爱好都要是basketball，才会通过
   const isAll = fruits.some(f => f.hobby === 'basketball'
 
   console.log(isAll); // true
 }

5、使用策略模式，将代码逻辑封装，使他们可以相互替换，

 const TYPE = {
   PLAY: 'play',
   STUDY: 'study',
 };
 
 const strategies = {
   [TYPE.PLAY](go) {
     console.log('玩耍...');
     return '玩耍';
   },
   [TYPE.STUDY](go) {
     console.log('学习中...');
     return '学习';
   },
 };
 
 function ccc({ type = TYPE.STUDY, go }) {
   return strategies[type](fruits);
 }
 
 ccc({ type: 'play', go });

6、使用map存储的方式

例如：你执行一个操作的时候，需要判断当前状态，还需要判断当前用户的身份等级的时候，不同状态和等级需要执行不同操作的时候。

 // if/else的写法，越写越多，越来越杂
 function demoTestOnClick(status, level) {
   if(status == 1) {
     if(level == 1) {
       // 执行。。。
     } else if(level == 2) {
       // 执行。。。
     } else if(level == 3) {
       // 执行。。。
     }
   } else if(status == 2) {
     if(level == 1) {
       // 执行。。。
     } else if(level == 2) {
       // 执行。。。
     } else if(level == 3) {
       // 执行。。。
     }
   } else {
     // 执行xxxx
   }
 }

 // 使用map的写法
 const actions = new Map([
   ["status_1&level_1", ()=>{}],
   ["status_1&level_2", ()=>{}],
   ["status_1&level_3", ()=>{}],
   ["status_1&level_1", ()=>{}],
   ["status_2&level_2", ()=>{}],
   ["status_3&level_3", ()=>{}],
   ['default',()=>{}]
 ])
 function demoTestOnClick(status,level) {
   let action = actions.get(`status_${status}&level_${level}`) || actions.get('default')
   action.call(this)
 }

优化js中（if/else）逻辑判断

优化逻辑判断