徹底解決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())