徹底解決if else嵌套問題

zhoutk 發(fā)布于2019-08-23 13:55 / 654人閱讀

摘要：徹底解決嵌套問題開發(fā)過程中常因為過多導(dǎo)致代碼融于，難以閱讀，今天就我們就一起來解決這個問題，讓代碼更優(yōu)美，維護更方便，接盤俠更開心有函數(shù)根據(jù)傳入水果類型返回顏色，代碼如下寫法一寫法二把同類放到一個中數(shù)組篩選內(nèi)多條件處理更早丟出不符合條件的資

徹底解決if else嵌套問題

開發(fā)過程中常因為if else過多導(dǎo)致代碼融于，難以閱讀，今天就我們就一起來解決這個問題，讓代碼更優(yōu)美，維護更方便，接盤俠更開心

有函數(shù)根據(jù)傳入水果類型返回顏色，代碼如下：

寫法一

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

寫法二

function test(fruit) {
  // 把同類放到一個中數(shù)組
  const redFruits = ["apple", "strawberry", "cherry", "cranberries"];

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

篩選內(nèi)多條件處理

更早丟出不符合條件的資源

復(fù)合特定條件的放在最后處理

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");

  // 復(fù)合條件放到最后
  if (quantity > 10) {
    console.log("big quantity");
  }
}

處理傳入?yún)?shù)是object的情況

使用解構(gòu)賦值來解決
優(yōu)化前的代碼

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

優(yōu)化后的代碼

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

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

使用map的方式來替換switch

優(yōu)化前代碼

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"]

優(yōu)化后代碼

  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) || [];
}

把以上內(nèi)容優(yōu)化項目代碼

例：處理前端角色管理問題

封裝role字典，加入工具類(util.js內(nèi))

// 角色
const roles = {
  CUSTOMER: {
    value: "CUSTOMER",
    idValue: "uid",
    url: "/pages/home/index"
  },
  OIL_ATTENDANT: {
    value: "OIL_ATTENDANT",
    idValue: "ouid",
    url: "/pages/oiler/index"
  }
}

// 根據(jù)key獲取角色
const getRoleByKey = (role) => {
  return roles[role] || ""
}
// 獲取角色主頁
const getRoleUrl = (role) => {
  return roles[role].url || ""
}
// 獲取當(dāng)前用戶角色
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
}

頁面內(nèi)引入util方法

import {
  getRoleByKey,
  getRoleUrl,
  checkRoleByIdValue
} from "../../utils/utils.js"

// 不再使用if else來判斷角色，根據(jù)不同角色的key來儲存數(shù)據(jù)，直接使用工具類，一行代碼搞定
saveGlobalAndStorageSync(`${currentRole.idValue}`,data.userInfo)

const roleUrl = getRoleUrl(checkRoleByIdValue())