大量的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 语句的问题