“代码是写给人看的，只是偶尔让机器执行一下。”——Donald Knuth
你知道如何快速检查你的代码质量吗？你是否想要提升代码水平，让你的代码更加优雅和高效？
那么子辰今天分享的这一重要标准你可千万不要错过！圈复杂度是公认的衡量代码质量的重要指标，它主要反映代码中的路径数量，分支越多，圈复杂度越高，代码就越难测试和维护。
如果你想让你的代码质量更上一个台阶，那么在阅读本文之后，请务必加入这个规则到你的 eslint 的配置之中，并以此来检查你的代码是否能够通过圈复杂度的验证。
圈复杂度
先来看一个代码的例子。
可以看到，这段代码比较复杂有很多的分支，并且看到它报错了，将鼠标放上去看到这是一个 eslint 的错误，它的规则叫 complexity，也就是复杂度。
这个错误告诉我们，函数“calPrice”的复杂度为 14，但是最大的复杂度要求是 10。
"rules": {
"complexity": ["error",10]
}
在 ESLint 里加上这个，就表示最高的复杂度只能是 10，超过 10 就报错了。
那么这个复杂度就是我们大名鼎鼎的圈复杂度了。
圈复杂度是公认的衡量代码质量的重要标准，记作V(G)，它主要反映代码中的路径数量，简单来说就是分支，分支越多，圈复杂度越高，代码越难测试和维护。
这张表格是无数的开发者总结出来的一个经验。
我们认为圈复杂度控制在 1~10，这个代码的质量是非常高的，如果说很难控制的话，最好也不要超过 20，超过 20 的话就很难维护了。
那么这个数字通常是使用两种公式来计算的：
其中，e 表示流程图中的边数，n 表示流程图中的节点数。
其中，R 表示平面被流程图划分的区域数量。
示例一：
我们看到上图中的函数没有任何分支，全都是顺序执行，不管函数里有一行还是一百行的代码，由于它是顺序执行并不产生分支，所以说它的圈复杂度只有一条路径，也就是圈复杂度为 1。
套用公式一：可以看到边为1，节点数为 2，那么 也就是圈复杂度为 1
套用公式二：可以看到只有一个区域，所以 也就是圈复杂度为 1
示例二：
这个图就相对复杂了点，我们直接套用公式算一下。
套用公式一：可以看到边为6，节点数为 5，那么 也就是圈复杂度为 3
套用公式二：可以看到有三个区域，一个最外围的区域，两个封闭的区域，所以 也就是圈复杂度为 3
示例三：
直接套入公式算一下。
套用公式一：可以看到边为 7，节点数为 6，那么 也就是圈复杂度为 3
套用公式二：可以看到有三个区域，一个最外围的区域，两个封闭的区域，所以 也就是圈复杂度为 3
这就是圈复杂度的计算方式，那么基于这样的一个计算标准呢，我们就可以知道为什么我们的代码会报错了，因为代码的圈复杂度算出来是 14，而最高要求 10。
总结
随着我们前端的逐渐成熟，各公司对代码质量的要求也在逐渐提高，最近收到不少同学反应各种 eslint 规则通不过的问题，那么其中呢就遇到了好几个同学是圈复杂度的问题。
我们应该时刻关注我们的代码质量，避免写出过于复杂和冗余的代码，应该尽量保持代码的简洁和清晰，遵循一些编程规范和原则，比如单一职责、开闭原则、最小惊讶等，也应该利用eslint这样的工具来帮助我们检查和优化代码，降低圈复杂度，提高代码可读性和可维护性。
当然圈复杂度只是衡量代码质量的一个方面，还有很多其他的指标和方法可以帮助我们提高代码水平。
前端在不断的发展和技术在不停的进步，我们需要更加地学习和更新我们的知识和技能，以适应不断变化的需求和环境。
文章的最后，子辰向大家重点推荐一下我们渡一的《大师课》，本文读者，大家可以来免费领取
这套课程包含
事件循环
V8引擎原理
浏览器渲染原理
一线企业项目
Vue响应式源码
首先，向大家着重说明，课程是“绝对免费的”，拿出这个顶配课程，就是我们向大家做个品牌宣传。没有套路，真心可鉴。
课程由渡一技术总监 袁进老师 主讲：
此套课程，从V8引擎原理讲到Vue源码，均是前端骨架级内容，是最底层、最核心的部分。
课程内含大量笔面试真题详解，其深度甚至超越部分面试官的理解，如面试中遇到课程里的内容，袁老师的讲解就是绝对的“标准答案”，对此我们愿负责到底。
就功效而言，一套《大师课》相当于500篇技术文章的价值总和。
课程所讲皆是根源性的知识，一经掌握将一通百通，会大幅增强你对其他知识的理解。对于大部分的前端从业者，此套课程至少可提升你30%以上的功力，对于想高薪就业、在职提薪的同学，此套《大师课》更是你必须掌握的“必修”课程。
根据下方名片提示，找助理老师领取即可
最后，祝愿每一位为自己人生奋斗的同学，厚积薄发，前程似锦。
