if-else if-else 与 switch-case 的区别

在 Sonar 中，if-else if-else 和 switch-case 结构的认知复杂度计算方式有所不同。以下是它们的主要区别：

1. if-else if-else 结构

对于 if-else if-else 结构，每增加一个条件分支都会增加认知复杂度。具体来说：

• 每个 if 或 else if 都会增加 1 点认知复杂度。
• 嵌套的条件语句也会增加认知复杂度。

示例：

function example(value) {
  if (value === 'A') {
    console.log('Option A');
  } else if (value === 'B') {
    console.log('Option B');
  } else if (value === 'C') {
    console.log('Option C');
  } else {
    console.log('Unknown option');
  }
}

在这个例子中，每个 if 和 else if else都增加了 1 点认知复杂度，总共增加了 4点认知复杂度。

2. switch-case 结构

switch-case 结构的认知复杂度计算方式与 if-else if-else 不同。虽然 switch-case 也包含多个分支，但 Sonar 对 switch-case 的处理更为宽容，通常不会为每个 case 增加额外的认知复杂度。相反，整个 switch 语句通常只增加固定的少量复杂度（通常是 1 点）。

示例：

function example(value) {
  switch (value) {
    case 'A':
      console.log('Option A');
      break;
    case 'B':
      console.log('Option B');
      break;
    case 'C':
      console.log('Option C');
      break;
    default:
      console.log('Unknown option');
      break;
  }
}

在这个例子中，尽管有多个 case 分支，但整个 switch 语句通常只会增加 1 点认知复杂度。

具体差异总结

实际影响

1. 代码可读性：

   • switch-case 结构通常比多个 if-else if-else 更易于阅读和维护，特别是在处理多个离散值时。

2. 认知复杂度：

   • 使用 switch-case 可以减少认知复杂度，尤其是在有多个条件分支的情况下。
   • 如果你发现 if-else if-else 结构导致较高的认知复杂度，可以考虑使用 switch-case 来替代。

示例对比

使用 if-else if-else：

function processValue(value) {
  if (value === 'A') {
    console.log('Option A');
  } else if (value === 'B') {
    console.log('Option B');
  } else if (value === 'C') {
    console.log('Option C');
  } else {
    console.log('Unknown option');
  }
}

认知复杂度：4 点

使用 switch-case：

function processValue(value) {
  switch (value) {
    case 'A':
      console.log('Option A');
      break;
    case 'B':
      console.log('Option B');
      break;
    case 'C':
      console.log('Option C');
      break;
    default:
      console.log('Unknown option');
      break;
  }
}

认知复杂度：1 点（整个 switch 语句增加 1 点）

其他优化建议

除了选择合适的控制结构外，还可以通过以下方法进一步降低认知复杂度：

1. 提取函数：将复杂的逻辑提取到单独的函数中，减少主函数的复杂度。

   function processValue(value) {
     switch (value) {
       case 'A':
         handleOptionA();
         break;
       case 'B':
         handleOptionB();
         break;
       case 'C':
         handleOptionC();
         break;
       default:
         handleUnknownOption();
         break;
     }
   }
   
   function handleOptionA() {
     console.log('Option A');
   }
   
   function handleOptionB() {
     console.log('Option B');
   }
   
   function handleOptionC() {
     console.log('Option C');
   }
   
   function handleUnknownOption() {
     console.log('Unknown option');
   }
   

2. 使用映射表：对于简单的条件分支，可以使用对象或映射表来替代 if-else if-else 或 switch-case。

   const handlers = {
     'A': () => console.log('Option A'),
     'B': () => console.log('Option B'),
     'C': () => console.log('Option C'),
     'default': () => console.log('Unknown option')
   };
   
   function processValue(value) {
     (handlers[value] || handlers['default'])();
   }
   

总结

• if-else if-else：每个条件分支都会增加认知复杂度，适合处理较为复杂的条件判断。
• switch-case：整体复杂度较低，适合处理多个离散值的情况。

根据具体的业务需求和代码复杂度，选择合适的控制结构可以有效降低认知复杂度，提高代码的可读性和可维护性。