解决前端if else判断过多重复

在前端项目中，如果你发现代码中存在过多连续的if-else判断语句，这通常意味着代码复杂度较高，可读性和维护性下降。

1.使用条件对象

创建一个对象字面量，将不同情况的处理逻辑映射到不同的属性或方法上。这样可以将if-else语句转化为对象属性的查找操作。

const conditions = {
  condition1: () => {
    // 处理条件1的逻辑
  },
  condition2: () => {
    // 处理条件2的逻辑
  },
  condition3: () => {
    // 处理条件3的逻辑
  }
};

// 根据条件名称执行对应的操作
function handleCondition(conditionName) {
  if (conditions[conditionName]) {
    conditions[conditionName]();
  } else {
    console.error("无效的条件名称");
  }
}

// 使用示例
handleCondition("condition1"); // 执行条件1的逻辑
handleCondition("condition2"); // 执行条件2的逻辑
handleCondition("condition3"); // 执行条件3的逻辑

2.多态和继承

 将每个条件的处理逻辑封装到对应的子类中，并在父类中定义默认的处理方法。

class BaseHandler {
  handle() {
    // 公共逻辑
  }
}

class ConcreteHandler1 extends BaseHandler {
  handle() {
    // 处理情况1的逻辑
  }
}

class ConcreteHandler2 extends BaseHandler {
  handle() {
    // 处理情况2的逻辑
  }
}

// 使用多态来调用处理逻辑
const handler = new ConcreteHandler1();
handler.handle();

3.函数式编程和条件链

 使用函数式编程的方式，将条件判断链式化，提高可读性。例如，使用if-else链替代为条件链。

const result = condition =>
  condition === "A" ? doA()
  : condition === "B" ? doB()
  : condition === "C" ? doC()
  : null;