Javascript 地狱级的if else / switch case该如何优化?

目录

问题

一、7大策略优化 

1.单个if语句优化 

2.if/else语句优化

3.多条件判断

4.多个 if else 嵌套优化策略 

问题场景

如何优化 

1.使用卫语句

2. try catch优化

3. 可选链 optional chaining

5.Map优化

场景实战

6.策略模式优化 

7.复杂二维数组策略模式

优化点

二、总结思考

往期回顾


问题

我们在项目开发过程中,经常要做各种条件判断,不同条件执行不同的逻辑代码,但随着业务的越来越复杂,这种if else / switch case堆得越来越多,下面我介绍7种优化方案,大家根据实际场景选择优化,不足之处,请大家补充。

一、7大策略优化 

1.单个if语句优化 

 使用&& || 优化

if (e) { this.getUser()}

优化后

e && this.getUser()

2.if/else语句优化

 如果遇到单一条件逻辑,我们可以用三元表达式优化,比如如下代码:

// 原逻辑
if ( type === 1) {console.log(1)
} else {console.log(1)
}// 优化后
type === 1 ? console.log(1) : console.log(1)

3.多条件判断

 如果条件较多,那我们可以使用Array.includes(),比如如下代码:

// switch场景
switch (type) {case 0:// 场景0breakcase 1:// 场景1breakcase 2:// 场景2breakcase 3:// 场景3break// 场景...default:
}// if else 场景
if (type === 0) {// do sth ...
} else if (type === 1) {// do sth ...
} else if (type === 2) {// do sth ...
} else if (type === 3) {// do sth ...
}

用 includes重构后,如下

let types = [1,2,3,4];
if (types.includes(type)) {// do sth ...
}

4.多个 if else 嵌套优化策略 

问题场景

如果页面的展示内容规则是,后端返回某个字段则展示,不返回则不展示,比如那种层层嵌套的json数据,可能嵌套十几层,下面我做个简单案例:

// 存在habby的数据
let res = {status: 200,msg: "success",data: {userInfo: {name: "fuchaoyang",hobby: ["打篮球", "唱歌", "学习"],},},
};
// 不存在habby的数据
let res2 = {status: 200,msg: "success",data: {userInfo: {name: "fuchaoyang",},},
};

那么我们可能就会写出如下的代码

function getHobby(res) {if (res.data) {if (res.data.userInfo) {if (Array.isArray(res.data.userInfo.hobby)) {if (res.data.userInfo.hobby.length) {// 进行业务逻辑操作return res.data.userInfo.hobby;} else {return "hobby字段为空";}} else {return "hobby字段不是一个数组";}} else {return "userInfo字段不存在";}} else {return "data字段不存在";}
}

注意: if else 一般不建议嵌套超过三层,如果一段代码存在过多的 if else 嵌套,代码的可读性就会急速下降,后期维护难度也大大提高,应该尽量避免过多的 if else 嵌套。

如何优化 

1.使用卫语句
if (!res.data) return "data字段不存在";
if (!res.data.userInfo) return "userInfo字段不存在";
if (!Array.isArray(res.data.userInfo.boddy)) return "hobby字段不是一个数组";
if (res.data.userInfo.hobby.length) {// 进行业务逻辑操作
}
2. try catch优化
try {// 有可能出现错误的代码写在这里if (res.data.userInfo.hobby.length) {// 进行业务逻辑操作}
} catch (error) {// 出错后的处理写在这里
}

注意:如果 try 中的代码没有出错,则程序正常运行 try 中的内容后,不会执行 catch 中的内容
如果 try 中的代码出错,程序立即跳入 catch 中继续执行,try 中出错后的程序就不再执行了。

3. 可选链 optional chaining

对一个空值进行属性读取时,程序会抛出异常;在多级嵌套的对象中取属性值的时候,更容易出现这个问题,为了保证程序的健壮性,就需要确保对象不为空时,再读取下一级的值 。

// 可选链优化
if (res?.data?.userInfo?.hobby?.length) {// 进行业务逻辑操作
}

注意:操作符 *?.* 会检查操作符左边的值是否是空值。如果是 null 或 undefined,这个表达式就终止然后返回 undefined。否则,这个表达式继续执行检查 。

5.Map优化

 Map 类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。

场景实战

比如我们在搭建前端架构时,需要在拦截器中根据不同的异常码,那么我们就可以定义一个map,里面存储对应的状态码和相应的操作。

let statusMap = new Map([[200, do200Case],[301, do301Case],[400, do400Case],[401, do401Case],[500, do500Case],[503, do503Case]
])
// 定义对应的方法:
function do200Case(){// 状态码 200 逻辑处理
}
function do301Case(){// 状态码 301 逻辑处理
}
function do400Case(){// 状态码 400 逻辑处理
}
function do401Case(){// 状态码 401 逻辑处理
}
function do500Case(){// 状态码 500 逻辑处理
}
function do503Case(){// 状态码 503 逻辑处理
}
//当符合某个状态时,执行相应的操作
statusMap.get(type)()

缺点:如果状态很多,就要写很多对应的函数,造成重复切单一的行为操作。

6.策略模式优化 

实现的原理是存到对象里面,然后利用用对象的多态性来实现,比如如下代码:

// 根据职业描述
function getInfomation(name) {const describeMap = {teacher: () => console.log("我是学校的老师"),chef: () => console.log("我是酒店的大厨"),soldier: () => console.log("我是保家卫国的军人"),driver: () => console.log("我是滴滴司机"),waiter: () => console.log("我是酒店服务员"),};return describeMap[name] ? describeMap[name]() : console.log("没找到你需要的职位描述!");
}
getInfomation('teacher');
getInfomation('default');

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

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

7.复杂二维数组策略模式

对于结构的代码,我们可以引入二维数组来进行优化:

const describeMapArrary = [[(name) => name === 'teacher', // 判断条件() => {// 业务逻辑处理...console.log('teacher',"我是学校的老师") // 执行函数}],[(name) => name === 'chef', () => {// 业务逻辑处理...console.log('chef',"我是酒店的大厨")}],[(name) => name === 'soldier', () => {// 业务逻辑处理...console.log('soldier',"我是保家卫国的军人")}],[(name) => name === 'driver', () => {// 业务逻辑处理...console.log('driver',"我是滴滴司机");return 'driver 我是driver场景的返回值'; // 有返回值场景}],
];function getDescribeName(name) {// 获取符合条件的子数组const getDescribe = describeMapArrary.find((item) => item[0](name));// 子数组存在则运行子数组中的第二个元素(执行函数)return getDescribe ? getDescribe[1]() : console.log('default',"没找到你需要的职位描述!");
}
getDescribeName('soldier'); // 查询map中存在的条件
console.log(getDescribeName('driver')); // 查询map中存在的条件并返回函数处理值
getDescribeName('fuchaoyang'); // 查询map中不存在的条件

对象是一个独立的结构,我们将它抽离到了函数体之外,这样对于后期维护更加友好。

优化点

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

二、总结思考

1.多重判断时使用 Array.includes

2.使用对象或使用 map 结构来优化if else,而不是 Switch 语句

3.更少的嵌套,尽早 return ,用卫语句优化

4.项目中需要大量算法,大量匹配模式时,可以考虑策略模式

5.使用默认参数和解构

讲到这里,相信大家对前端if else / switch case的优化有了新的认识,如有不足之处,请大家补充,欢迎在评论区交流。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下博主会持续更新。。。。

我的个人博客:https://code-nav.top

往期回顾

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些?

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击?什么是 CSRF?什么是点击劫持?如何防御

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/624182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单易用的快速原型软件终于被我找到了!

在产品开发过程中,原型设计是一个非常重要的环节,它不仅有助于团队之间的合作和沟通,而且是产品是否符合用户体验的关键。在本文中,我们将推荐一些有用的原型设计工具 即时设计 即时设计是一种在线原型设计工具。你可以用它在线…

RPA与通知机器人的完美结合

写在前面 在现代快节奏的工作环境中,我们经常会面临多个任务同时进行的情况,你还在为时间不够用、忙碌而惆怅吗?你还在为时刻盯着电脑流程而烦恼吗?你还在为及时收不到自己的自动化任务进度而焦躁吗?别担心&#xff0…

目标检测数据集 - 行人检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍:行人检测数据集,真实场景高质量图片数据,涉及场景丰富,比如校园行人、街景行人、道路行人、遮挡行人、严重遮挡行人数据;适用实际项目应用:公共场所监控场景下行人检测项目,以及作为…

中国关心下一代工作委员会健康体育发展中心美育舞蹈考官一王雪

王雪—— 《中国关心下一代工作委员会》健康体育发展中心、美育舞蹈考官、评委 北京舞蹈学院舞蹈编导 朝阳区小红门地区文化艺术-领头人 中国舞舞蹈家协会会员 2019年7月7日中国观网第六届京津冀淑女 2021年辅导学生登上央视春晚 《听我说》 2023年4月22日带学生参加万人…

Vue 3,element table表格动态添加

el-table实现表格动态新增/插入/删除表格行&#xff0c;可编辑单元格 效果图 代码实现 <template><el-table :data"formDate.scoreList4" style"width:100%;height: 96%;" stripe show-summary:summary-method"calculateSummary":he…

【2023年收入最高的10种编程语言】

在过去的一年时间里&#xff08;2022 年 10 月 1 日到 2023 年 10 月 1 日&#xff09; &#xff0c;DevJobsScanner 分析了来自世界各地的超过 1000 万份开发工作机会&#xff0c;以了解市场以及最热门、薪酬最高的编程语言。值得注意的是&#xff0c;本项研究只关注了来自美国…

通过myBatis将sql语句返回的值自动包装成一个java对象(1)以及SqlSessionFactory

如果我们从数据库中读取了一个用户的两个属性——用户名和密码。此时我们希望把这两个属性放入一个java的用户对象中。我们可以选择new一个user对象&#xff0c;向构造器传入我们刚刚读取的两个属性。但一旦从数据库中读取的内容变多&#xff0c;我们就需要new很多新的对象。这…

2024年第10届计算与人工智能国际会议(ICCAI 2024)即将召开

时间&#xff1a;2024年4月26-29日 地点&#xff1a;印度尼西亚巴厘岛 会议官网&#xff1a;ICCAI 2024|Bali, Indonesiahttps://www.iccai.net/index.html 2024年第十届计算与人工智能国际会议&#xff08;ICCAI 2024&#xff09;将于2024年4月26-29日在印度尼西亚巴厘岛举行…

推荐一款实用的免费开源局域网传输工具!轻松搭建网盘的神器!

本文小编给大家分享一款免费开源软件 Filebrowser&#xff0c;使用它可以轻松搭建属于你的个人网盘和网页版文件管理器。 它能做什么呢&#xff1f;想必大家也都用过百度网盘或阿里云盘之类的云存储服务&#xff0c;将自己的所有数据都存储在别人的服务器上&#xff0c;所谓的在…

【开源】基于JAVA的用户画像活动推荐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 兴趣标签模块2.3 活动档案模块2.4 活动报名模块2.5 活动留言模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 数据流程设计3.4 E-R图设计 四、系统展示五、核心代码5.1 查询兴趣标签5.2 查询活动推荐…

原型设计工具Axure RP结合内网穿透实现本地web页面公网访问协同办公

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

coala,一个超级实用的 Python 库!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个超级实用的 Python 库 - coala。 Github地址&#xff1a;https://github.com/coala/coala/ 在现代软件开发中&#xff0c;代码质量和一致性是非常重要的。然而&#xff0c…

Docker 的工作原理及安装步骤【云原生】

文章目录 1. Docker 的工作原理2. Docker 与虚拟机3. Docker 架构4. 安装 Docker5. 配置镜像加速 1. Docker 的工作原理 大型项目组件较多&#xff0c;运行环境也较为复杂&#xff0c;部署会碰到一些问题&#xff1a; ① 依赖关系复杂&#xff0c;容易出现兼容性问题&#xff1…

本地搭建Oracle数据库结合内网穿透实现公网环境远程访问

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2…

text、icon、progress、rich-text等基础内容小部件(Widget)组件代码明细

属性说明和代码明细如下&#xff1a; text 文本。 属性说明 属性名类型默认值必填说明user-selectbooleanfalse否文本是否可选&#xff0c;该属性会使文本节点显示为 inline-block 示例代码 TYML <view class"text-page"><view class"page-body…

升降式OLED透明屏,影响价格的因素有这6大方面

以下是一篇关于升降OLED透明屏的文章&#xff0c;包括其规格、实现原理、应用领域、特色优势和价格等方面&#xff1a; 升降OLED透明屏的规格升降OLED透明屏的尺寸可以根据不同的需求进行定制&#xff0c;尺寸范围从32英寸到200英寸不等。同时&#xff0c;它的厚度不到1厘米&am…

【面试突击】Java内存模型实战

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术 的推送 发送 资料 可领取 深入理…

使用GraphQL实现简单的增删改查

使用GraphQL实现简单的增删改查 GraphQL官网&#xff1a;https://graphql.cn/ Altair Graphql 调试工具&#xff1a;https://saltair.sirmuel.design/#download 或者添加扩展使用网页版&#xff1a;https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeel…

中国数据库市场的领军黑马——亚信安慧AntDB数据库

自2008年问世以来&#xff0c;亚信科技AntDB数据库一直在中国国产数据库市场中崭露头角&#xff0c;尤其在信创政策的大力支持下&#xff0c;成为这一领域的一匹黑马。经过多次迭代&#xff0c;AntDB已经发展到了7.0版本&#xff0c;为超高强度和密度的业务需求提供了强有力的解…

基于Python的二氧化碳排放量数据分析系统

项目背景&#xff1a; 随着全球气候变化问题日益严重&#xff0c;减少温室气体排放已成为全球共识。我国作为全球最大的碳排放国&#xff0c;承担着重要的国际责任。为了更好地控制和减少碳排放&#xff0c;需要对全国的碳排放情况进行深入研究和分析。本项目旨在构建一个基于P…