项目里满是if-else？用这5招优化if-else让你的代码清爽到飞起

咱写代码时，最烦看到一大坨if-else堆在一起------又难读又难改，出了bug找半天。今天分享5个接地气的方法，把那些乱糟糟的条件判断给"捋顺"，附代码例子，看完就能用！

一、策略模式：把"条件+逻辑"打包成对象

核心思路 ：把每个if对应的"条件"和"处理逻辑"，做成一个一个的"策略对象"，用的时候直接根据条件选对应的策略执行。

举个例子：原来的if-else写法

比如做一个订单支付方式的处理：

javascript 复制代码

// 又长又乱的if-else
function handlePay(type, money) {
  if (type === 'wechat') {
    console.log(`微信支付${money}元`);
    // 微信支付的一堆逻辑...
  } else if (type === 'alipay') {
    console.log(`支付宝支付${money}元`);
    // 支付宝支付的一堆逻辑...
  } else if (type === 'card') {
    console.log(`银行卡支付${money}元`);
    // 银行卡支付的一堆逻辑...
  } else {
    console.log('支付方式不支持');
  }
}

策略模式改造后

javascript 复制代码

// 1. 定义策略对象：把每个条件的逻辑单独拆出来
const payStrategies = {
  wechat: (money) => {
    console.log(`微信支付${money}元`);
    // 微信支付逻辑...
  },
  alipay: (money) => {
    console.log(`支付宝支付${money}元`);
    // 支付宝支付逻辑...
  },
  card: (money) => {
    console.log(`银行卡支付${money}元`);
    // 银行卡支付逻辑...
  },
  default: () => console.log('支付方式不支持')
};

// 2. 调用的时候直接选策略
function handlePay(type, money) {
  // 找不到对应的策略就用default
  const strategy = payStrategies[type] || payStrategies.default;
  strategy(money);
}

// 用的时候贼清爽
handlePay('wechat', 100); // 微信支付100元

二、表驱动法：用"查找表"代替条件判断

核心思路 ：把"条件"和"结果"存在一个对象/数组里，不用写if，直接通过"查字典"的方式拿结果。

举个例子：判断用户等级对应的权益

原来的if-else：

javascript 复制代码

function getVipRights(level) {
  if (level === 1) {
    return '每月1次免运费';
  } else if (level === 2) {
    return '每月3次免运费+会员折扣';
  } else if (level === 3) {
    return '无限免运费+会员折扣+专属客服';
  } else {
    return '普通用户权益';
  }
}

表驱动法改造后

javascript 复制代码

// 1. 先做一个"权益表"
const vipRightsTable = {
  1: '每月1次免运费',
  2: '每月3次免运费+会员折扣',
  3: '无限免运费+会员折扣+专属客服',
  default: '普通用户权益'
};

// 2. 直接查表，不用写if！
function getVipRights(level) {
  return vipRightsTable[level] || vipRightsTable.default;
}

console.log(getVipRights(2)); // 每月3次免运费+会员折扣

三、多态：让不同对象自己"做决定"

核心思路 ：如果条件是"不同的对象类型"，就让每个对象自己实现对应的逻辑，不用在外面写if判断类型。

举个例子：不同类型的消息通知

原来的if-else：

javascript 复制代码

// 给不同类型的用户发通知
function sendMsg(userType, content) {
  if (userType === 'normal') {
    console.log(`给普通用户发消息：${content}`);
  } else if (userType === 'vip') {
    console.log(`给VIP用户发消息（标红）：${content}`);
  } else if (userType === 'svip') {
    console.log(`给SVIP用户发消息（标红+弹窗）：${content}`);
  }
}

多态改造后

javascript 复制代码

// 1. 每个用户类型对应一个类，自己实现sendMsg方法
class NormalUser {
  sendMsg(content) {
    console.log(`给普通用户发消息：${content}`);
  }
}

class VipUser {
  sendMsg(content) {
    console.log(`给VIP用户发消息（标红）：${content}`);
  }
}

class SvipUser {
  sendMsg(content) {
    console.log(`给SVIP用户发消息（标红+弹窗）：${content}`);
  }
}

// 2. 调用的时候直接让对象自己执行，不用判断类型
const user1 = new VipUser();
user1.sendMsg('你的会员快到期啦'); // 给VIP用户发消息（标红）：你的会员快到期啦

四、提取函数：把"坨逻辑"拆成小函数

核心思路 ：如果if-else里的逻辑很复杂，先把每个分支的逻辑拆成独立的小函数，哪怕还是用if-else，代码也会清爽很多。

举个例子：提交表单前的校验

原来的if-else（逻辑堆在一起）：

javascript 复制代码

function checkForm(data) {
  if (!data.username) {
    alert('用户名不能为空');
    return false;
  } else if (data.username.length < 3) {
    alert('用户名至少3位');
    return false;
  } else if (!data.password) {
    alert('密码不能为空');
    return false;
  } else if (data.password.length < 6) {
    alert('密码至少6位');
    return false;
  }
  return true;
}

提取函数后

javascript 复制代码

// 1. 把每个校验逻辑拆成小函数
function checkUsername(username) {
  if (!username) {
    alert('用户名不能为空');
    return false;
  }
  if (username.length < 3) {
    alert('用户名至少3位');
    return false;
  }
  return true;
}

function checkPassword(password) {
  if (!password) {
    alert('密码不能为空');
    return false;
  }
  if (password.length < 6) {
    alert('密码至少6位');
    return false;
  }
  return true;
}

// 2. 主函数里只负责调用，逻辑清晰多了
function checkForm(data) {
  return checkUsername(data.username) && checkPassword(data.password);
}

五、状态模式：用"状态"代替"条件"

核心思路 ：如果if-else是在判断"对象当前的状态"，就把每个状态对应的逻辑做成"状态类"，让对象在不同状态下自动执行对应逻辑。

举个例子：订单状态的处理

原来的if-else：

javascript 复制代码

// 处理订单的不同状态
function handleOrderStatus(order) {
  if (order.status === 'unpaid') {
    console.log('订单待支付，可取消');
  } else if (order.status === 'paid') {
    console.log('订单已支付，可发货');
  } else if (order.status === 'shipped') {
    console.log('订单已发货，可确认收货');
  } else if (order.status === 'completed') {
    console.log('订单已完成，可评价');
  }
}

状态模式改造后

javascript 复制代码

// 1. 每个状态对应一个类，实现handle方法
class UnpaidStatus {
  handle() {
    console.log('订单待支付，可取消');
  }
}

class PaidStatus {
  handle() {
    console.log('订单已支付，可发货');
  }
}

class ShippedStatus {
  handle() {
    console.log('订单已发货，可确认收货');
  }
}

class CompletedStatus {
  handle() {
    console.log('订单已完成，可评价');
  }
}

// 2. 订单类里维护当前状态，调用时直接让状态执行逻辑
class Order {
  constructor(status) {
    // 根据状态初始化对应的状态对象
    this.setStatus(status);
  }

  setStatus(status) {
    switch (status) {
      case 'unpaid':
        this.statusObj = new UnpaidStatus();
        break;
      case 'paid':
        this.statusObj = new PaidStatus();
        break;
      case 'shipped':
        this.statusObj = new ShippedStatus();
        break;
      case 'completed':
        this.statusObj = new CompletedStatus();
        break;
    }
  }

  // 不用写if，直接调用当前状态的handle
  handleStatus() {
    this.statusObj.handle();
  }
}

// 用的时候超方便
const order = new Order('paid');
order.handleStatus(); // 订单已支付，可发货

总结：啥场景用啥方法？

给你们整个"懒人对照表"：

场景	推荐方法
条件是"不同的操作类型"（比如支付方式）	策略模式
条件对应"固定的结果/简单逻辑"（比如用户权益）	表驱动法
条件是"不同的对象类型"（比如不同用户）	多态
条件里的逻辑很复杂（比如表单校验）	提取函数
条件是"对象的不同状态"（比如订单状态）	状态模式

🎯 2025年最新大厂前端场景面试题（完整题库+解析）

一份系统整理的前端专项面试资料，内容涵盖 JavaScript、React、Vue、Node.js、性能优化、工程化、浏览器原理、网络协议等高频考点，所有题目均来自大厂真实场景与近期面试趋势。

📚 资料详情

方向：前端开发

格式：PDF

页数：251页（含详细答案与扩展解析）

适用：面试冲刺、体系复盘、技术查漏

📥 获取方式

👉 夸克网盘链接：https://pan.quark.cn/s/bcf695cf5ede

（可直接下载，无需提取码）