JavaScript优化if-else复杂判断问题的常用方案

 更新时间:2026年02月11日 09:23:01   作者:DEMO派  
文章总结了八种常用代码优化模式,包括提前返回、卫语句、策略模式、查表法、多态、责任链模式、可选链和空值合并,并建议根据具体业务场景选择合适的优化方案,优先使用简单方案,保持一致性,考虑可读性,适度抽象,并进行充分测试,需要的朋友可以参考下

一、常用方案

1.1 提前返回(Early Return)

// 优化前
function processOrder(order) {
  if (order) {
    if (order.status === 'pending') {
      if (order.items.length > 0) {
        // 处理逻辑
        return calculateTotal(order);
      } else {
        throw new Error('订单无商品');
      }
    } else {
      throw new Error('订单状态无效');
    }
  } else {
    throw new Error('订单不存在');
  }
}

// 优化后
function processOrder(order) {
  if (!order) throw new Error('订单不存在');
  if (order.status !== 'pending') throw new Error('订单状态无效');
  if (order.items.length === 0) throw new Error('订单无商品');
  
  return calculateTotal(order);
}

优点:减少嵌套层级,代码清晰易读
缺点:不适合所有场景,特别是需要处理多种成功路径时

1.2 卫语句(Guard Clauses)

// 优化前
function getUserAccess(user) {
  if (user) {
    if (user.active) {
      if (user.role === 'admin') {
        return 'full-access';
      } else if (user.role === 'editor') {
        return 'edit-access';
      } else {
        return 'read-only';
      }
    } else {
      return 'no-access';
    }
  } else {
    return 'guest-access';
  }
}

// 优化后
function getUserAccess(user) {
  if (!user) return 'guest-access';
  if (!user.active) return 'no-access';
  
  const roleMap = {
    'admin': 'full-access',
    'editor': 'edit-access',
    'default': 'read-only'
  };
  
  return roleMap[user.role] || roleMap.default;
}

优点:提前处理异常情况,主逻辑清晰
缺点:多个 return 语句可能影响可读性

1.3 策略模式(Strategy Pattern)

// 优化前
function calculatePrice(userType, price) {
  if (userType === 'vip') {
    return price * 0.7;
  } else if (userType === 'member') {
    return price * 0.8;
  } else if (userType === 'new') {
    return price * 0.9;
  } else {
    return price;
  }
}

// 优化后
const priceStrategies = {
  vip: (price) => price * 0.7,
  member: (price) => price * 0.8,
  new: (price) => price * 0.9,
  default: (price) => price
};

function calculatePrice(userType, price) {
  const strategy = priceStrategies[userType] || priceStrategies.default;
  return strategy(price);
}

// 更灵活的策略模式
class PriceStrategy {
  static strategies = {
    vip: new VipStrategy(),
    member: new MemberStrategy(),
    new: new NewUserStrategy(),
    default: new DefaultStrategy()
  };
  
  static getStrategy(userType) {
    return this.strategies[userType] || this.strategies.default;
  }
}

优点:易于扩展,符合开闭原则
缺点:增加复杂度,简单场景可能过度设计

1.4 查表法/映射表(Lookup Table)

// 优化前
function getStatusText(status) {
  if (status === 1) {
    return '待支付';
  } else if (status === 2) {
    return '已支付';
  } else if (status === 3) {
    return '发货中';
  } else if (status === 4) {
    return '已完成';
  } else if (status === 5) {
    return '已取消';
  } else {
    return '未知状态';
  }
}

// 优化后
const STATUS_MAP = {
  1: '待支付',
  2: '已支付',
  3: '发货中',
  4: '已完成',
  5: '已取消'
};

function getStatusText(status) {
  return STATUS_MAP[status] || '未知状态';
}

// 更复杂的数据结构
const STATUS_CONFIG = {
  1: { text: '待支付', color: 'orange', action: 'pay' },
  2: { text: '已支付', color: 'blue', action: 'view' },
  3: { text: '发货中', color: 'green', action: 'track' },
  4: { text: '已完成', color: 'gray', action: 'review' }
};

优点:代码简洁,易于维护和扩展
缺点:不适用于复杂条件逻辑

1.5 多态/状态模式(Polymorphism/State Pattern)

// 优化前
class Order {
  process() {
    if (this.status === 'pending') {
      // 待处理逻辑
    } else if (this.status === 'paid') {
      // 已支付逻辑
    } else if (this.status === 'shipped') {
      // 已发货逻辑
    }
  }
}

// 优化后
class OrderState {
  process(order) {
    throw new Error('必须实现 process 方法');
  }
}

class PendingState extends OrderState {
  process(order) {
    console.log('处理待支付订单');
    // 具体逻辑
  }
}

class PaidState extends OrderState {
  process(order) {
    console.log('处理已支付订单');
    // 具体逻辑
  }
}

class Order {
  constructor() {
    this.state = new PendingState();
  }
  
  setState(state) {
    this.state = state;
  }
  
  process() {
    return this.state.process(this);
  }
}

优点:封装状态行为,易于添加新状态
缺点:增加类数量,简单场景可能过度设计

1.6 责任链模式(Chain of Responsibility)

// 优化前
function handleRequest(type, data) {
  if (type === 'typeA') {
    return handleTypeA(data);
  } else if (type === 'typeB') {
    return handleTypeB(data);
  } else if (type === 'typeC') {
    return handleTypeC(data);
  } else {
    return handleDefault(data);
  }
}

// 优化后
class Handler {
  constructor() {
    this.nextHandler = null;
  }
  
  setNext(handler) {
    this.nextHandler = handler;
    return handler;
  }
  
  handle(type, data) {
    if (this.nextHandler) {
      return this.nextHandler.handle(type, data);
    }
    return null;
  }
}

class TypeAHandler extends Handler {
  handle(type, data) {
    if (type === 'typeA') {
      return `处理 typeA: ${data}`;
    }
    return super.handle(type, data);
  }
}

// 使用
const handlerChain = new TypeAHandler()
  .setNext(new TypeBHandler())
  .setNext(new TypeCHandler())
  .setNext(new DefaultHandler());
  

优点:解耦发送者和接收者,灵活组合
缺点:可能影响性能,调试复杂

1.7 可选链(Optional Chaining)和空值合并(Nullish Coalescing)

// 优化前
function getUserInfo(user) {
  if (user && user.profile && user.profile.contact && user.profile.contact.email) {
    return user.profile.contact.email;
  } else {
    return 'default@email.com';
  }
}

// 优化后
function getUserInfo(user) {
  return user?.profile?.contact?.email ?? 'default@email.com';
}

// 配合默认参数
function processConfig(config = {}) {
  const {
    timeout = 5000,
    retry = 3,
    logLevel = 'info'
  } = config;
  
  // 使用配置
}

优点:语法简洁,减少空值检查
缺点:ES2020+ 特性,需要环境支持

二、建议与总结

选择建议

  • 简单条件判断 → 使用提前返回、卫语句、可选链操作符
  • 状态/类型映射 → 使用查表法
  • 复杂业务逻辑 → 使用策略模式、状态模式
  • 请求/事件处理链 → 使用责任链模式

最佳实践总结

  • 优先使用简单方案:不要为简单问题引入复杂模式
  • 保持一致性:在项目中保持统一的代码风格
  • 考虑可读性:优化不仅要减少嵌套,还要提高代码可读性
  • 适度抽象:避免过度设计,根据实际需求选择模式
  • 测试覆盖:复杂逻辑需要充分的测试覆盖

根据具体的业务场景和团队习惯选择合适的优化方案。简单的 if-else 嵌套不一定需要优化,只有当它影响到代码的可读性、可维护性或可扩展性时才考虑重构。始终以代码清晰和易于维护为目标。

以上就是JavaScript优化if-else复杂判断问题的常用方案的详细内容,更多关于JavaScript优化if-else复杂判断的资料请关注脚本之家其它相关文章!

相关文章

  • JS如何通过视频链接获取视频时长

    JS如何通过视频链接获取视频时长

    这篇文章主要介绍了JS如何通过视频链接获取视频时长,这个函数用提供的URL创建一个新的Video元素,并在loadedmetadata事件被触发时解析一个带有视频持续时间的Promise,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • 基于jQuery的模仿新浪微博时间的组件

    基于jQuery的模仿新浪微博时间的组件

    废话不多说,实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数.
    2011-10-10
  • JS实现环形进度条(从0到100%)效果

    JS实现环形进度条(从0到100%)效果

    这篇文章主要介绍了JS实现环形进度条(从0到100%)效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • OpenLayer实现自定义坐标点的绘制

    OpenLayer实现自定义坐标点的绘制

    OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。本文将利用OpenLayer实现自定义坐标点的绘制,感兴趣的可以了解一下
    2022-04-04
  • JS异步文件分片断点上传的实现思路

    JS异步文件分片断点上传的实现思路

    在项目中有时会遇到大文件上传,经常会出现链接超时的问题,所以就需要使用文件分片上传的方式来上传大文件。下面通过本文给大家介绍js异步文件分片断点上传的实例代码,需要的的朋友参考下吧
    2016-12-12
  • bootstrap手风琴制作方法详解

    bootstrap手风琴制作方法详解

    这篇文章主要为大家详细介绍了bootstrap手风琴的制作方法,制作声明式触发手风琴,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js实现Select列表内容自动滚动效果代码

    js实现Select列表内容自动滚动效果代码

    这篇文章主要介绍了js实现Select列表内容自动滚动效果的方法,涉及javascript简单递归调用遍历select及时间函数的相关使用技巧,需要的朋友可以参考下
    2015-08-08
  • js精准的倒计时函数分享

    js精准的倒计时函数分享

    这篇文章主要为大家分享了js实现精准的倒计时函数,如何实现倒计时模块,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • Bootstrap3 多选和单选框(checkbox)

    Bootstrap3 多选和单选框(checkbox)

    多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。接下来通过本文给大家介绍Bootstrap3 多选和单选框,一起看看吧
    2016-12-12
  • js 创建快捷方式的代码(fso)

    js 创建快捷方式的代码(fso)

    js 创建快捷方式的代码,这个是在本地运行的需要确认的,需要的朋友可以参考下。
    2010-11-11

最新评论