[代码质量] 代码质量管控 — 复杂度检测 (JavaScript)

2023年5月29日上午4:25 • JavaScript • 阅读 62

代码的复杂度是评估一个项目的重要标准之一。较低的复杂度既能减少项目的维护成本，又能避免一些不可控问题的出现。然而在日常的开发中却没有一个明确的标准去衡量代码结构的复杂程度，大家只能凭着经验去评估代码结构的复杂程度，比如，代码的程度、结构分支的多寡等等。当前代码的复杂度到底是个什么水平？什么时候就需要我们去优化代码结构、降低复杂度？这些问题我们不得而知。
因此，我们需要一个明确的标准去衡量代码的复杂度。

Litmus 是我们团队建设的一个代码质量检测系统，目前包括代码的风格检查、重复率检查以及复杂度检查。litmus 采用代码的 Maintainability（可维护性）来衡量一个代码的复杂度，并且通过以下三个方面来定义一段代码的 Maintainability 的值：

Halstead Volume（代码容量）
Cyclomatic Complexity（圈复杂度）
Lines of Code（代码行数）

Maintainability Index = MAX(0,(171 - 5.2 * ln(Halstead Volume) - 0.23 * (Cyclomatic Complexity) - 16.2 * ln(Lines of Code))*100 / 171)<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span>

代码行数不做赘述，下面我们具体介绍代码容量、圈复杂的含义以及它们的计算原理

代码的容量关注的是代码的词汇数，有以下几个基本概念

参数含义 n1 Number of unique operators，不同的操作元（运算子）的数量 n2 Number of unique operands，不同的操作数（算子）的数量 N1 Number of total occurrence of operators，为所有操作元（运算子）合计出现的次数 N2 Number of total occurrence of operands，为所有操作数（算子）合计出现的次数 Vocabulary n1 + n2，词汇数 length N1 + N2，长度 Volume length * Log2 Vocabulary，容量

一个例子

<span class="hljs-keyword">function tFunc(opt) {
    <span class="hljs-built_in">let result = opt + 1;
    <span class="hljs-built_in">return result;
}
// n1&#xFF1A;<span class="hljs-keyword">function&#xFF0C;<span class="hljs-built_in">let&#xFF0C;=&#xFF0C;+&#xFF0C;<span class="hljs-built_in">return
// n2&#xFF1A;tFunc&#xFF0C;opt&#xFF0C;result&#xFF0C;1
// N1&#xFF1A; <span class="hljs-keyword">function&#xFF0C;<span class="hljs-built_in">let&#xFF0C;=&#xFF0C;+&#xFF0C;<span class="hljs-built_in">return
// N2&#xFF1A;tFunc&#xFF0C;opt&#xFF0C;result&#xFF0C;opt&#xFF0C;1&#xFF0C;result
// Vocabulary = n1 + n2 = 9
// length = N1 + N2 = 11
// Volume =  length * Log2 Vocabulary = 34.869<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span></span></span></span></span></span></span></span></span></span>

圈复杂度（Cyclomatic complexity，简写CC）也称为条件复杂度，是一种代码复杂度的衡量标准。由托马斯·J·麦凯布（Thomas J. McCabe, Sr.）于1976年提出，用来表示程序的复杂度，其符号为VG或是M。它可以用来衡量一个模块判定结构的复杂程度，数量上表现为独立现行路径条数，也可理解为覆盖所有的可能情况最少使用的测试用例数。圈复杂度大说明程序代码的判断逻辑复杂，可能质量低且难于测试和维护。程序的可能错误和高的圈复杂度有着很大关系。

如何计算

如果在控制流图中增加了一条从终点到起点的路径，整个流图形成了一个闭环。圈复杂度其实就是在这个闭环中线性独立回路的个数。

如图，线性独立回路有：

e1→ e2 → e
e1 → e3 → e

所以复杂度为2
对于简单的图，我们还可以数一数，但是对于复杂的图，这种方法就不是明智的选择了。

计算公式

V(G) = e &#x2013; n + 2 * p<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span>

e：控制流图中边的数量（对应代码中顺序结构的部分）
n：代表在控制流图中的判定节点数量，包括起点和终点（对应代码中的分支语句）
ps：所有终点只计算一次，即使有多个 return 或者 throw
p：独立组件的个数

几种常见的语句控制流图

一个例子

code

<span class="hljs-keyword">function <span class="hljs-built_in">test(index, string) {
       <span class="hljs-built_in">let <span class="hljs-built_in">returnString;
       <span class="hljs-keyword">if (index == 1) {
           <span class="hljs-keyword">if (string.length < 2) {
              <span class="hljs-built_in">return <span class="hljs-string">'&#x5206;&#x652F;1';
           }
           <span class="hljs-built_in">returnString = <span class="hljs-string">"returnString1";
       } <span class="hljs-keyword">else <span class="hljs-keyword">if (index == 2) {
           <span class="hljs-keyword">if (string.length < 5) {
              <span class="hljs-built_in">return <span class="hljs-string">'&#x5206;&#x652F;2';
           }
           <span class="hljs-built_in">returnString = <span class="hljs-string">"returnString2";
       } <span class="hljs-keyword">else {
          <span class="hljs-built_in">return  <span class="hljs-string">'&#x5206;&#x652F;3'
       }
       <span class="hljs-built_in">return <span class="hljs-built_in">returnString;
}<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

flow-chart

flow-graph

e&#xFF08;&#x8FB9;&#xFF09;&#xFF1A;9
n&#xFF08;&#x5224;&#x5B9A;&#x8282;&#x70B9;&#xFF09;&#xFF1A;6
p&#xFF1A;1
V = e - n + 2 * p = 5<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span>

如何优化

主要针对圈复杂度

大方向：减少判断分支和循环的使用

（下面某些例子可能举的不太恰当，仅用以说明这么一种方法）

// &#x4F18;&#x5316;&#x524D;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;4
<span class="hljs-keyword">function a (<span class="hljs-built_in">type) {
    <span class="hljs-keyword">if (<span class="hljs-built_in">type === <span class="hljs-string">'name') {
        <span class="hljs-built_in">return name：<span class="hljs-variable">${type};
    } <span class="hljs-keyword">else <span class="hljs-keyword">if (<span class="hljs-built_in">type === <span class="hljs-string">'age') {
        <span class="hljs-built_in">return age：<span class="hljs-variable">${type};
    } <span class="hljs-keyword">else <span class="hljs-keyword">if (<span class="hljs-built_in">type === <span class="hljs-string">'sex') {
        <span class="hljs-built_in">return sex：<span class="hljs-variable">${type};
    }
}

// &#x4F18;&#x5316;&#x540E;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;1
<span class="hljs-keyword">function <span class="hljs-function"><span class="hljs-title">getName () {
    <span class="hljs-built_in">return name：<span class="hljs-variable">${type};
}
<span class="hljs-keyword">function <span class="hljs-function"><span class="hljs-title">getAge () {
    <span class="hljs-built_in">return age：<span class="hljs-variable">${type};
}
<span class="hljs-keyword">function <span class="hljs-function"><span class="hljs-title">getSex () {
    <span class="hljs-built_in">return sex：<span class="hljs-variable">${type};
}<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

// &#x4F18;&#x5316;&#x524D;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;4
<span class="hljs-keyword">function a (<span class="hljs-built_in">type) {
    <span class="hljs-keyword">if (<span class="hljs-built_in">type === <span class="hljs-string">'name') {
        <span class="hljs-built_in">return <span class="hljs-string">'Ann';
    } <span class="hljs-keyword">else <span class="hljs-keyword">if (<span class="hljs-built_in">type === <span class="hljs-string">'age') {
        <span class="hljs-built_in">return 11;
    } <span class="hljs-keyword">else <span class="hljs-keyword">if (<span class="hljs-built_in">type === <span class="hljs-string">'sex') {
        <span class="hljs-built_in">return <span class="hljs-string">'female';
    }
}

// &#x4F18;&#x5316;&#x540E;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;1
<span class="hljs-keyword">function a (<span class="hljs-built_in">type) {
    <span class="hljs-built_in">let obj = {
        <span class="hljs-string">'name': <span class="hljs-string">'Ann',
        <span class="hljs-string">'age': 11,
        <span class="hljs-string">'sex': <span class="hljs-string">'female'
    };
    <span class="hljs-built_in">return obj[<span class="hljs-built_in">type];
}<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

// &#x4F18;&#x5316;&#x524D;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;4
<span class="hljs-keyword">function a (num) {
    <span class="hljs-keyword">if (num === 0) {
        <span class="hljs-built_in">return 0;
    } <span class="hljs-keyword">else <span class="hljs-keyword">if (num === 1) {
        <span class="hljs-built_in">return 1;
    } <span class="hljs-keyword">else <span class="hljs-keyword">if (num === 2) {
        <span class="hljs-built_in">return 2;
    } <span class="hljs-keyword">else {
        <span class="hljs-built_in">return 3;
    }
}

// &#x4F18;&#x5316;&#x540E;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;2
<span class="hljs-keyword">function a (num) {
    <span class="hljs-keyword">if ([0,1,2].indexOf(num) > -1) {
        <span class="hljs-built_in">return num;
    } <span class="hljs-keyword">else {
        <span class="hljs-built_in">return 3;
    }
}<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

// &#x4F18;&#x5316;&#x524D;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;4
<span class="hljs-keyword">function <span class="hljs-function"><span class="hljs-title">a () {
    <span class="hljs-built_in">let str = <span class="hljs-string">'';
    <span class="hljs-keyword">for (<span class="hljs-built_in">let i = 0; i < 10; i++) {
        str += <span class="hljs-string">'a' + i;
    }
    <span class="hljs-built_in">return str
}
<span class="hljs-keyword">function <span class="hljs-function"><span class="hljs-title">b () {
    <span class="hljs-built_in">let str = <span class="hljs-string">'';
    <span class="hljs-keyword">for (<span class="hljs-built_in">let i = 0; i < 10; i++) {
        str += <span class="hljs-string">'b' + i;
    }
    <span class="hljs-built_in">return str
}
<span class="hljs-keyword">function <span class="hljs-function"><span class="hljs-title">c () {
    <span class="hljs-built_in">let str = <span class="hljs-string">'';
    <span class="hljs-keyword">for (<span class="hljs-built_in">let i = 0; i < 10; i++) {
        str += <span class="hljs-string">'c' + i;
    }
    <span class="hljs-built_in">return str
}

// &#x4F18;&#x5316;&#x540E;&#xFF0C;&#x5708;&#x590D;&#x6742;&#x5EA6;2
<span class="hljs-keyword">function a (<span class="hljs-built_in">type) {
    <span class="hljs-built_in">let str = <span class="hljs-string">'';
    <span class="hljs-keyword">for (<span class="hljs-built_in">let i = 0; i < 10; i++) {
        str += <span class="hljs-built_in">type + i;
    }
    <span class="hljs-built_in">return str
}<span class="copy-code-btn">&#x590D;&#x5236;&#x4EE3;&#x7801;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

首页项目总览

详情页-总览

详情页-代码复杂度检测详情

Original: https://www.cnblogs.com/0616–ataozhijia/p/11607977.html
Author: demoblog
Title: [代码质量] 代码质量管控 — 复杂度检测 (JavaScript)

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/535088/

转载文章受原作者版权保护。转载请注明原作者出处！

JavaScript

【自取】最近整理的，有需要可以领取学习：

Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言刷题答案下载！

你不知道的 JavaScript 系列中( 23 ) －值类型

将值从一种类型转换为另一种类型通常称为类型转换，这是显式的情况;隐式的情况称为强制类型转换。 JavaScript 中的强制类型转换总是返回标量基本类型值，如字符串、数字和布尔值…

JavaScript 2023年5月29日
0070
JavaScript进行WebSocket字节流通讯示例

websocket进行通讯时，可以选择采用字符串或者字节流的传输模式。但在发送与接收时，需要考虑数据的分包，即分成一个个请求与响应消息。无论是采用哪种传输模式，都不免要遇到这个问题…

JavaScript 2023年5月29日
0074
[转]JavaScript ES6 class指南

EcmaScript 2015 （又称ES6）通过一些新的关键字，使类成为了JS中一个新的一等公民。但是目前为止，这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖，所以它们…

JavaScript 2023年5月29日
0054
javascript中new Date()的浏览器兼容性问题

引言：同一种语言javascript，在不同的浏览器中，存在语言兼容性问题，本质上是由于不同的浏览器是支持的语言标准和实现上各有差异。本文将基于new Date来创建Date对象…

JavaScript 2023年5月29日
0063
深入理解 JavaScript 异步系列（5）—— async await

第一部分，ES7 中引入 async-await 原文地址http://www.cnblogs.com/wangfupeng1988/p/6532734.html 未经作者允许，不…

JavaScript 2023年5月29日
0068
javascript 闭包最简单理解

首先说3点与闭包有关系的东西。一、变量的作用域变量的作用域不难理解。 1.函数内部可以访问函数外部的变量，而函数外部不能访问函数内部的变量。 2.如果在函数内定义变量的时候，不…

JavaScript 2023年5月29日
0076
JavaScript 的正则也有单行模式了

正则表达式最早是由 Ken Thompson 于 1970 年在他改进过的 QED 编辑器里实现的，正则里最简单的元字符 “.” 在当时所匹配的就是除换行符…

JavaScript 2023年5月29日
0073
Node.js：用JavaScript写服务器端程序-介绍并写个MVC框架

(注：1、本文基于Node.js V0.3.6； 2、本文假设你了解JavaScript； 3、本文假设你了解MVC框架；4、本文作者：QLeelulu，转载请注明出处。5、本文示…

JavaScript 2023年5月29日
0079
关于JavaScript的函数总结

function sum(num){ return num + 100 } function sum(num){ return num + 200 } let totle = su…

JavaScript 2023年5月29日
0058
How JavaScript works: an overview of the engine, the runtime, and the call stack

https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf Origina…

JavaScript 2023年5月29日
0073
Javascript / Nodejs call 和 apply

call: 改变了函数运行的作用域，即改变函数里面this的指向apply：同call，apply第二个参数是数组结构例如： this.name = ‘Ab’var obj = {…

JavaScript 2023年5月29日
0087
你不知道的 JavaScript 系列中( 32 ) －运算符的优先级

JavaScript 中的 && 和 || 运算符返回它们其中一个操作数的值,而非 true 或 false。在一个运算符两个操作数的情况下这比较好理解: 那么两个…

JavaScript 2023年5月29日
0049
javaScript系列 [49]- ast && render

404. 抱歉，您访问的资源不存在。可能是网址有误，或者对应的内容被删除，或者处于私有状态。代码改变世界，联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

JavaScript 2023年5月29日
0082
JavaScript 秒数转换为时分秒

在page页面含有倒计时，需要把剩余秒数转换为时分秒。场景在page页面含有倒计时，需要把剩余秒数转换为时分秒。 1.1 函数 javascript;gutter:true; …

JavaScript 2023年5月29日
0085
javascript运行机制与原理

本文将从浏览器进程，到浏览器内核运行，到JS引擎单线程，再到JS事件循环机制，系统梳理js的运行机制和原理，形成一个知识体系区分进程和线程线程和进程区分不清，是很多新手都会犯的…

JavaScript 2023年5月29日
0079
JavaScript 拖放效果

拖放效果，也叫拖拽、拖动，学名Drag-and-drop ，是最常见的js特效之一。如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。这个程序的原型是在做图片切割效果的时候…

JavaScript 2023年5月29日
0069

2024 年 5 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

[代码质量] 代码质量管控 — 复杂度检测 (JavaScript)

如何计算

计算公式

几种常见的语句控制流图

如何优化

大家都在看