js 重构if多层

在JavaScript开发中，多层嵌套的if语句会使代码难以阅读和维护。为了提高代码的可读性和可维护性，可以采用以下几种方式进行重构：

一、基础概念

嵌套if语句：在一个if语句内部再包含一个或多个if语句。
代码可读性：代码结构清晰，易于理解。
代码维护性：代码易于修改和扩展。

二、重构的优势

提高代码可读性：减少嵌套层次，使代码结构更加清晰。
提高代码维护性：更容易定位和修改逻辑。
减少错误：简化逻辑，降低出错概率。

三、重构类型及示例

1. 使用`switch`语句

适用于多个条件判断且条件为同一变量的情况。

原始代码：

if (status === 'success') {
    // 处理成功逻辑
} else if (status === 'error') {
    // 处理错误逻辑
} else if (status === 'pending') {
    // 处理待处理逻辑
} else {
    // 处理其他逻辑
}

重构后：

switch (status) {
    case 'success':
        // 处理成功逻辑
        break;
    case 'error':
        // 处理错误逻辑
        break;
    case 'pending':
        // 处理待处理逻辑
        break;
    default:
        // 处理其他逻辑
}

2. 使用对象映射

适用于条件和对应操作可以映射为键值对的情况。

原始代码：

if (command === 'start') {
    startProcess();
} else if (command === 'stop') {
    stopProcess();
} else if (command === 'restart') {
    restartProcess();
} else {
    console.log('Unknown command');
}

重构后：

const commandMap = {
    start: startProcess,
    stop: stopProcess,
    restart: restartProcess
};

if (commandMap[command]) {
    commandMap[command]();
} else {
    console.log('Unknown command');
}

3. 使用函数分解

将复杂的条件逻辑拆分为多个小函数，每个函数处理特定的逻辑。

原始代码：

if (user.isAdmin) {
    if (user.isActive) {
        grantFullAccess();
    } else {
        grantLimitedAccess();
    }
} else {
    if (user.isActive) {
        grantUserAccess();
    } else {
        denyAccess();
    }
}

重构后：

function checkAdminAccess(user) {
    if (user.isAdmin && user.isActive) {
        grantFullAccess();
    } else if (user.isAdmin) {
        grantLimitedAccess();
    } else if (user.isActive) {
        grantUserAccess();
    } else {
        denyAccess();
    }
}

checkAdminAccess(user);

4. 使用策略模式

适用于需要在运行时动态选择算法或行为的情况。

原始代码：

if (paymentMethod === 'creditCard') {
    processCreditCardPayment();
} else if (paymentMethod === 'paypal') {
    processPaypalPayment();
} else if (paymentMethod === 'bankTransfer') {
    processBankTransferPayment();
} else {
    throw new Error('Unsupported payment method');
}

重构后：

const paymentStrategies = {
    creditCard: processCreditCardPayment,
    paypal: processPaypalPayment,
    bankTransfer: processBankTransferPayment
};

const paymentFunction = paymentStrategies[paymentMethod];
if (paymentFunction) {
    paymentFunction();
} else {
    throw new Error('Unsupported payment method');
}