重构函数降低认知复杂度(Cognitive Complexity)并优化代码可读性

认知复杂度的核心侧重 #

认知复杂度不是单纯追求代码“最简形式”，它的核心是衡量代码的理解难度，目标是通过减少嵌套层级、消除冗余逻辑、拆分复杂分支，让代码更符合人类的阅读思维，降低理解成本。它关注的是代码的“可读性”和“可维护性”，而非单纯的代码行数最少。

代码优化方案 #

原代码存在大量重复列定义、全局变量依赖、嵌套层级过深的问题，以下是优化后的版本：

// 提取公共列定义，避免重复编写
const BASE_COLUMNS = [
  {
    Header: 'MONTH',
    accessor: 'date',
    sortType: (a: any, b: any) => {
      const dateA = new Date(a.values.date).getTime();
      const dateB = new Date(b.values.date).getTime();
      return dateA < dateB ? -1 : 1;
    }
  },
  {
    Header: 'TOTAL',
    accessor: 'total',
  }
];

export const tableHeaders = (arr: any[]) => {
  // 初始化基础列
  const columns = [...BASE_COLUMNS];

  // 拆解条件为语义化变量，提升可读性
  const hasAverageProp = arr?.length > 0 && arr.some(x => x.hasOwnProperty('average'));
  const shouldShowAverageColumn = hasAverageProp && !arr.some(x => x.average === "NA");

  // 动态添加AVERAGE列
  if (shouldShowAverageColumn) {
    columns.push({
      Header: 'AVERAGE',
      accessor: 'average',
    });
  }

  return columns;
};

优化点说明 #

• 消除冗余：提取BASE_COLUMNS公共列配置，避免重复编写相同逻辑
• 减少嵌套：将多层if分支拆分为语义化条件变量，逻辑层级更扁平
• 避免全局污染：函数内创建columns变量，移除全局状态依赖
• 可读性提升：用hasAverageProp、shouldShowAverageColumn这类变量名替代直接的条件表达式，逻辑意图一目了然
• 类型规范：给函数参数arr添加类型标注，符合TypeScript语法规范

内容的提问来源于stack exchange，提问作者Honey Singh