本文探讨如何通过重构复杂且嵌套的条件判断来降低代码的认知复杂度。针对sonarqube等工具报告的复杂性问题，我们将介绍一种数据驱动的方法，将条件逻辑抽象为配置数据，并结合javascript的数组方法（如`some`），从而实现更简洁、可维护且易于理解的代码结构。
复杂条件逻辑的挑战
在软件开发中，我们经常会遇到需要根据多种条件来控制程序流程或组件状态的场景。当这些条件判断变得复杂且相互嵌套时，代码的认知复杂度会急剧上升。认知复杂度是衡量代码对人类读者来说有多难理解的指标，高认知复杂度的代码通常伴随着以下问题：
- 可读性差： 多层嵌套的if语句使得代码逻辑难以一眼看清，理解其意图需要花费更多精力。
- 维护性低： 需求变更时，修改或添加新的条件判断容易引入新的错误，且修改范围难以界定。
- 错误率高： 复杂的逻辑路径增加了漏掉某些边缘情况或引入逻辑缺陷的风险。
- 工具警告： SonarQube等静态代码分析工具会针对高认知复杂度的代码发出警告，甚至将其标记为关键问题。
以下是一个典型的复杂条件判断示例，它用于决定一个按钮是否应该被禁用：
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.radio5 === 'no') {
if (formInput.value.input3 === '') {
disableButton = true;
}
}
if (formInput.value.radio6 === 'yes') {
if (formInput.value.input4 === '') {
disableButton = true;
}
}
if (formInput.value.radio6 === 'no') {
if (formInput.value.input5 === '') {
disableButton = true;
}
}
if (formInput.value.radio7 === 'no') {
if (formInput.value.input7 === '') {
disableButton = true;
}
}
if (formInput.value.radio8 === 'no') {
if (formInput.value.input8 === '') {
disableButton = true;
}
}
if (formInput.value.radio9 === 'no') {
if (formInput.value.input9 === '') {
disableButton = true;
}
}
return disableButton;
});上述代码中，存在大量的重复结构和嵌套if，这正是导致高认知复杂度的主要原因。
重构策略：数据驱动与逻辑抽象
解决此类问题的核心思想是将数据与逻辑分离，采用数据驱动的方式来管理复杂的条件判断。通过将每个独立的判断条件抽象为结构化的数据，我们可以利用更高级的编程范式（如函数式编程的数组方法）来简洁地表达整个逻辑。
这种策略的优点在于：
- 扁平化逻辑： 消除深层嵌套，使代码结构更扁平。
- 集中管理： 所有条件规则集中在一个数据结构中，易于维护和扩展。
- 提高可读性： 业务规则通过数据直观表达，逻辑处理部分则高度抽象。
实施数据驱动重构
我们将通过以下两个步骤来重构上述示例代码：
步骤一：识别并提取条件数据
仔细分析原始代码中的每个条件判断，可以发现它们都遵循一个相似的模式： “如果某个radio字段的值是特定值，并且某个input字段为空，则按钮被禁用。”
我们可以将每个这样的条件对抽象为一个JavaScript对象，包含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数组现在清晰地定义了所有导致按钮禁用的业务规则。
步骤二：利用数组方法简化逻辑
在JavaScript中，Array.prototype.some()方法非常适合处理“只要有一个条件满足就返回真”的场景。它会对数组中的每个元素执行一个回调函数，如果回调函数对任何一个元素返回true，some()就会立即返回true并停止遍历。这与我们原始代码中一旦disableButton被设置为true就不再需要进一步检查的逻辑完全一致。
结合disableStates数组和some()方法，我们可以将原始的复杂逻辑重构为以下简洁形式：
const isButtonSubmit = computed(() => {
const i = formInput.value; // 简化对formInput.value的访问
return disableStates.some(({ radio, value, input }) => i[radio] === value && i[input] === '');
});在这个重构后的代码中：
- 我们首先解构了disableStates数组中的每个条件对象，获取radio、value和input字段。
- 然后，我们检查formInput.value中对应radio字段的值是否等于value，并且对应input字段的值是否为空字符串。
- 只要有一个条件对象满足这两个子条件，some()方法就会返回true，表示按钮应该被禁用。
重构后的优势
经过数据驱动的重构，代码获得了显著的提升：
- 认知复杂度大幅降低： 代码结构变得扁平，不再有深层嵌套，逻辑路径清晰明了，易于理解。
- 可维护性增强： 新增或修改禁用条件时，只需修改disableStates数组，而无需触碰核心逻辑函数，大大降低了维护成本和引入错误的风险。
- 可读性提升： 业务规则以声明式的数据结构呈现，逻辑意图一目了然。
- 代码简洁性： 消除了大量的重复if语句和disableButton变量的反复赋值，代码更加精炼。
- 符合软件工程原则： 将变化点（条件规则）与稳定点（处理逻辑）分离，提高了代码的模块化程度。
注意事项
- 适用场景： 这种数据驱动的重构模式最适用于条件判断逻辑结构相似、重复性高且结果是“满足任一条件即成立”的场景。
- 数据结构设计： 灵活设计条件数据结构，使其能准确表达业务规则。如果条件判断更为复杂（例如，涉及多个字段的组合判断，或需要执行不同的副作用），数据结构可能需要更复杂，或者回调函数内部的逻辑会更复杂。
- 性能考量： 对于非常庞大的条件列表，some()方法仍然是高效的，因为它具有短路特性，一旦找到匹配项就会停止迭代。
- 健壮性： 确保formInput.value中被访问的属性是存在的，或者在访问前进行适当的空值检查，以避免运行时错误。
总结
管理代码的认知复杂度是编写高质量、可维护软件的关键一环。面对复杂的嵌套条件判断，通过将条件逻辑抽象为数据结构，并结合JavaScript强大的数组方法（如some()），我们可以有效地降低代码的复杂度，提升其可读性和可维护性。这种数据驱动的重构策略不仅能帮助我们通过静态代码分析工具的检查，更能培养出编写更优雅、更健壮代码的良好习惯。
