彻底处置惩罚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())