跟代码冗余说再见!教你如何优雅的写if else

时间:2020-9-7 作者:admin

前言:
我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,同时可读性也变差,越来越看不懂,那么如何更优雅的写判断逻辑,那么下面分析:

简单的if else

当你的业务是简单的双面判断时(非真即假):
你可能会这么写

// param {Boolean} falg :true or false
 let txt = '';
 if(falg){
    txt = "成功"
 }else{
    txt = "失败"
 }

这么写不是一种最优的写法,同时代码不够简洁,换种思路,直接上三目运算:

let txt = flag  ? "成功" : "失败" ;

当出现多个 if else

你可能会这么写

// param {status} status 活动状态:1:成功 2:失败 3:进行中 4:未开始
 let txt = '';
 if(status == 1){
    txt = "成功" ;
 }else if(status == 2){
    txt = "失败" ;
 }else if(status == 3){
     txt = "进行中" ;
 }else{
    txt = "未开始" ;
 }

首先,你可能会想到switch case

let txt = '';
switch(status){
    case 1:
     txt = "成功" ;
     break ;
    case 2:
     txt = "成功" ;
     break ;
    case 3:
     txt = "进行中" ;
     break ;
    default:
      txt = "未开始" ;
}

这种多条件判断,条件多了,代码也很臃肿,我们不妨使用对象的key value形式试试,上面代码继续优化:

const statusMap = {
    1:"成功",
    2:"失败",
    3:"进行中",
    4:"未开始"
}

调用直接 statusMapp[status]解决!
wooo~ 你会发现,代码如此简洁!!!是不是看着也觉得很舒服~

使用es6 Map

如果你觉得以上代码还不是最理想的,可以试试Map

const actions = new Map([
  [1, "成功"],
  [2, "失败"],
  [3, "进行中"],
  [4, "未开始"]
 ])

调用直接 actions.get(status)解决!

我们需要把问题升级一下,以前按钮点击时候只需要判断status,现在还需要判断用户的身份:

/**
 * 按钮点击事件
 * @param {number} status 活动状态:活动状态:1:成功 2:失败 3:进行中 4:未开始
 * @param {string} identity 身份标识:admin 管理员 user 用户
 */
const handle = (status,identity)=>{
  if(identity == 'admin'){
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }else if(identity == 'user') {
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }
}

原谅我不写每个判断里的具体逻辑了,因为代码太冗长了。

原谅我又用了if/else,因为我看到很多人依然在用if/else写这种大段的逻辑判断。
那么,怎么写才能优雅和简洁呢 ???

同理,使用Map

const actions = new Map([
  ['admin_1', ()=>{/*do sth*/}],
  ['admin_2', ()=>{/*do sth*/}],
  ['admin_3', ()=>{/*do sth*/}],
  ['admin_4', ()=>{/*do sth*/}],
  ['admin_5', ()=>{/*do sth*/}],
  ['user_1', ()=>{/*do sth*/}],
  ['user_2', ()=>{/*do sth*/}],
  ['user_3', ()=>{/*do sth*/}],
  ['user_4, ()=>{/*do sth*/}],
  ['user_5, ()=>{/*do sth*/}],
  ['default', ()=>{/*do sth*/}],
])
const handle  = (identity,status)=>{
  let action = actions.get(`${identity}_${status}`) || actions.get('default')
  action.call(this)
}

当然上述代码如果用Object对象来实现也是类似的:

const actions = {
  'admin_1':()=>{/*do sth*/},
  'admin_2:()=>{/*do sth*/},
  'admin_3:()=>{/*do sth*/},
  //....
}

升级下问题,假如admin情况下,status1-4的处理逻辑都一样怎么办,最差的情况是这样:

const actions = new Map([
  ['admin_1', ()=>{/*function A*/}],
  ['admin_2', ()=>{/*function A*/}],
  ['admin_3', ()=>{/*function A*/}],
  ['admin_4', ()=>{/*function A*/}],
  ['admin_5', ()=>{/*function B*/}],
])

显然,function A重复写了4次,也不是很好的办法,然后我们尝试缓存functionA、 function B

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  return new Map([
   ['admin_1', functionA],
   ['admin_2', functionA],
   ['admin_3', functionA],
   ['admin_4', functionA],
   ['admin_5', functionB],
    //...
  ])
}

如果status超过10条或者更多,代码同样很臃肿,那么我们可以在以上代码加上正则匹配:

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  return new Map([
    [/^admin_[1-4]$/,functionA],
    [/^admin_5$/,functionB],
    //...
  ])
}

const handle = (identity,status)=>{
  let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
  action.forEach(([key,value])=>value.call(this))
}

基于上面这种形式,我们就有很多的变化来适应我们的业务

例如场景是这样的, identity 身份标识:admin 管理员 user 用户
admin,1-4,执行functionA ,5执行functionB,5-9执行functionC,9以上的状态执行functionD,我们可以变化出以下代码:

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  const functionC = ()=>{/*do sth*/}
  const functionD = ()=>{/*do sth*/}
  return new Map([
    [/^admin_[1-4]$/,functionA],
    [/^admin_5$/,functionB],
    [/^admin_[6-9]$/,functionC],
    [/^admin_[1-9]\d$/,functionD],
    //...
  ])
}

总结 :

本文已经教你了8种逻辑判断写法,包括:

1: if else

2: 三目运算

3: 一元判断时:使用object的key value

4: 一元判断时:使用Map

5: 多元判断时:将condition拼接成字符串存放到Object里

6: 多元判断时:将condition拼接成字符串存放到Map

7: 多元判断时:将condition拼接成字符串存放到Map,配合正则使用

最后:

  • 大家感觉写得不错,可以点个赞和关注吧~
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。