前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • Canvas 绘制动画时钟
    • Canvas 绘制粒子动画背景
    • DOM编程之API学习总结篇
    • JS 中的 call、apply、bind 方法
    • JS 中的事件绑定、事件监听、事件委托
    • JS常用的内置函数整理
    • JS继承的几种方法总结
    • JS计算字符串所占字节数
    • JavaScript-DOM事件
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript原生数组及高阶函数
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript启示录阅读笔录
    • JavaScript对象
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript常用的代码片段
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript继承的几种方式
    • JavaScript词法分析和作用域闭包
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript常用方法函数收集
    • Javascript数组详解
    • OOP之原型与原型链
    • OOP之类与对象
    • OOP之面向对象
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • arguments详解
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript 下常用的字符串操作
    • javascript常用积累
    • javascript笔记总结篇
    • parsetInt parsetFloat与eval isNaN用法
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS与jQuery操作DOM对比
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 梳理常用的正则表达式
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析JSON stringify
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 浅谈闭包
    • 深拷贝 vs 浅拷贝
    • 编写可维护的JavaScript
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

写程序时时刻记着,这个将来要维护你写的程序的人是一个有严重暴力倾向,并且知道你住在哪里的精神变态者。

# 1. 导读

你们是否也有过下面的想法?

  • 重构一个项目还不如新开发一个项目…
  • 这代码是谁写的,我真想…

你们的项目中是否也存在下面的问题?

  • 单个项目也越来越庞大,团队成员代码风格不一致,无法对整体的代码质量做全面的掌控
  • 没有一个准确的标准去衡量代 码结构复杂的程度,无法量化一个项目的代码质量
  • 重构代码后无法立即量化重构后代码质量是否提升

针对上面的问题,本文的主角 圈复杂度 重磅登场,本文将从圈复杂度原理出发,介绍圈复杂度的计算方法、如何降低代码的圈复杂度,如何获取圈复杂度,以及圈复杂度在公司项目的实践应用。

# 2. 圈复杂度

# 2.1 定义

圈复杂度 (Cyclomatic complexity) 是一种代码复杂度的衡量标准,也称为条件复杂度或循环复杂度,它可以用来衡量一个模块判定结构的复杂程度,数量上表现为独立现行路径条数,也可理解为覆盖所有的可能情况最少使用的测试用例数。简称 CC 。其符号为 VG 或是 M 。

圈复杂度 在 1976 年由 Thomas J. McCabe, Sr. 提出。

圈复杂度大说明程序代码的判断逻辑复杂,可能质量低且难于测试和维护。程序的可能错误和高的圈复杂度有着很大关系。

# 2.2 衡量标准

代码复杂度低,代码不一定好,但代码复杂度高,代码一定不好。

圈复杂度 代码状况 可测性 维护成本
1 - 10 清晰、结构化 高 低
10 - 20 复杂 中 中
20 - 30 非常复杂 低 高
>30 不可读 不可测 非常高

# 3. 计算方法

# 3.1 控制流程图

控制流程图,是一个过程或程序的抽象表现,是用在编译器中的一个抽象数据结构,由编译器在内部维护,代表了一个程序执行过程中会遍历到的所有路径。它用图的形式表示一个过程内所有基本块执行的可能流向, 也能反映一个过程的实时执行过程。

下面是一些常见的控制流程:

# 3.2 节点判定法

有一个简单的计算方法,圈复杂度实际上就是等于判定节点的数量再加上1。向上面提到的:if else 、switch case 、 for循环、三元运算符等等,都属于一个判定节点,例如下面的代码:

function testComplexity(*param*) {
    let result = 1;
    if (param > 0) {
        result--;
    }
    for (let i = 0; i < 10; i++) {
        result += Math.random();
    }
    switch (parseInt(result)) {
        case 1:
            result += 20;
            break;
        case 2:
            result += 30;
            break;
        default:
            result += 10;
            break;
    }
    return result > 20 ? result : result;
}
@前端进阶之旅: 代码已经复制到剪贴板

上面的代码中一共有1个if语句,一个for循环,两个case语句,一个三元运算符,所以代码复杂度为 4+1+1=6。另外,需要注意的是 || 和 && 语句也会被算作一个判定节点,例如下面代码的代码复杂为3:

function testComplexity(*param*) {
    let result = 1;
    if (param > 
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • Canvas 绘制动画时钟
    • Canvas 绘制粒子动画背景
    • DOM编程之API学习总结篇
    • JS 中的 call、apply、bind 方法
    • JS 中的事件绑定、事件监听、事件委托
    • JS常用的内置函数整理
    • JS继承的几种方法总结
    • JS计算字符串所占字节数
    • JavaScript-DOM事件
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript原生数组及高阶函数
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript启示录阅读笔录
    • JavaScript对象
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript常用的代码片段
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript继承的几种方式
    • JavaScript词法分析和作用域闭包
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript常用方法函数收集
    • Javascript数组详解
    • OOP之原型与原型链
    • OOP之类与对象
    • OOP之面向对象
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • arguments详解
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript 下常用的字符串操作
    • javascript常用积累
    • javascript笔记总结篇
    • parsetInt parsetFloat与eval isNaN用法
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS与jQuery操作DOM对比
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 梳理常用的正则表达式
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析JSON stringify
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 浅谈闭包
    • 深拷贝 vs 浅拷贝
    • 编写可维护的JavaScript
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合