当前位置：首页 > 全部内容 > 正文

JavaScript降低代码圈复杂度优化技巧

作者：听澜

时间：2026-10-31

浏览：211

本文深入解析JavaScript中圈复杂度的概念及其对代码质量的影响，推荐使用Code Metrics和ESLint进行实时监控。通过函数拆分、卫语句、简化条件表达式、多态替代、算法替换及减少return等具体策略，提供优化高复杂度代码的实用方案，帮助开发者提升代码可读性与可维护性。

文章目录

圈复杂度的定义

圈复杂度依据程序中的决策结构（如条件语句、循环语句、分支语句）进行计算。流程图中每增加一个决策点，圈复杂度加1。数值越高代表代码越复杂，对可读性、可测性和可维护性的负面影响越大。

圈复杂度推荐值通常在1至10之间。超过10的代码模块建议重构，以提升可理解性和可测试性，并降低引入错误的风险。

圈复杂度的定义

辅助工具介绍

VScode插件Code Metrics

VScode插件Code Metrics可用于快速识别需优化复杂度的代码。安装后，代码上方会显示对应的复杂度值，数值大小直观反映哪些代码急需优化以提升可读性。

圈复杂度的定义

点击提示的复杂度数值，可查看具体影响复杂度的代码部分，从而进行针对性优化。

圈复杂度的定义

eslint检查机制

利用eslint检查代码圈复杂度，当数值超出设定阈值时会触发报错。

rules: {
  complexity: [
    'error',
    {
      max: 10
    }
  ]
}

上述配置示例中，当圈复杂度超过10时即会输出报错信息。

圈复杂度的常用解决方法

函数拆分与重构，遵循单一职责原则

高圈复杂度通常意味着函数或方法内部存在过多决策路径。将复杂函数分解为多个清晰的小函数，可降低每个函数的圈复杂度，使代码更易于理解和维护。拆分时应按功能模块或责任分类，确保每个函数仅负责一项具体任务。

优化前代码示例

function handle(arr) {
    // 去重
    let _arr=[],_arrIds=[];
    for(let i=0;i<arr.length;i++){
        if(_arrIds.indexOf(arr[i].id)===-1){
            _arrIds.push(arr[i].id);
            _arr.push(arr[i]);
        }
    }
    // 替换
    _arr.map(item=>{
        for(let key in item){
            if(item[key]===''){
                item[key]='--';
            }
        }
    });
    // 排序
    _arr.sort((item1,item2)=>item1.id-item2.id);
    return _arr;
}

优化后代码示例

function removeDuplicates(arr) {
  const uniqueArr = [];
  const uniqueIds = [];
  for(let i = 0; i < arr.length; i++) {
    if(uniqueIds.indexOf(arr[i].id) === -1) {
      uniqueIds.push(arr[i].id);
      uniqueArr.push(arr[i]);
    }
  }
  return uniqueArr;
}
function replaceEmptyValues(arr) {
  const processedArr = arr.map(item => {
    for(let key in item) {
      if(item[key] === '') {
        item[key] = '--';
      }
    }
    return item;
  });
  return processedArr;
}
function sortById(arr) {
  const sortedArr = arr.sort((item1, item2) => item1.id - item2.id);
  return sortedArr;
}
function handle(arr) {
  const uniqueArr = removeDuplicates(arr);
  const processedArr = replaceEmptyValues(uniqueArr);
  const sortedArr = sortById(processedArr);
  return sortedArr;
}

上述操作将原始函数拆分为三个函数。removeDuplicates 函数用于去除数组中的重复元素，replaceEmptyValues 函数用于遍历替换空值，sortById 函数用于根据 id 进行排序。每个函数均只负责一个明确的职责。

使用卫语句减少分支嵌套

对输入条件进行多重判断时，采用卫语句可减少分支语句的使用，从而提高代码的可读性和可维护性。

// 优化前
function calculateScore(score) {
  if (score < 0) {
    return "Invalid score";
  } else if (score < 50) {
    return "Fail";
  } else if (score < 70) {
    return "Pass";
  } else if (score < 90) {
    return "Good";
  } else {
    return "Excellent";
  }
}

// 优化后
function calculateScore(score) {
  if (score < 0) {
    return "Invalid score";
  }
  if (score < 50) {
    return "Fail";
  }
  if (score < 70) {
    return "Pass";
  }
  if (score < 90) {
    return "Good";
  }
  return "Excellent";
}

通过卫语句将每个条件判断独立出来，避免了嵌套的分支语句。这种优化使代码更加清晰，每个条件判断独立成为逻辑块，并消除了使用 else 的需要。这不仅提高了代码可读性，还便于后续对每个条件判断的修改和维护。

简化条件表达式

对具有相同逻辑的代码进行条件合并输出，减少条件判断代码，从而提升可读性。

// 优化前
function a (num) {
    if (num === 0) {
        return 0;
    } else if (num === 1) {
        return 1;
    } else if (num === 2) {
        return 2;
    } else {
        return 3;
    }
}
// 优化后
function a (num) {
    if ([0, 1, 2].indexOf(num) > -1) {
        return num;
    } else {
        return 3;
    }
}
---
// 优化前
function a() {
  if (this.a == 0) return;
  if (!this.b) return;
  ...
}
// 优化后
function a() {
  if (this.a == 0 || !this.b) return;
  ...
}
---
// 优化前
function a (type) {
    if (type === 'a') {
        return 'String';
    } else if (type === 'b') {
        return 'Number';
    } else if (type === 'c') {
        return 'Object';
    }
}
// 优化后
function a (type) {
    let obj = {
        'a': 'String',
        'b': 'Number',
        'c': 'Object'
    };
    return obj[type];
}

表达式逻辑优化策略

逻辑计算会增加圈复杂度。优化结构复杂的逻辑表达式，减少不必要的逻辑判断，可在一定程度上降低圈复杂度。

// 优化前
a && b || a && c
// 优化后
a && (b || c)

利用多态方式替代条件式

通过多态方式替代条件式是一种优化技巧。多态允许根据不同类型执行不同操作，而无需使用复杂的条件判断逻辑。

优化前的代码示例

class Shape {
  constructor(type) {
    this.type = type;
  }
  calculateArea() {
    if (this.type === "circle") {
      // 计算圆形的面积
    } else if (this.type === "rectangle") {
      // 计算矩形的面积
    } else if (this.type === "triangle") {
      // 计算三角形的面积
    }
  }
}

优化后的代码示例

class Shape {
  calculateArea() {
    throw new Error("calculateArea() method must be implemented");
  }
}
class Circle extends Shape {
  calculateArea() {
    // 计算圆形的面积
  }
}
class Rectangle extends Shape {
  calculateArea() {
    // 计算矩形的面积
  }
}
class Triangle extends Shape {
  calculateArea() {
    // 计算三角形的面积
  }
}

使用多态方式，可通过调用相应对象的calculateArea方法来执行特定形状的面积计算，而无需使用复杂的条件判断逻辑。

替换算法以优化复杂度

当发现某算法的时间复杂度较高时，可考虑替换为具有更优时间复杂度的算法，以提高代码性能。

// 优化前
function findDuplicates(nums) {
  let duplicates = [];
  for (let i = 0; i < nums.length; i++) {
    for (let j = i + 1; j < nums.length; j++) {
      if (nums[i] === nums[j]) {
        duplicates.push(nums[i]);
      }
    }
  }
  return duplicates;
}
// 优化后
function findDuplicates(nums) {
  let freq = {};
  let duplicates = [];
  for (let num of nums) {
    if (freq[num]) {
      duplicates.push(num);
    } else {
      freq[num] = true;
    }
  }
  return duplicates;
}

需注意，优化算法并非适用于所有情况。选择替代算法时，应综合考虑数据规模、特定问题的特性以及算法的复杂度等因素。

分解条件式与拆分函数

遇到复杂的条件判断式或函数时，可将其分解为更小的部分，以提高代码的可读性和维护性。

优化前代码示例

function calculateScore(player) {
  if (player.score >= 100 && player.level === "expert") {
    return player.score * 2;
  } else if (player.score >= 50 || player.level === "intermediate") {
    return player.score * 1.5;
  } else {
    return player.score;
  }
}

优化后代码示例

function hasHighScore(player) {
  return player.score >= 100 && player.level === "expert";
}
function hasIntermediateScore(player) {
  return player.score >= 50 || player.level === "intermediate";
}
function calculateScore(player) {
  if (hasHighScore(player)) {
    return player.score * 2;
  } else if (hasIntermediateScore(player)) {
    return player.score * 1.5;
  } else {
    return player.score;
  }
}

将原始的复杂条件判断式拆分为两个独立的函数：hasHighScore和hasIntermediateScore。这样calculateScore函数中的条件判断变得更加清晰和可读。通过分解条件式和拆分函数，可提高代码的可读性、可维护性和重用性。

减少return语句出现次数

当前大多数圈复杂度计算工具对return个数也进行计算。若要针对这些工具的衡量规则进行优化，减少return语句个数是一种有效方式。

// 优化前
function a(){
    const value = getSomething();
    if(value) {
        return true;
    } else {
        return false;
    }
}

// 优化后
function a() {
    return getSomething();
}

移除控制标记与减少变量

移除控制标记可使代码更加简洁、可读性更高，并减少了不必要的变量使用。

优化前的代码示例

function findFirstPositive(numbers) {
  let found = false;
  let firstPositive = null;
  for (let num of numbers) {
    if (num > 0) {
      found = true;
      firstPositive = num;
      break;
    }
  }
  if (found) {
    return firstPositive;
  } else {
    return -1;
  }
}

优化后的代码示例

function findFirstPositive(numbers) {
  for (let num of numbers) {
    if (num > 0) {
      return num;
    }
  }
  return -1;
}

在优化后的代码中，直接在找到第一个正数后立即返回结果，而无需使用控制标记和额外的变量。如果遍历完整个数组后仍未找到正数，则返回-1。

总结与建议

仅刻板地使用圈复杂度算法衡量代码清晰度并不可取。在重构系统时，可使用代码圈复杂度工具统计复杂度，并对复杂度较高的代码进行具体场景分析。但并非一定要将复杂度优化到某种程度，应根据实际的业务情况做出优化决策。

以上就是JavaScript降低代码圈复杂度优化技巧的详细内容，更多关于JavaScript代码圈复杂度的资料请关注本站其它相关文章！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

ammo.js 内存管理：避免 Wasm 环境下的内存泄漏技巧

JS几种补零方法的性能对比与选择建议

JS数组去重最佳实践：Set、filter与reduce实现方案

基准元素选择策略对 JavaScript 快速排序性能的影响

手写原生JS节流函数代码实现

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例