JS复杂判断的更优雅写法代码详解

当我们编写JavaScript代码时，经常会遇到复杂的逻辑判断情况。通常，我们会使用if/else或者switch语句来实现多个条件判断。随着逻辑复杂度的增加，这些传统的判断方式可能会导致代码变得冗长且难以阅读。那么，如何更优雅地编写判断逻辑呢？让我们来一下。

假设我们有一个按钮点击事件，需要根据不同的活动状态执行不同的操作。活动状态可能包括：1-开团进行中，2-开团失败，3-商品售罄，4-开团成功，5-系统取消。我们可以使用if/else语句来实现这个逻辑，但代码可能会变得非常冗长。

举个例子，原始的if/else实现方式如下：

```javascript

const onButtonClick1 = (status) => {

if (status == 1) {

sendLog('processing');

jumpTo('IndexPage');

} else if (status == 2) {

sendLog('fail');

jumpTo('FailPage');

} else if (status == 3) {

sendLog('fail');

jumpTo('FailPage');

} else if (status == 4) {

sendLog('suess');

jumpTo('SuessPage');

} else if (status == 5) {

sendLog('cancel');

jumpTo('CancelPage');

} else {

sendLog('other');

jumpTo('Index');

}

};

```

通过代码可以看到，这个按钮的点击逻辑根据不同活动状态做两件事情：发送日志埋点和跳转到对应页面。为了改进这段代码，我们可以使用switch语句来简化逻辑判断。改进后的代码如下：

```javascript

const onButtonClick = (status) => {

switch (status) {

case 1:

sendLog('processing');

jumpTo('IndexPage');

break;

case 2:

case 3:

sendLog('fail');

jumpTo('FailPage');

break;

case 4:

sendLog('suess');

jumpTo('SuessPage');

break;

case 5:

sendLog('cancel');

jumpTo('CancelPage');

break;

default:

sendLog('other');

jumpTo('Index');

break;

}

};

```

使用switch语句后，代码更加简洁清晰。而且当多个case具有相同的执行逻辑时，我们可以省略重复的语句和break，例如case 2和case 3共享相同的逻辑。这样的写法不仅提高了代码的可读性，还减少了代码的冗余。对于上述的代码逻辑，我们可以尝试以不同的方式重构，使其更为简洁且易于理解。让我们看看如何通过利用对象和Map数据结构来优化这个逻辑。

我们可以为每种状态和身份创建一个动作对象，然后将这些对象存储在Map中。这样，我们可以根据状态和身份直接查找对应的动作。以下是重构后的代码：

```javascript

// 创建动作对象

const actions = new Map([

[1, { identity: ['guest', 'master'], action: ['processing', 'processing'] } ],

[2, { identity: ['guest', 'master'], action: ['fail', 'view'] } ],

[3, { identity: ['guest'], action: ['view', 'process'] } ], //假设只有游客可以查看商品售罄状态

[4, { identity: ['guest', 'master'], action: ['success', 'confirm'] } ],

[5, { identity: ['guest', 'master'], action: ['view', 'stock'] } ], //假设只有游客可以查看库存状态

['default', { identity: ['guest', 'master'], action: ['other', 'index'] } ], //默认动作

]);

// 按钮点击事件

const onButtonClick = (status, identity) => {

const action = actions.get(status) || actions.get('default'); // 获取对应动作对象

const logName = action.action[identity === 'guest' ? 0 : 1]; // 根据身份选择日志名称

const pageName = action.action[1]; // 获取页面名称

sendLog(logName); //发送日志

jumpTo(pageName); //跳转到对应页面

};

```

在这个重构版本中，我们创建了一个包含状态和动作对象的Map。每个动作对象包含一个身份数组和一个动作数组。身份数组指定了哪些身份可以执行该动作，而动作数组则包含了对应的日志名称和页面名称。在按钮点击事件中，我们根据状态和身份查找对应的动作对象，并执行相应的日志发送和页面跳转。这种方式避免了大量的if-else判断，使代码更加简洁明了。具体的逻辑处理还需要根据实际业务需求进行完善。理解你的担忧，关于使用if/else进行大量的逻辑判断。确实，当逻辑判断增多时，代码的可读性和可维护性可能会受到影响。现在，让我们以更简洁、生动的方式重新阐述你的观点，同时保持原文的风格特点。

在编程的世界里，有时我们会发现，随着逻辑的不断升级，判断量会不断增加，代码的长度也会成倍增长。这时候，我们是否应该继续依赖冗长的if/else语句来进行逻辑判断呢？不，我们有一种更好的选择。

看这段代码，当我们面临大量的逻辑判断时，我们可以选择使用Map数据结构来优化我们的代码。例如：

想象一下，你正在处理一个复杂的场景，需要根据不同的用户身份执行不同的动作。传统的做法可能是使用一系列的if/else语句来判断用户的身份，然后执行相应的动作。但这样会让代码变得冗长且难以维护。这时，Map结构就能发挥出它的优势。

你可以创建一个Map对象，将用户身份作为键，将对应的动作作为值。这样，当需要执行某个动作时，只需根据用户身份在Map中查找对应的动作即可。这种方式不仅代码更加简洁，而且易于阅读和维护。

比如这里：

```javascript

const actions = new Map([

['guest_1', () => { / 执行某些动作 / cambrian.render('body') }]

// 可以继续添加其他用户身份和对应的动作

]);

```

通过上面的代码示例，我们可以看到，使用Map结构可以更加简洁地处理复杂的逻辑判断，让代码更加清爽、易于阅读和维护。当面临大量的逻辑判断时，不妨尝试一下使用Map结构，也许会给你带来意想不到的收获。