都说太多if...else不好，可是有哪些优雅的处理方法，你还在写面条代码么！

下一站丶

已于 2023-05-30 16:07:18 修改

阅读量570

点赞数 18

文章标签：前端 javascript 前端框架

于 2023-05-30 13:58:52 首次发布

本文链接：https://blog.csdn.net/qq2754289818/article/details/130942733

版权

都说太多if…else不好，可是有哪些优雅的处理方法，你还在写面条代码么！

在开发过程中，我们经常会遇到大量的if-else语句，特别是在处理复杂的业务逻辑时。
虽然if-else语句是实现逻辑判断的一种有效手段，但是过多的嵌套会导致代码的可读性和可维护性变差
为了解决这个问题，我们需要采取一些优雅的方式去处理if-else的嵌套，使代码更加简洁、易于维护。

但是当我们业务逻辑复杂的情况下if…else像堆小山一样，反而可读性和可维护性变差
总结几个缺点：阅读困难、高维护成本、可扩展性差。这时候我们就需要优化自己的代码！

我们先来看一段if…else代码

这里说一下业务场景三级联动回显（如有需要可以点击跳转详细三级联动）切割后端返回的code 省市区后端返回的是一串数字code

let codeNew = []
codeFun(310181882)
codeNew = codeFun(code){
	if (code.tostring().length == 4) {
		return codeNew  = [Number(code.tostring().substring(0, 2), code]
	}
	if (code.tostring().length == 6) {
		return codeNew  = [Number(code.tostring().substring(0, 2),Number(code.tostring().substring(0, 4), code]
	}
	if (code.tostring().length == 9) {
		return codeNew  = [Number(code.tostring().substring(0, 2),Number(code.tostring().substring(0, 	4),Number(code.tostring().substring(0, 6), code]
	}
}

这串代码的问题：
1.这一大串要做的事情不明所以，让人很纳闷你为啥要这么做，至少需要一个变量声明一下
2.函数的命名和签名也有问题，codeFun是一个名词，和你主逻辑不太符合。而且函数也不够“纯”，内部修改了一个外部的codeNew
3.里面的Number转化和 code.tostring()转化一下子就降低了代码的可读性

以上代码很长很繁琐接下来看优化后使用switch 方法进行优化 —> 本段代码优化大佬
亿点小知识：优化代码使用到switch特性自动寻址正常的是需要用break进行打断

let codeNew = []
codeNew = getFormCodeArray(310181882)
const getFormCodeArray= (code) => {
  const sub = (str, len) => Number(str.substring(0, len)); // 函数内部定义了一个sub的函数
  const codeStr = code.toString(); // 统一处理
  const codeLen = codeStr.length;
  let res = [sub(codeStr, 2), sub(codeStr, 4), sub(codeStr, 6), code];
  switch (codeLen) {
    case 4:
      res.pop();
    case 6:
      res.pop();
    case 9:
      res.pop();
  }
  res.push(code);
  return res;
};

以上的代码对于大多数的场景还是不适用的当if…else过多的时候我们可以使用枚举进行管理

这里我们模拟个场景做个权限管理
client: 客户： home
staff：员工：home，page1，page2
lead ：领导：home，page2，page3, page4
director：总监：可以查看全部
这个的重点在于 roleIds 是多权限的或者后面需求更改我们可以很快的进行添加和删除枚举值

枚举出角色的权限

<view v-if="access.includes('home')">home</view>
<view v-if="access.includes('page1')">page1</view>
<view v-if="access.includes('page2')">page2</view>
<view v-if="access.includes('page3')">page3</view>
<view v-if="access.includes('page4')">page4</view>
const accesses = {
		client:['home']
		staff: ['home','page1', 'page2'],
		lead : ['home','page2','page3', 'page4'],
		director: ['home','page1', 'page2','page3', 'page4'],
}
export default {
data(){
	access:accesses['client']// 默认是客户
}，
mounted(){
		const roleIds = ['员工','领导']
		if (roleIds.includes("员工")== "员工") {
			this.access = accesses['staff']
		}
		if (roleIds.includes("领导")== "领导") {
			this.access = accesses['lead']
		}
		if (roleIds.includes("总监")== "总监") {
			this.access = accesses['director']
		}
},
}