如何减少项目里面if-else

在前端项目中，减少 if-else 可以显著提升代码的可读性、可维护性和扩展性。以下是针对前端场景的优化策略，结合具体示例说明：

1. 策略模式（Strategy Pattern）

适用场景：根据不同条件执行完全不同的逻辑（如表单验证、支付方式选择）
优点：将条件分支转换为独立的策略对象，避免冗长的 if-else 链。

示例：表单验证

javascript 复制代码

// 优化前：if-else 链
function validateInput(type, value) {
  if (type === 'email') {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  } else if (type === 'number') {
    return !isNaN(value);
  } else if (type === 'required') {
    return value.trim() !== '';
  }
  return false;
}

// 优化后：策略模式
const validationStrategies = {
  email: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
  number: value => !isNaN(value),
  required: value => value.trim() !== '',
};

function validateInput(type, value) {
  const strategy = validationStrategies[type];
  return strategy ? strategy(value) : false;
}

2. 状态模式（State Pattern）

适用场景：对象的行为随状态变化而变化（如订单状态、UI 组件状态）。
优点：将状态逻辑封装到独立对象中，避免 if-else 判断状态。

示例：订单状态处理

javascript 复制代码

// 优化前：if-else 判断状态
function handleOrder(order) {
  if (order.status === 'pending') {
    console.log('等待支付');
  } else if (order.status === 'paid') {
    console.log('已支付，准备发货');
  } else if (order.status === 'shipped') {
    console.log('已发货');
  }
}

// 优化后：状态模式
const orderStates = {
  pending: { message: '等待支付' },
  paid: { message: '已支付，准备发货' },
  shipped: { message: '已发货' },
};

function handleOrder(order) {
  const state = orderStates[order.status];
  if (state) console.log(state.message);
}

3. 对象映射（Object Lookup）

适用场景：简单的键值对映射（如路由、枚举类型处理）。
优点：用对象字面量替代 switch 或 if-else。

示例：路由跳转

javascript 复制代码

// 优化前：if-else 判断路由
function navigate(path) {
  if (path === '/home') {
    renderHome();
  } else if (path === '/about') {
    renderAbout();
  } else if (path === '/contact') {
    renderContact();
  }
}

// 优化后：对象映射
const routes = {
  '/home': renderHome,
  '/about': renderAbout,
  '/contact': renderContact,
};

function navigate(path) {
  const handler = routes[path];
  if (handler) handler();
}

4. 多态与组件化

适用场景：UI 渲染逻辑分支（如不同类型卡片、列表项）。
优点：通过组件化拆分逻辑，利用 React/Vue 的条件渲染或动态组件。

示例：React 动态组件

javascript 复制代码

// 优化前：if-else 渲染不同组件
function UserCard({ user }) {
  if (user.type === 'admin') {
    return <AdminCard user={user} />;
  } else if (user.type === 'guest') {
    return <GuestCard user={user} />;
  }
  return null;
}

// 优化后：动态组件
const cardComponents = {
  admin: AdminCard,
  guest: GuestCard,
};

function UserCard({ user }) {
  const CardComponent = cardComponents[user.type];
  return CardComponent ? <CardComponent user={user} /> : null;
}

5. 默认参数与空值合并

适用场景：处理可选参数或默认值，避免冗余判断。
优点：减少对 undefined 或 null 的显式检查。

示例：默认配置

javascript 复制代码

// 优化前：if-else 处理默认值
function createUser(options) {
  const name = options.name ? options.name : 'Anonymous';
  const age = options.age ? options.age : 18;
  // ...
}

// 优化后：默认参数 + 空值合并
function createUser({ name = 'Anonymous', age = 18 } = {}) {
  // 直接使用 name 和 age
}

6. 函数式编程工具

适用场景：数组操作或高阶逻辑分支。
优点：利用 filter、map、reduce 等避免循环中的 if-else。

示例：过滤数据

javascript 复制代码

const users = [
  { id: 1, name: 'Alice', isAdmin: true },
  { id: 2, name: 'Bob', isAdmin: false },
];

// 优化前：if-else 过滤
const admins = [];
for (const user of users) {
  if (user.isAdmin) admins.push(user);
}

// 优化后：filter
const admins = users.filter(user => user.isAdmin);

7. 提前返回（Guard Clauses）

适用场景：减少嵌套的 if-else 结构。
优点：通过提前返回排除异常情况，使主逻辑更清晰。

示例：权限检查

javascript 复制代码

// 优化前：嵌套 if-else
function canAccess(user) {
  if (user.isLoggedIn) {
    if (user.role === 'admin') {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

// 优化后：提前返回
function canAccess(user) {
  if (!user.isLoggedIn) return false;
  if (user.role === 'admin') return true;
  return false;
}

总结：如何选择？

方法	适用场景	前端框架示例
策略模式	复杂条件分支逻辑	表单验证、支付方式
状态模式	对象状态驱动行为	订单状态机、UI 状态
对象映射	简单的键值对路由	路由跳转、枚举处理
多态组件化	UI 渲染分支	React 动态组件、Vue 插槽
默认参数	默认值处理	函数参数解构
函数式工具	数组/对象操作	filter、map
提前返回	减少嵌套条件	权限检查、表单提交

核心原则：

将变化的部分封装：将条件逻辑提取为独立模块（策略、状态、组件）。
用数据驱动UI：优先使用对象映射或配置表代替条件判断。
保持函数单一职责：一个函数只做一件事，避免混合多个条件逻辑。