我们在写 JavaScript 代码的时候，经常会遇到逻辑判断比较复杂的情况，通常
我们可以使用 if/else 或 switch 来实现多个条件判断。
但是这样就存在一个问题，随着逻辑复杂度的增加，代码中的 if/else/switch 会越来越臃肿，越来越难理解。那么如何才能把判断逻辑写得更优雅呢？
今天咱们就来看看这个问题！
优化 JavaScript 中的复杂判断有以下几种方法：
-
使用逻辑运算符：根据条件的逻辑关系，使用逻辑运算符进行简化。例如，使用 || 代替 if-else 语句中的判断条件。
-
使用短路求值：利用 JavaScript 中的短路求值特性，将复杂的判断条件拆分成多个简单的判断条件，只有在必要的情况下才会进行进一步的计算。例如，使用 && 和 || 运算符进行短路求值。
-
使用三元运算符：将 if-else 语句中的判断条件转换成三元运算符，可以简化代码并提高可读性。
-
使用对象或数组来存储条件和对应的操作：将复杂的判断条件和对应的操作存储在对象或数组中，然后通过查找对象或数组，执行对应的操作。这样可以提高代码的可维护性和可扩展性。
-
使用函数封装判断条件：将复杂的判断条件封装成函数，通过函数的返回值来进行判断。这样可以提高代码的可读性和可维护性。
-
使用正则表达式：如果条件是基于字符串的匹配，可以使用正则表达式来简化判断条件。
-
避免嵌套判断：尽量避免嵌套多层的判断语句，可以通过合理的代码结构和逻辑设计，将复杂的判断条件拆分成多个简单的判断条件。
一元条件判断
const onButtonClick = (status) => {if (status == 1) {jumpTo('/index')// 进入索引页} else if (status == 2) {jumpTo('/fail') // 进入失败页} else if (status == 3) {jumpTo('/fail') // 进入失败页} else if (status == 4) {jumpTo('/success')// 进入成功页} else if (status == 5) {jumpTo('/cancle')// 进入取消页} else {jumpTo('/other')//其他操作}
}从代码中我们可以看到这个按钮的点击逻辑：根据不同的活动状态，进入不同的页面。
当然，以上代码也可以通过 switch 进行重写：
const onButtonClick = (status) => {switch (status) {case 1:console.log('/index')// 进入索引页breakcase 2:case 3:jumpTo('/fail') // 进入失败页breakcase 4:jumpTo('/success')// 进入成功页breakcase 5:jumpTo('/cancle')// 进入取消页breakdefault:jumpTo('/other')//其他操作break}
}这样看起来比用 if/else 要清晰多了。同时：当 case 2 和 case 3 的逻辑相同时，可以省略执行语句和 break，这样 case 2 就会自动执行 case 3 的逻辑。
但是，以上的代码还不够“完美”，我可以对它进行持续优化：
const actions = {'1': ['/index'],// 进入索引页'2': ['/fail'], // 进入失败页'3': ['/fail'], // 进入失败页'4': ['/success'],// 进入成功页'5': ['/cancle'],// 进入取消页'default': ['/other'],//其他操作
}
const onButtonClick = (status) => {let action = actions[status] || actions['default'];jumpTo(action[0])
}这样优化之后代码就会清晰很多，这个方法的巧妙之处在于：把判定条件作为对象的属性名，把处理逻辑作为对象的属性值，点击按钮时通过查找对象属性进行逻辑判断，这种写法特别适合 一元条件 判断。
多元条件判断
但是，如果判断条件变得更加复杂时，以上的操作就不适用了，例如：
const onButtonClick = ( status,identity )=>{if (identity == 'guest' ){if (status == 1 ){// ...} else if (status == 2 ){// ...} else if ( status == 3 ){// ...} else if (status == 4 ){// ...} else if (status == 5 ){// ...} else {// ...}} else if (identity == 'master' ) {if (status == 1 ){// ...} else if (status == 2 ){// ...} else if (status == 3 ){// ...} else if (status == 4 ){// ...} else if (status == 5 ){// ...} else {// ...}}
}
那么一旦遇到这种复杂的情况，最初的代码就不适用了。所以，我们需要对最初的逻辑进行优化可以这么做：
const actions = new Map([['guest_1', ()=>{/* ... */}],['guest_2', ()=>{/* ... */}],['guest_3', ()=>{/* ... */}],['guest_4', ()=>{/* ... */}],['guest_5', ()=>{/* ... */}],['master_1', ()=>{/* ... */}],['master_2', ()=>{/* ... */}],['master_3', ()=>{/* ... */}],['master_4', ()=>{/* ... */}],['master_5', ()=>{/* ... */}],['default', ()=>{/* ... */}],
])
const onButtonClick = (identity,status)=>{let action = actions.get(`${identity}_${status}`) || actions.get('default')action.call(this)
}
上述代码的核心逻辑是：将两个条件拼接成一个字符串，以拼接后的条件字符串为键，以处理函数为值，通过 Map 对象进行查找并执行。这种方式在多条件判断的时候特别有用。
总之，优化 JavaScript 中的复杂判断需要根据具体情况选择合适的方法，同时也需要考虑代码的可读性和可维护性。
