彻底解决if else嵌套问题

彻底解决if else嵌套问题

开发过程中常因为if else过多导致代码融于，难以阅读，今天就我们就一起来解决这个问题，让代码更优美，维护更方便，接盘侠更开心

有函数根据传入水果类型返回颜色，代码如下：

写法一

function test(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry') {
    console.log('red');
  }
}

写法二

function test(fruit) {
  // 把同类放到一个中数组
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}

筛选内多条件处理

1. 更早丢出不符合条件的资源
2. 复合特定条件的放在最后处理

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  // 提前丢出不符合条件
  if (!fruit) throw new Error('No fruit!'); 
  if (!redFruits.includes(fruit)) return; 

  console.log('red');

  // 复合条件放到最后
  if (quantity > 10) {
    console.log('big quantity');
  }
}

处理传入参数是object的情况

1. 使用解构赋值来解决
   优化前的代码

function test(fruit) { 
  if (fruit && fruit.name)  {
    console.log (fruit.name);
  } else {
    console.log('unknown');
  }
}

test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

优化后的代码

function test({name} = {}) {
  console.log (name || 'unknown');
}

test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

使用map的方式来替换switch

优化前代码

function test(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

test(null); // []
test('yellow'); // ['banana', 'pineapple']

优化后代码

  const fruitColor = {
    red: ['apple', 'strawberry'],
    yellow: ['banana', 'pineapple'],
    purple: ['grape', 'plum']
  };

function test(color) {
  return fruitColor[color] || [];
}

使用map方式的代码

  const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);

function test(color) {
  return fruitColor.get(color) || [];
}

把以上内容优化项目代码

例：处理前端角色管理问题

1. 封装role字典，加入工具类(util.js内)

   // 角色
   const roles = {
     CUSTOMER: {
       value: 'CUSTOMER',
       idValue: 'uid',
       url: '/pages/home/index'
     },
     OIL_ATTENDANT: {
       value: 'OIL_ATTENDANT',
       idValue: 'ouid',
       url: '/pages/oiler/index'
     }
   }
   
   // 根据key获取角色
   const getRoleByKey = (role) => {
     return roles[role] || ""
   }
   // 获取角色主页
   const getRoleUrl = (role) => {
     return roles[role].url || ''
   }
   // 获取当前用户角色
   const checkRoleByIdValue = () => {
     const app = getApp();
     const obj = {
       uid: 'CUSTOMER',
       ouid: 'OIL_ATTENDANT'
     }
     let currentRole
     Object.keys(obj).forEach(k => {
       if (app.globalData[k]) {
         currentRole = obj[k]
       }
     })
     return currentRole
   }
   // 角色id值
   const roleIdIs = (role) => {
     return roles[role].idValue
   }

2. 页面内引入util方法

   import {
     getRoleByKey,
     getRoleUrl,
     checkRoleByIdValue
   } from '../../utils/utils.js'
   
   // 不再使用if else来判断角色，根据不同角色的key来储存数据，直接使用工具类，一行代码搞定
   saveGlobalAndStorageSync(`${currentRole.idValue}`,data.userInfo)
   
   const roleUrl = getRoleUrl(checkRoleByIdValue())