🙅‍都说太多if...else不好，那有没有可以直接抄的改造方案呢？-阿里云开发者社区

🙅‍都说太多if...else不好，那有没有可以直接抄的改造方案呢？

2023-06-10 82

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 开发过程中，经常遇到大量的if...else逻辑，这使得代码复杂、难以维护。但别担心！这里会引导你走出这个困境！

嗨，大家好！这里是道长王jj~ 🎩🧙‍♂️

日常的代码审查工作总是会带来各种惊喜🎁，尤其当你遇到那些让你眼前一黑的代码。

比如我在上次的审查中，看到我们的小明同事在他的JavaScript代码中堆砌了一个看起来就像一座大山的超过20个的 if...else 语句。类似下面这样：

function calculatePrice(type, basePrice) {
   
    if (type === 'student') {
   
        return basePrice * 0.8;
    } else if (type === 'senior') {
   
        return basePrice * 0.7;
    } else if (type === 'veteran') {
   
        return basePrice * 0.75;
    } 
    // 这个列表有20多个条件，我们在这里省略...
    else {
   
        return basePrice;
    }
}

🙅‍♂️ 为何不推荐大量的 if...else

咳咳，看到这里，让我想起了小时候堆积木游戏，每堆一个积木都充满了危险和快感。但这样的代码确实存在一些问题，比如：

阅读困难：就像尝试阅读一篇只有一个长长的段落的小说，你需要花费大量的时间和精力去理解它。
高维护成本：想象一下，如果需要在中间插入一个新的条件，你需要找到正确的位置，然后小心翼翼地插入新的 if...else 语句。
可扩展性差：对于特殊的需求，例如动态的添加新的折扣类型，你可能需要大量的修改和测试。

作为一名合格的开发者，我们总是希望自己能写出优雅、可读性高、易维护的代码。于是，让我们看看有没有其他方法能替代这个冗长的 if...else 呢？😉

❗注意！不是说所有的if…else都要被替代

重构代码的目的是为了提高代码的可读性、可维护性和扩展性。

但并不是所有的if...else语句都应该被替代或重构！

如果你的代码里是以下的情况，就不要想着重构炫技啦！

简单的条件分支：如果代码中的if...else语句仅有一到两个简单的条件分支，没必要改。
高度相关的逻辑分支：复杂的逻辑，如果被分解成多个独立的函数或对象，会失去逻辑的连贯性和上下文含义，你也不想代码看不懂吧！

👏 项目案例：函数式编程+设计模式替代 if...else

注意：以下的代码都有意地在使用JavaScript的对象字面量，可以使代码更加干净和易于阅读。这是一种函数式编程的方式。

设计模式是为了解决一些特定问题而提出的代码结构，它能帮助我们更好地组织代码，提高代码的可读性和可维护性。按照水文掘金老套路。我先介绍一下有哪几种常见的设计模式可以优化这类问题。

策略模式

策略模式定义了一系列的算法，并将每一个算法封装起来，使它们可以互相替换。在 JavaScript 中，我们可以使用对象来实现策略模式，这也是最简单的改造，就像下面这样：

const strategies = {
   
    'student': (basePrice) => {
   
        return basePrice * 0.8;
    },
    'senior': (basePrice) => {
   
        return basePrice * 0.7;
    },
    'veteran': (basePrice) => {
   
        return basePrice * 0.75;
    },
    'default': (basePrice) => {
   
        return basePrice;
    }
}

const calculatePrice = (type, basePrice) => {
   
    return (strategies[type] || strategies['default'])(basePrice);
}
calculatePrice('student', 1) // 输出: 0.8

❓如果是面对多层嵌套呢？

对于多层嵌套的if...else，我们同样可以通过使用策略模式来改善代码的可读性和维护性。只是说我们把判断逻辑放在了独立的函数中。

假设我们现在有一个需求，即根据用户的类型和他们的购买量来计算折扣。如果用户是学生，购买量大于10个，他们可以享受8折优惠；如果用户是老年人，购买量大于20个，他们可以享受7折优惠。

const strategies = {
   
    'student': quantity => quantity > 10 ? 0.8 : 1,
    'senior': quantity => quantity > 20 ? 0.7 : 1,
    'default': () => 1
};

const calculate = (type, quantity) => {
   
    return (strategies[type] || strategies['default'])(quantity)
}
calculate('student', 15) // 输出: 0.8

这样一来，我们的代码就变得更加清晰和易读了。而且如果我们想添加新的策略，只需要在 strategies 对象中添加新的属性和函数就可以了。

工厂模式

其实这个我都有点不愿意讲了，因为上一个例子中其实本身也是一种工厂模式的实现，这一次我们要把那个例子转换为一个更明显的工厂模式，我们可以将函数calculate转换为一个工厂函数，它创建并返回一个对象，这个对象有一个calculate方法：

const strategies = {
   
    'student': quantity => quantity > 10 ? 0.8 : 1,
    'senior': quantity => quantity > 20 ? 0.7 : 1,
    'default': () => 1
};

const createCalculator = (type) => {
   
    return {
   
        calculate: (quantity) => (strategies[type] || strategies['default'])(quantity)
    }
}

const studentCalculator = createCalculator('student');
studentCalculator.calculate(15); // 输出: 0.8

查找表模式

查找表模式其实是策略模式的一种简化形式，它更像是一个简单的映射表。我们可以把所有的策略映射到一个对象中，然后通过键来查找对应的策略。对于上面的例子而言，本质只是改变了存储方式，我们使用映射表来保存策略就行了（是不是突然觉得也没有那么高大上了哈哈😄）：

const studentStrategy = quantity => quantity > 10 ? 0.8 : 1;
const seniorStrategy = quantity => quantity > 20 ? 0.7 : 1;
const defaultStrategy = () => 1;

const strategies = {
   
    'student': studentStrategy,
    'senior': seniorStrategy,
    'default': defaultStrategy
};

const calculate = (type, quantity) => {
   
    return (strategies[type] || strategies['default'])(quantity)
}

calculate('student', 15); // 输出: 0.8

职责链模式

职责链模式是一种对象的行为模式，在这种模式中，每一个对象都有机会处理请求，从而解除了发送者和接收者之间的耦合关系。在JavaScript中，我们可以用链式调用来实现职责链模式：

// 学生条件进入
const studentHandler = (type, quantity, next) => {
   
    if (type === 'student' && quantity > 10) {
   
        return 0.8;
    }
    return next(type, quantity);
};
// 军人条件进入
const seniorHandler = (type, quantity, next) => {
   
    if (type === 'senior' && quantity > 20) {
   
        return 0.7;
    }
    return next(type, quantity);
};
// 没有特殊条件时进入
const defaultHandler = (type, quantity, next) => {
   
    return 1;
};

// 定义一个函数，这个函数会生成一个处理器链
const createHandlerChain = (...handlers) => (type, quantity) => {
   
    let index = 0;
    const next = (type, quantity) => {
   
        if (index < handlers.length) {
   
            return handlers[index++](type, quantity, next);
        }
    };
    return next(type, quantity);
};

// 组合函数
const calculate = createHandlerChain(studentHandler, seniorHandler, defaultHandler);

calculate('student', 15)
; // 输出: 0.8