解决if...else..的大量嵌套

最新推荐文章于 2024-03-21 13:49:26 发布

原创最新推荐文章于 2024-03-21 13:49:26 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

文章介绍了如何使用函数式编程和设计模式，如工厂模式，来提高代码的可读性和可维护性，以替代复杂的if...else语句。通过示例展示了如何根据用户类型和购买量计算折扣，利用策略模式创建计算器函数，使得新增条件更为便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大量的if...else,会造成代码的可阅读性变差，高维护成本，例如需要再家一个判断，需要小心翼翼的找到地方，再if...else中间进行加入

函数式编程+设计模式替代if...else（❗注意！不是说所有的if…else都要被替代）

工厂模式1

假设我们现在有一个需求，即根据用户的类型和他们的购买量来计算折扣。18岁以下的购买10以上台可打8折优惠，18-30岁购买20以上台可享受7折优惠

const discount = {
    //这里对象的子项都是箭头函数，接收加个给出判断
  child: (quantity) => (quantity > 10 ? 0.8 : 1),
  youth: (quantity) => (quantity > 20 ? 0.7 : 1),
  default: () => 1,
}
const createCalculator = (age, quantity) => {
           //这里是用到了逻辑中断，再未传入年龄字段的时候使用default
  return (discount[age] || discount['default'])(quantity)
}
console.log(createCalculator('child', 18))
console.log(createCalculator('child', 7))
console.log(createCalculator('youth', 17))

使用这样的方法下来的话代码可读性就会提高很多，而且后期需要其它判断条件直接再函数内添加便可以了

工厂模式2

这个和上面那个属于同一个，再次加了一层封装，是写法更加简洁

const strategies = {
  child: (quantity) => (quantity > 10 ? 0.8 : 1),
  youth: (quantity) => (quantity > 20 ? 0.7 : 1),
  default: () => 1,
}
           //这边先接收那个年龄段的
const createCalculator = (age) => {
//再返回一个对象，内含有方法函数，来根据多少台判断出是否打折，打折多少
  return {
    calculate: (quantity) =>
      (strategies[age] || strategies['default'])(quantity),
  }
}

const child = createCalculator('child')

console.log(child.calculate(18))

查找表模式

这个模式和上面两个说白还是一样的，只不过是更简单明了，容易理解

//用常量把方法都定义在了外面
const studentStrategy = (quantity) => (quantity > 10 ? 0.8 : 1)
const seniorStrategy = (quantity) => (quantity > 20 ? 0.7 : 1)
const defaultStrategy = () => 1
//这边添入对象里
const strategies = {
  child: studentStrategy,
  youth: seniorStrategy,
  default: defaultStrategy,
}
//这边函数调用就可以
const calculate = (age, quantity) => {
  return (strategies[age] || strategies['default'])(quantity)
}

console.log(calculate('child', 15)) // 输出: 0.8

希望本文能够帮助你解决优化大量的 if...else 语句的问题