本文旨在探讨如何重构函数中复杂的嵌套条件判断，以有效降低代码的认知复杂度，解决sonarqube等工具报告的复杂性问题。文章将介绍一种数据驱动的重构策略，通过将条件逻辑抽象为配置数组，并结合使用`some()`等数组方法，显著提升代码的可读性、可维护性及紧凑性。
理解认知复杂度及其影响
在软件开发中，代码的认知复杂度（Cognitive Complexity）是一个衡量代码理解难度的指标。它不同于圈复杂度（Cyclomatic Complexity），更侧重于人类大脑处理代码逻辑的难度。当函数中存在大量嵌套的条件判断（如if-else、switch语句），或者循环、递归等控制流时，代码的认知复杂度会急剧上升。
高认知复杂度的代码通常伴随着以下问题：
- 可读性差： 开发者难以快速理解代码的意图和执行路径。
- 维护成本高： 修改或添加新功能时，容易引入新的bug，且修改难度大。
- 测试困难： 需要覆盖的逻辑路径增多，编写全面测试用例的难度增加。
- 潜在缺陷： 复杂的逻辑更容易隐藏错误。
静态代码分析工具，如SonarQube，会检测并报告高认知复杂度的代码，将其视为关键问题，以促使开发者优化代码结构。
原始代码问题分析
考虑以下一个常见的场景：一个函数需要根据多个条件来决定是否禁用某个按钮。如果这些条件以嵌套if语句的形式实现，代码会迅速变得冗长且难以管理。
const isButtonSubmit = computed(() => {
let disableButton = false;
if (formInput.value.radio3 === 'yes') {
if (formInput.value.input1 === '') {
disableButton = true;
}
}
if (formInput.value.radio4 === 'yes') {
if (formInput.value.input2 === '') {
disableButton = true;
}
}
if (formInput.value.radio4 === 'no') {
if (formInput.value.input6 === '') {
disableButton = true;
}
}
// ... 更多类似的嵌套条件判断
if (formInput.value.radio9 === 'no') {
if (formInput.value.input9 === '') {
disableButton = true;
}
}
return disableButton;
});上述代码中，每个条件对都包含一个外部if（检查radio值）和一个内部if（检查input是否为空），并且最终都导致disableButton被设置为true。这种模式的重复和嵌套是导致认知复杂度过高的主要原因。每次添加新的禁用规则，都需要复制粘贴类似的结构，使得代码难以维护和扩展。
数据驱动的重构策略
解决此类问题的核心思想是将条件判断中的“数据”与“逻辑”分离。我们可以将所有触发按钮禁用的规则定义在一个独立的数据结构中，然后用一段通用的逻辑来处理这些规则。
1. 抽象条件规则为数据结构
观察原始代码，每个禁用条件都遵循一个模式：当某个radio属性的值为特定值，并且某个input属性为空时，按钮被禁用。我们可以将这个模式抽象为一个对象，包含radio的键名、期望的radio值以及关联的input键名。
创建一个数组来存储所有这些规则：
const disableStates = [
{ radio: 'radio3', value: 'yes', input: 'input1' },
{ radio: 'radio4', value: 'yes', input: 'input2' },
{ radio: 'radio4', value: 'no', input: 'input6' },
{ radio: 'radio5', value: 'no', input: 'input3' },
{ radio: 'radio6', value: 'yes', input: 'input4' },
{ radio: 'radio6', value: 'no', input: 'input5' },
{ radio: 'radio7', value: 'no', input: 'input7' },
{ radio: 'radio8', value: 'no', input: 'input8' },
{ radio: 'radio9', value: 'no', input: 'input9' },
];这个disableStates数组清晰地声明了所有触发按钮禁用的条件，极大地提高了可读性和可维护性。
2. 利用数组方法简化逻辑
现在，有了规则数组，我们可以使用JavaScript的数组迭代方法来检查formInput.value是否满足其中任何一个禁用条件。Array.prototype.some()方法是此场景的理想选择，因为它会检查数组中的任何元素是否通过了提供的测试函数，并且一旦找到符合条件的元素，就会立即停止迭代并返回true。
重构后的代码如下：
const isButtonSubmit = computed(() => {
const i = formInput.value; // 为 formInput.value 创建一个别名，简化访问
return disableStates.some(({ radio, value, input }) =>
i[radio] === value && i[input] === ''
);
});重构后的代码分析
- 声明式编程： 代码从命令式的“如何做”转变为声明式的“是什么”，即明确列出所有禁用规则，而不是一步步地执行判断。
- 显著降低认知复杂度： 消除了所有嵌套的if语句，使得逻辑路径变得扁平化，大脑无需跟踪多个分支。
- 提高可读性： disableStates数组一目了然地展示了所有禁用条件。some()方法的用法也清晰表达了“只要有一个条件满足就禁用”的意图。
-
增强可维护性与可扩展性：
- 添加新规则： 只需向disableStates数组中添加一个新的规则对象，无需修改核心逻辑。
- 修改现有规则： 直接修改数组中对应的规则对象即可。
- 删除规则： 从数组中移除对应的规则对象。 这种方式极大地降低了未来维护和功能扩展的风险与成本。
- 代码更紧凑： 显著减少了代码行数，提高了代码密度。
总结与注意事项
通过将复杂的、重复的条件逻辑抽象为数据结构，并结合使用高阶函数（如some()），我们能够有效地降低函数的认知复杂度，提高代码的可读性、可维护性和可扩展性。这种数据驱动的重构模式在处理大量相似条件判断时尤为有效。
注意事项：
- 命名清晰： 确保规则数组及其内部对象的属性命名具有描述性，以便其他开发者能够轻松理解其含义。
- 适度抽象： 并非所有条件判断都适合这种模式。当条件逻辑非常独特且不重复时，过度抽象可能会引入不必要的复杂性。
- 单元测试： 即使代码经过重构变得更加简洁，也务必编写全面的单元测试来验证所有禁用和启用路径的正确性，确保重构没有引入回归错误。
管理代码的认知复杂度是编写高质量、可维护软件的关键一环。通过采纳如数据驱动重构这样的策略，开发者可以构建出更健壮、更易于理解和协作的应用程序。
