代码中大量的 if-else,你有什么优化方案?

更新日期: 2021-06-15阅读: 1.1k标签: 优化

前言

在产品快速迭代的中,由于追求开发速度,我们往往忽略代码的可读性与扩展性,不合理的使用if-else条件判断会使我们的程序复杂度大大提升,同时也会使代码的可读性急速下降,后期维护难度也大大提高,真的让人脑壳疼。比如下方示例:

// 贷款申请操作的处理
function check() {
  // 是否输入正确用户名
  if (this.checkUsername(this.username)) {
    // 是否输入正确身份证号
    if (this.checkIdCard(this.idCard)) {
      // 请输入正确的电话号码
      if (this.checkTel(this.tel)) {
        // 担保人是本人
        if (this.dbr === '担保人是本人') {
          // 是否存在身份证正面
          if (document.querySelector('.sfzzm img')) {
            console.log('存在身份证正面')
            // 是否存在身份证反面
            if (document.querySelector('.sfzfm img')) {
              console.log('存在身份证反面')
              // 是否存在学历证书
              if (document.querySelector('.xlzs img')) {
                console.log('存在学历证书')
                if (this.ydxy) {
                  this.tijiaoIsShow = false
                }
              } else {
                Toast('请上传学历证书')
                this.tijiaoIsShow = true
              }
            } else {
              Toast('请上传身份证反面')
            }
          } else {
            Toast('请上传身份证正面')
          }
        } else if (this.dbr == '担保人不是本人') {
          if (this.checkUsername(this.dbrname)) {
            if (this.checkIdCard(this.dbridCard)) {
              if (this.checkTel(this.dbrzyzh)) {
                if (document.querySelector('.sfzzm img')) {
                  console.log('存在身份证正面')
                  if (document.querySelector('.sfzfm img')) {
                    console.log('存在身份证反面')
                    if (document.querySelector('.xlzs img')) {
                      console.log('存在学历证书')
                      this.tijiaoIsShow = false
                    } else {
                      Toast('请上传学历证书')
                    }
                  } else {
                    Toast('请上传身份证反面')
                  }
                } else {
                  Toast('请上传身份证正面')
                }
              } else {
                Toast('请输入担保人展业证号')
              }
            } else {
              Toast('请输入担保人身份证号')
            }
          } else {
            Toast('请输入担保人姓名')
          }
        } else {
          Toast('请选择担保人是否为本人')
        }
      } else {
        Toast('请输入正确的电话号码')
      }
    } else {
      Toast('请输入正确的身份证号')
    }
  } else {
    Toast('请输入正确的姓名')
  }
}

如果你接手这样一段代码,相信大家和我的心情是一样的:


本文归纳以下几种优化if-else场景,希望对大家有所帮助。

单个 if 语句优化
if/else 语句优化
单个 if 多条件优化
多个 else if 分支优化


#单个 if 语句优化

优化前

if (flag) {
  this.handleFn()
}

优化后

flag && this.handleFn()
// handleFn是普通函数

这种写法就比较清晰,简洁,好读!

另外如果遇到有很多的if语句,但是执行的功能函数却是一致的情况,我们可以用”逻辑与“或者”逻辑或“来把他们合并成一个表达式。如果我们这些彼此独立的条件判断可以被视为同一次检查的场景时,一次检查的意图明显在可读性上优于多次的条件检查。我们来看一段代码片段:

if (!(staffInfo.patientName && staffInfo.phone)) {
  // doSomething
}
...
if (!(staffInfo.phone && staffInfo.idCardNum)) {
  // doSomething
}


我们可以通过合并逻辑,将上面代码修改为如下:

if (!(staffInfo.patientName && staffInfo.phone) || !(staffInfo.phone && staffInfo.idCardNum)) {
  // doSomething
}


if/else 语句优化

if/else可以说在项目中遇到频率是最高,通常可以这两种策略优化

排非策略

三元运算符

排非策略

比如用户登录场景,如果用户名和密码输入框为空,那么我们就提示用户”用户名和密码不能为空”;如果有值,就执行登录的操作。

优化前

if (user && password) {
  // 逻辑处理
} else {
  throw '用户名和密码不能为空!'
}

优化后

if (!user || !password) return throw '用户名和密码不能为空!'
// 逻辑处理

表单提交时,需要提前排除那些提交不规范的内容,通常情况下,表单提交遇到不符合我们要求大于我们提交成功的情形,排非策略是个很不错的选择。


三元运算符

示例一

let allow = null
if(age >= 18){
   allow = '通过';
} else {
   allow = '拒绝';
}

// 优化后
let allow = age >= 18 ? '通过' : '拒绝'

示例二

if (flag) {
  success()
} else {
  fail()
}

//优化后
flag ? success() : fail()

三元运算符相比if/else来说,只需一行语句,代码简练精炼。


单个 if 多条件优化

优化前

function test(type) {
  if (type === 'jpg' || type === 'png' || type === 'gif' || type === 'svg') {
    console.log('该文件为图片')
  }
}

优化后

function test(type) {
  const imgArr = ['jpg', 'png', 'gif', 'svg']
  if (imgArr.includes(type)) {
    console.log('该文件为图片')
  }
}


多个 else if 分支优化

多个else if通常是一个糟糕的选择,它导致设计复杂,代码可读性差,并且可能导致重构困难。

if (this.type === 'A') {
  this.handleA()
} else if (this.type === 'B') {
  this.handleB()
} else if (this.type === 'C') {
  this.handleC()
} else if (this.type === 'D') {
  this.handleD()
} else {
  this.handleE()
}

我们经常遇到多个else if条件判断代码,随着逻辑复杂性的增加,else if的代码将变得越来越肿。

看一下逻辑绘制为流程图


从上面的流程图可以看出,不同条件分支的代码具有很高的耦合度。先前的条件判断将影响后续的代码流,并且此类代码在后续开发中难以维护。我们可以通过switch、key-value和Map来优化代码。

switch

switch (val) {
  case 'A':
    handleA()
    break
  case 'B':
    handleB()
    break
  case 'C':
    handleC()
    break
  case 'D':
    handleD()
    break
}

看一下逻辑绘制为流程图


流程图显然更简单。而且,不同的条件分支之间没有嵌套,并且它们彼此独立。逻辑很清楚。

key-value

虽然switch语句在逻辑上确实比else if语句简单,但是代码本身也有点多。

其实我们对象枚举,将条件与特定操作相关联的键值。

let enums = {
  A: handleA,
  B: handleB,
  C: handleC,
  D: handleD,
  E: handleE,
}
function action(val) {
  let handleType = enums[val]
  handleType()
}

流程图:


这种方式消除了所有条件语句,并使用键值对象存储条件和操作之间的关系。当我们需要根据条件执行代码时,我们不再需要使用else if或switch语句来处理相应的动作,我们只需从中提取相应的函数 handleType 并执行它即可。

Map

实际上我们还可以通过Map来进一步的优化我们的代码。

对比Object的话,Map具有许多优点

对象的键只能是字符串或符号,而Map的键可以是任何类型的值。

我们可以使用Map size属性轻松获取Map的键/值对的数量,而对象的键/值对的数量只能手动确定。

具有极快的查找速度。

上面的例子可以优化如下:

let enums = new Map([
  ['A', handleA],
  ['B', handleB],
  ['C', handleC],
  ['D', handleD],
  ['E', handleE],
])

function action(val) {
  let handleType = enums(val)
  handleType()
}

如果我们遇到多层复杂条件,Map语句优势就更明显了!

if (mode == 'kline') {
  if (this.type === 'A') {
    this.handleA()
  } else if (this.type === 'B') {
    this.handleB()
  } else if (this.type === 'C') {
    this.handleC()
  } else if (this.type === 'D') {
    this.handleD()
  }
} else if ((mode = 'depth')) {
  if (this.type === 'A') {
    this.handleA()
  } else if (this.type === 'B') {
    this.handleB()
  } else if (this.type === 'C') {
    this.handleC()
  } else if (this.type === 'D') {
    this.handleD()
  }
}

对于上述如此复杂的场景,是否可以通过Map来进行优化?

其实我们只需要将不同的判断语句连接成一个字符串,以便我们可以将条件和操作以键值格式关联在一起。

let enums = new Map([
  ['kline_A', handleKlineA],
  ['kline_B', handleKlineB],
  ['kline_C', handleKlineC],
  ['kline_D', handleKlineD],
  ['kline_E', handleKlineE],
  ['depth_A', handleDepthA],
  ['depth_B', handleDepthB],
  ['depth_C', handleDepthC],
])

function action(mode, type) {
  let key = `${mode}_${type}`
  let handleType = enums(key)
  handleType()
}

瞬间简单明了很多,有木有~~~

原文链接:https://qqlcx5.gitee.io/js/01.代码中大量的 if-else你有什么优化方案.html
作者:前端有道


链接: https://www.fly63.com/article/detial/10432

js中for循环优化总结_如何提高程序的执行效率

在程序开发中,经常会使用到for循环的,但是很多人写的for循环效率都是比较低的,下面就举例说明,并总结优化for循环的方法,来提高我们程序的执行效率。

网站打开速度优化_如何提高网页访问速度技巧方法总结

网站的加载速度不仅影响着用户体验,也会影响搜索引擎的排名,在百度推出“闪电算法”以来,将网站首屏打开速度被列入优化排名行列,作为前端开发的我们需要如果来优化网站的打开速度呢?下面就整理挖掘出很多细节上可以提升性能的东西分享给大家

JS性能优化之文档片段createDocumentFragment

DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在DOM树中

深入浅出代码优化﹣if/else

对于代码裡面的 if else,我们可以使用逻辑判断式,或更好的三元判断式来优化代码。除了可以降低维护项目的成本之外,还可以提升代码可读性。就让我们从最简单的 if else 例子开始吧。

微信小程序性能优化入门指南

小程序从发布到现在也已经有将近两年的时间,越来越来多的公司开始重视小程序生态带来的流量,今年也由于小程序平台对外能力的越来越多的开放以及小程序平台的自身优化,越来越多的开发者也自主的投入到小程序的开发当中

网络串流播放_HTML5如何优化视频文件以便在网络上更快地串流播放

无论你正在将 GIF 动图转换为 MP4 视频,还是手头已经有一大堆 MP4 视频,你都可以优化文件结构,以使得这些视频更快地加载和播放。通过重组 atoms 将 moov 放到文件开头,浏览器可以避免发送额外的 HTTP range request 请求来搜寻和定位 moovatom

​web项目优化_Web 服务器性能与站点访问性能优化

要优化 Web 服务器的性能,我们先来看看 Web 服务器在 web 页面处理上的步骤:Web 浏览器向一个特定的服务器发出 Web 页面请求; Web 服务器接收到 web 页面请求后,寻找所请求的 web 页面,并将所请求的 Web 页面传送给 Web 浏览器; 显示出来

前端性能优化之重排和重绘

浏览器下载完页面所有的资源后,就要开始构建DOM树,于此同时还会构建渲染树(Render Tree)。(其实在构建渲染树之前,和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树)

微信小程序代码优化总汇

写篇文章的目的,是以开放小程序代码的层面的优化。包括:条件判断将wx:if换成了hidden 、页面跳转请销毁之前使用的资源、列表的局部更新、小程序中多张图片懒加载方案、Input状态下隐藏input,应预留出键盘收起的时间

我是如何将页面加载时间从6S降到2S的?

生活在信息爆炸的今天,我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的,这就意味着用户对你站点投入的时间可能是及其吝啬的(当然有一些刚需站点除外)。如何给用户提供迅速的响应就显得十分重要了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!