位置: IT常识 - 正文

JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化

编辑:rootadmin
JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化

推荐整理分享JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 🖥️ Nodejs专栏:Node.js从入门到精通 🖥️ TS知识总结:十万字TS知识点总结 👉 你的一键三连是我更新的最大动力❤️! 📢 欢迎私信博主加入前端交流群🌹

📑 目录🔽 前言1️⃣ 简单分支优化2️⃣ 复杂分支优化3️⃣ 抽离分支4️⃣ 争议🔼 结语🔽 前言

最近在网上冲浪时看到了这样一段代码:

function getUserDescribe(name) { if (name === "小刘") { console.log("刘哥哥"); } else if (name === "小红") { console.log("小红妹妹"); } else if (name === "陈龙") { console.log("大师"); } else if (name === "李龙") { console.log("师傅"); } else if (name === "大鹏") { console.log("恶人"); } else { console.log("此人比较神秘!"); }}

咋一看没感觉有什么异常,但如果有1000个判断条件,按照这种写法难不成要写1000个 if 分支?

如果写了大量的 if 分支,并且可能还具有分支套分支,可以想象到整个代码的可读性和可维护都会大大降低,这在实际开发中,确实是一个比较头疼的问题,那有没有什么办法能够即实现需求又能避免这些问题呢?

1️⃣ 简单分支优化

这就涉及到分支优化,让我们转换思维,去优化一下上面的代码结构:

function getUserDescribe(name) { const describeForNameMap = { 小刘: () => console.log("刘哥哥"), 小红: () => console.log("小红妹妹"), 陈龙: () => console.log("大师"), 李龙: () => console.log("师傅"), 大鹏: () => console.log("恶人"), }; describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");}

问题代码中的判断都是简单的相等判断,那么我们就可以将这些判断条件作为一个属性写到对象describeForNameMap 中去,这些属性对应的值就是条件成立后的处理函数。

之后我们就只需通过getUserDescribe函数接收到的参数去获取describeForNameMap对象中对应的值,如果该值存在就运行该值(因为值是一个函数)。

这样一来原本的 if 分支判断就转换成了简单的key value对应值,条件与处理函数一一对应,一目了然。

2️⃣ 复杂分支优化JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化

那如果我们的 if 分支中的判断条件不只是简单的相等判断,还具有一些需要计算的表达式时,我们该怎么办呢?(如下所示)

function getUserDescribe(name) { if (name.length > 3) { console.log("名字太长"); } else if (name.length < 2) { console.log("名字太短"); } else if (name[0] === "陈") { console.log("小陈"); } else if (name[0] === "李" && name !== "李鹏") { console.log("小李"); } else if (name === "李鹏") { console.log("管理员"); } else { console.log("此人比较神秘!"); }}

对于这种结构的代码就不能引入对象来进行分支优化了,我们可以引入二维数组来进行分支优化:

function getUserDescribe(name) { const describeForNameMap = [ [ (name) => name.length > 3, // 判断条件 () => console.log("名字太长") // 执行函数 ], [ (name) => name.length < 2, () => console.log("名字太短") ], [ (name) => name[0] === "陈", () => console.log("小陈") ], [ (name) => name === "大鹏", () => console.log("管理员") ], [ (name) => name[0] === "李" && name !== "李鹏", () => console.log("小李"), ], ]; // 获取符合条件的子数组 const getDescribe = describeForNameMap.find((item) => item[0](name)); // 子数组存在则运行子数组中的第二个元素(执行函数) getDescribe ? getDescribe[1]() : console.log("此人比较神秘!");}

上面我们定义了一个describeForNameMap数组,数组内的每一个元素代表一个判断条件与其执行函数的集合(也是一个数组),之后我们通过数组的find方法查找describeForNameMap数组中符合判断条件的子数组即可。

3️⃣ 抽离分支

上面例子中我们定义的这个describeForNameMap对象是一个独立的结构,我们完全可以将它抽离出去:

const describeForNameMap = { 小刘: () => console.log("刘哥哥"), 小红: () => console.log("小红妹妹"), 陈龙: () => console.log("大师"), 李龙: () => console.log("师傅"), 大鹏: () => console.log("恶人"),};function getUserDescribe(name) { describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");}const describeForNameMap = [ [ (name) => name.length > 3, // 判断条件 () => console.log("名字太长") // 执行函数 ], [ (name) => name.length < 2, () => console.log("名字太短") ], [ (name) => name[0] === "陈", () => console.log("小陈") ], [ (name) => name === "大鹏", () => console.log("管理员") ], [ (name) => name[0] === "李" && name !== "李鹏", () => console.log("小李"), ],];function getUserDescribe(name) { // 获取符合条件的子数组 const getDescribe = describeForNameMap.find((item) => item[0](name)); // 子数组存在则运行子数组中的第二个元素(执行函数) getDescribe ? getDescribe[1]() : console.log("此人比较神秘!");}

通过模块化的开发也可以将这个map对象写进一个单独的js文件,之后在需要使用的地方导入即可。

4️⃣ 争议

这样一来整个getUserDescribe函数就变得非常简洁,有的同学可能会问这有什么用呢?这不是更加麻烦了吗?如果真的嫌if else不好看,那我就使用if return不用else就好了:

function getUserDescribe(name) { if (name === "小刘") { console.log("刘哥哥"); return; } if (name === "小红") { console.log("小红妹妹"); return; } if (name === "陈龙") { console.log("大师"); return; } if (name === "李龙") { console.log("师傅"); return; } if (name === "大鹏") { console.log("恶人"); return; } console.log("此人比较神秘!");}

试想一下,如果你getUserDescribe函数中有1000个判断分支,并且还具有大量的根据判断结果来执行的处理代码,并且getUserDescribe函数会返回这个处理后的判断结果的值。

这时getUserDescribe函数的重点在于对判断结果的处理,而不在于这个结果是通过什么分支获取的,例如:

function getUserDescribe(name) { let str; // 存储判断结果 if (name.length > 3) { str = "名字太长"; } else if (name.length < 2) { str = "名字太短"; } else if (name[0] === "陈") { str = "小陈"; } else if (name[0] === "李" && name !== "李鹏") { str = "小李"; } else if (name === "李鹏") { str = "管理员"; } else { str = "此人比较神秘!"; } // 对判断结果str的一些处理 // ...... console.log(str); return str;}

如果你不进行分支优化,getUserDescribe函数就会被大量的 if 分支抢占空间,使得getUserDescribe函数的重点迷失(getUserDescribe函数重点在于对判断结果的处理,而不在于这个结果是通过什么分支获取的),这时你再看一下我们优化后的代码:

const describeForNameMap = [ [(name) => name.length > 3, () => "名字太长"], [(name) => name.length < 2, () => "名字太短"], [(name) => name[0] === "陈", () => "小陈"], [(name) => name === "大鹏", () => "管理员"], [(name) => name[0] === "李" && name !== "李鹏", () => "小李"],];function getUserDescribe(name) { let str; // 存储判断结果 const getDescribe = describeForNameMap.find((item) => item[0](name)); if (getDescribe) { str = getDescribe[1](); } else { str = "此人比较神秘!"; } // 对判断结果str的一些处理 // ...... console.log(str); return str;}

查看优化后的getUserDescribe函数我们能够知道,它从describeForNameMap获取了一个值赋值给了str(describeForNameMap是如何返回值的我们并不关心),之后对str作了一些处理。这就突出了getUserDescribe函数的重点(对判断结果str进行处理)。

在这个例子中describeForNameMap子数组的第二个元素完全可以直接使用一个值:[(name) => name.length > 3, "名字太长"],但为了整体代码的可扩展性,推荐还是使用函数,因为函数可以接收参数,方便应对之后更复杂的场景。

🔼 结语

分支优化在各种语言中都有不同的实现方式和应用场景,本篇通过JavaScript介绍了两种代码分支优化的思想,代码的实现非常简单,重点在于这种思想的应用。

其实关于分支优化这个问题一直存在争议,目前存在两种观点:

观点1:压根不需要多此一举去优化它,并且优化后的代码因为多创建了一个对象/数组,对对象/数组进行检索反而比单纯的if else还是废性能。观点2:分支优化后的代码可读性/可维护性更好,并且引入对象/数组所带来的性能问题在当今时代根本不值一提。
本文链接地址:https://www.jiuchutong.com/zhishi/297329.html 转载请保留说明!

上一篇:微信小程序 slot插槽基本使用(微信小程序slot)

下一篇:Code For Better 谷歌开发者之声——初识Web与谷歌,拉起兴趣之心。

  • 怎样取消支付宝的刷脸支付(怎样取消支付宝亲情卡)

    怎样取消支付宝的刷脸支付(怎样取消支付宝亲情卡)

  • 回收微信号干嘛用的(回收微信号干嘛用的 安不安全)

    回收微信号干嘛用的(回收微信号干嘛用的 安不安全)

  • 华为matebooke指纹传感器在哪(华为matebooke指纹设置)

    华为matebooke指纹传感器在哪(华为matebooke指纹设置)

  • vivos1可以快充吗(vivos1支持多少瓦闪充)

    vivos1可以快充吗(vivos1支持多少瓦闪充)

  • 双引号怎么打在电脑上(双引号怎么打在田字格中例子)

    双引号怎么打在电脑上(双引号怎么打在田字格中例子)

  • 手机页面显示不全怎么办(手机页面显示不全怎么设置)

    手机页面显示不全怎么办(手机页面显示不全怎么设置)

  • qq资料卡展示在哪里设置(qq资料卡显示设置在哪里)

    qq资料卡展示在哪里设置(qq资料卡显示设置在哪里)

  • 手机qq的生日怎么删除(手机qq生日怎么不提醒别人)

    手机qq的生日怎么删除(手机qq生日怎么不提醒别人)

  • 安装内存4g可用2g是什么情况(安装内存4g可用2.92g是什么情况)

    安装内存4g可用2g是什么情况(安装内存4g可用2.92g是什么情况)

  • word激活失败还能用吗(word2013激活失败)

    word激活失败还能用吗(word2013激活失败)

  • 买家id是什么意思啊(买家id是淘宝名还是会员名)

    买家id是什么意思啊(买家id是淘宝名还是会员名)

  • 怎么把qq名字变成彩色(怎么把QQ名字变成动态时间)

    怎么把qq名字变成彩色(怎么把QQ名字变成动态时间)

  • 闲鱼拍卖保证金是什么(闲鱼拍卖保证金一般设置多少)

    闲鱼拍卖保证金是什么(闲鱼拍卖保证金一般设置多少)

  • 淘宝一般多久自动收货(淘宝一般多久自动签收)

    淘宝一般多久自动收货(淘宝一般多久自动签收)

  • 快手解除绑定的手机号(快手解除绑定的实名认证需要多久可以重新绑定)

    快手解除绑定的手机号(快手解除绑定的实名认证需要多久可以重新绑定)

  • 苹果手机的云盘在哪找(苹果手机的云盘可以关掉嘛)

    苹果手机的云盘在哪找(苹果手机的云盘可以关掉嘛)

  • 小米9的双频gps要开吗(小米手机双频gps是什么意思)

    小米9的双频gps要开吗(小米手机双频gps是什么意思)

  • 结构化方法的基本原则(结构化方法的基本要点)

    结构化方法的基本原则(结构化方法的基本要点)

  • vivox9splus怎么出厂设置(vivo x9如何)

    vivox9splus怎么出厂设置(vivo x9如何)

  • 华为荣耀9x电池容量(华为荣耀9x电池多少钱)

    华为荣耀9x电池容量(华为荣耀9x电池多少钱)

  • 淘宝apass会员取消了吗(淘宝apass会员消费多少)

    淘宝apass会员取消了吗(淘宝apass会员消费多少)

  • ie60和ie40pro买哪个(ie60对比ie80)

    ie60和ie40pro买哪个(ie60对比ie80)

  • 网易云音乐怎么改手机号(网易云音乐怎么取消自动续费)

    网易云音乐怎么改手机号(网易云音乐怎么取消自动续费)

  • schedhlp.exe - schedhlp是什么进程 作用是什么

    schedhlp.exe - schedhlp是什么进程 作用是什么

  • 【平常心无焦虑探讨】未来谁将被淘汰—在日常网络安全工作中使用GPT的感受(平常心下一句该怎么说)

    【平常心无焦虑探讨】未来谁将被淘汰—在日常网络安全工作中使用GPT的感受(平常心下一句该怎么说)

  • 海关完税价格是什么
  • 在外地施工的企业应该在哪里申报
  • 记账凭证核算形式是会计核算中最基本的核算形式
  • 如何确定交易性金融资产
  • 工资绩效被扣除怎么办
  • 补贴收入如何入账
  • 社保可以抵扣什么税
  • 主营业务收入体现在资产负债表哪里
  • 完税证明可以代替契税发票吗
  • 户外公司招牌
  • 新会计准则开办费分摊
  • 增值税欠缴税会不会影响企业的信用
  • 海关缴款书税号
  • 医院其他收入包括哪些项目
  • 国外公司进口能退税吗
  • 水资源税的纳税义务人
  • 教育培训机构涉税问题
  • 公司的招标代理费计入什么科目
  • 公司还没有成立,前期的费用怎么开发票呢
  • 无车承运人增值税
  • 房地产记账凭证
  • 仓库间的调拨流程
  • 属于留存收益的是
  • 打车进项可以抵扣吗
  • 小规模企业企业所得税优惠政策2022年
  • 公司账户有钱怎么取出来
  • 怎样取得个人所得税
  • win11更新失败怎么办
  • 苹果7充电设置在哪里
  • 651错误是怎么回事
  • 票据的追索权与再追索权
  • 酒店布草间有摄像头吗
  • 如何设置鼠标移过超链接
  • ·exe是什么文件
  • 解决胃胀气最快方法
  • php判断数组长度
  • PHP:imagecolormatch()的用法_GD库图像处理函数
  • 小程序封装网络怎么设置
  • 520要来了要吵架的赶紧
  • egi脑电数据处理
  • opencv语句
  • tcpdump 监听指定端口
  • 注销退税资格申请报告模板
  • discuz怎么添加diy模块
  • 企业职工生活费
  • 工作服钱可否收取
  • 坏账损失计入损益表
  • vue 鼠标移入移出(hover)切换显示图片问题
  • 不认定为一般纳税人的有哪些
  • sql2008r2怎么用
  • 政府补助如何确定收入
  • 新公司第一年年度总结
  • 小规模纳税人的税率是多少
  • 无形资产摊销完以后得账务处理
  • 小规模企业收到专票怎么做账
  • 公司现金收付管理
  • 劳务关系需要交税吗
  • 应付账款可以用现金支付吗
  • 负担、支付所得的企业
  • 交易性金融资产公允价值变动计入
  • 企业多结转的成本跨年怎么冲回?
  • 股票增发给谁
  • 仓库货架应该计入什么科目
  • mysql数据库高可用架构
  • mac和iphone互动
  • win8电脑远程控制怎么弄
  • Windows 8 Consumer Preview 中的新热键介绍
  • 学习英语
  • bash linux命令
  • js的document.getelembyid
  • angular.js
  • unity-chan
  • androidstudio安装gradle不成功
  • 新浪微博手机客户端下载
  • perl常用函数
  • android 布局属性大全
  • 开的发票怎么抽奖
  • 外地户口在绍兴读小学
  • 双公开双反馈什么意思
  • 郑州市国家税务局地址在哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设