彻底解决if else嵌套问题

zhoutk 发布于2019-08-23 13:55 / 491人阅读

摘要：彻底解决嵌套问题开发过程中常因为过多导致代码融于，难以阅读，今天就我们就一起来解决这个问题，让代码更优美，维护更方便，接盘侠更开心有函数根据传入水果类型返回颜色，代码如下写法一写法二把同类放到一个中数组筛选内多条件处理更早丢出不符合条件的资

彻底解决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");
  }
}

筛选内多条件处理

更早丢出不符合条件的资源

复合特定条件的放在最后处理

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的情况

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

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

把以上内容优化项目代码

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

封装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
}

页面内引入util方法

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

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

const roleUrl = getRoleUrl(checkRoleByIdValue())

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99770.html

Promise到底解决了什么问题？

摘要：我的博客大家都知道解决了回调地狱的问题。这就是异步的嵌套带来的可读性的问题，它是由异步的运行机制引起的。在与第三方团队沟通之后问题得到了解决。这不但使代码变得臃肿不堪，还进一步加剧了可读性的问题。的特征保证了可以解决信任问题。我的github博客 https://github.com/zhuanyongxigua/blog 大家都知道Promise解决了回调地狱的问题。说到回调地狱，...

yibinnn 2019-08-23 11:45 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

J4ck_Chan 2019-08-01 18:22 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

lakeside 2019-08-22 13:48 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

big_cat 2019-08-29 14:12 评论0 收藏0
ES6—Async与异步编程（11）

摘要：所以异步编程对语言太重要。异步编程我们就以用户注册这个特别常见的场景为例，讲讲异步编程。这种层层嵌套被称为回调地狱。相比回调函数而言，代码可读性更高，代码的执行顺序一目了然。函数内部语句返回的值，会成为方法回调函数的参数。单线程是Javascript语言最本质的特性之一，Javascript引擎在运行js代码的时候，同一个时间只能执行单个任务。这种模式的好处是实现起来比较简单，执行...

chengjianhua 2019-08-26 13:47 评论0 收藏0