位置: 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与谷歌,拉起兴趣之心。

  • 重置电脑时出现问题,未执行任何更改(重置电脑时出现问题未能进行更改的原因)

    重置电脑时出现问题,未执行任何更改(重置电脑时出现问题未能进行更改的原因)

  • 如何解绑微信的电话(如何解绑微信的手机号)

    如何解绑微信的电话(如何解绑微信的手机号)

  • vivoy66怎么分屏钉钉(vivoy66怎么分屏快手)

    vivoy66怎么分屏钉钉(vivoy66怎么分屏快手)

  • 微博在哪设置支付密码(微博支付设置在哪里设置)

    微博在哪设置支付密码(微博支付设置在哪里设置)

  • 苹果手机一个id两个手机来电话同时响(苹果手机一个id怎么关闭所有共享)

    苹果手机一个id两个手机来电话同时响(苹果手机一个id怎么关闭所有共享)

  • 闲鱼扣分多久清零一次(闲鱼扣分多久清除)

    闲鱼扣分多久清零一次(闲鱼扣分多久清除)

  • access数据库中可以定义格式属性的字段类型是(access数据库可以包含几个数据表)

    access数据库中可以定义格式属性的字段类型是(access数据库可以包含几个数据表)

  • 移动图表位于哪个命令选项?(图表移动数据系列的位置)

    移动图表位于哪个命令选项?(图表移动数据系列的位置)

  • 华为自带app能删除吗(华为手机删自带应用)

    华为自带app能删除吗(华为手机删自带应用)

  • 电脑怎么扫描文件步骤(电脑怎么扫描文件图片)

    电脑怎么扫描文件步骤(电脑怎么扫描文件图片)

  • 苹果商店简短验证验证码刷不出来(苹果商店简短验证输不了字母)

    苹果商店简短验证验证码刷不出来(苹果商店简短验证输不了字母)

  • 京东怎么延长确认收货(京东怎么延长确定收货)

    京东怎么延长确认收货(京东怎么延长确定收货)

  • 品胜充电宝开关怎么用(品胜充电宝开关机)

    品胜充电宝开关怎么用(品胜充电宝开关机)

  • 海康威视找不到硬盘(海康威视找不到摄像头IP)

    海康威视找不到硬盘(海康威视找不到摄像头IP)

  • 抖音怎么复制评论(抖音怎么复制评论加群)

    抖音怎么复制评论(抖音怎么复制评论加群)

  • 钉钉怎么截图聊天窗口(钉钉怎么截图聊天记录长图)

    钉钉怎么截图聊天窗口(钉钉怎么截图聊天记录长图)

  • 怎么修改网页标题(怎么修改网页标签)

    怎么修改网页标题(怎么修改网页标签)

  • 花呗什么时候出来的(花呗什么时候出的)

    花呗什么时候出来的(花呗什么时候出的)

  • macbook怎么看内存(怎么查看macbook的内存)

    macbook怎么看内存(怎么查看macbook的内存)

  • 发动机编号含义(发动机编号含义图解)

    发动机编号含义(发动机编号含义图解)

  • 8p怎么强制关机(8p强制关机没反应)

    8p怎么强制关机(8p强制关机没反应)

  • 王者荣耀中廉颇怎么出装?(王者荣耀中廉颇是哪一个族的族长)

    王者荣耀中廉颇怎么出装?(王者荣耀中廉颇是哪一个族的族长)

  • Python lxml库的安装和使用(python怎么安装lxml库)

    Python lxml库的安装和使用(python怎么安装lxml库)

  • 如何查企业是一级企业
  • 外经证预缴税款征收率
  • 公司车辆过户给个人车牌可以保留吗
  • 农产品的税率是9%吗
  • 用友t6会计科目在哪里找
  • 买新车时旧车置换新车划算吗
  • 免税 普票
  • 其他项目工会筹备金怎么报税
  • 车辆购置税如何查询
  • 服务行业成本费用问题与对策
  • 收到增值税普通发票
  • 长期合同收入与应收帐款如何处理?
  • 不同项目之间进项税能否抵扣?
  • 建筑业交税会计分录
  • 申请最高开票限额不超过10万元的无需事前实地查验
  • 营业外收入税前列支
  • 减税降费在中国 应形成制度性
  • 员工生日福利申请
  • 租金一次性付清的账务处理
  • 油类增值税是多少
  • 跨年暂估成本的账务处理冲回
  • 超市预付卡过了还能退吗
  • 股东投入的资金可以计入资本公积吗
  • 补报的年报可以更改吗
  • 生物制品税率3%税率什么时候开始的
  • 哪些发票不能进账
  • 外出经营范围
  • web主要的请求方式有几种
  • 小程序项目开发流程
  • 视觉slam十四讲笔记
  • vue路由跳转的三种方法
  • 服务业小规模纳税人税率
  • 门诊收费票据能作为报销凭证吗
  • 从财务报表中能看出什么
  • 帝国cms使用手册
  • 织梦怎么新建页面
  • MySQL中使用什么语句来更新表中的记录
  • 公账转钱出来要收手续费吗
  • 母公司给我们减工资
  • 购买债券的利息会计分录
  • 申报表填完后下一步是什么
  • 税控盘有什么用途和作用
  • 什么是备抵类账户
  • 广告费的税费分录
  • 房地产开发成本和房地产开发产品
  • 已认证的红字发票怎么开
  • 商家代金券谁出钱
  • 申请到了专利费多少钱
  • 网络使用费属于办公费吗为什么
  • 工程进度开票如何入账
  • 出库单上面的价格是什么价格
  • 工资条上为什么不显示生育险
  • 普通日记账如何记账
  • 建账选用什么会计制度
  • mysql调用java
  • 阿里云linux 服务器 字符集
  • win10磁盘占用100%卡死
  • centos7如何设置固定ip
  • win10怎么办
  • mac电脑怎么装win10
  • linux操作系统的安装步骤
  • xp电脑繁体系统改简体
  • win10通过任务管理器打开设置
  • win10地理位置
  • w10自启
  • 在linux系统中创建用户账户
  • win10如何移动应用程序
  • OpenGL Tutorial: (1) Setting up OpenGL with Visual Studio
  • Ext JS 4实现带week(星期)的日期选择控件(实战一)
  • python hashcode
  • python外星人入侵游戏
  • JavaScript的RequireJS库入门指南
  • android studio 无法解析 aar
  • android 图片视频轮播框架
  • python3.10性能
  • 企业员工可以放弃购买社保吗
  • 学校 税务登记
  • 土地占用税是什么意思
  • 天津户籍信息查询
  • 电话号码公开是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设