你不会还不知道圈复杂度吧？

“代码是写给人看的，只是偶尔让机器执行一下。”——Donald Knuth

你知道如何快速的检查你的代码质量吗？你是否想要提高你的代码水平，让你的代码更加优雅和高效？

那么你一定不要错过了圈复杂度这一重要标准！圈复杂度是公认的衡量代码质量的重要指标，它主要反映代码中的路径数量，分支越多，圈复杂度越高，代码就越难测试和维护。

如果你想让你的代码质量更上一个台阶，那么在阅读本文之后，请务必加入这个规则到你的 eslint 的配置之中，并以此来检查你的代码是否能够通过圈复杂度的验证。

圈复杂度

先来看一个代码的例子。

可以看到，这段代码比较复杂有很多的分支，并且看到它报错了，将鼠标放上去看到这是一个 eslint 的错误，它的规则叫 complexity，也就是复杂度。

这个错误告诉我们，函数“calPrice”的复杂度为 14，但是最大的复杂度要求是 10。

"rules": {
  "complexity": ["error",10]
}

在 ESLint 里加上这个，就表示最高的复杂度只能是 10，超过 10 就报错了。

那么这个复杂度就是我们大名鼎鼎的圈复杂度了。

圈复杂度是公认的衡量代码质量的重要标准，记作V(G)，它主要反映代码中的路径数量，简单来说就是分支，分支越多，圈复杂度越高，代码越难测试和维护。

这张表格是无数的开发者总结出来的一个经验。

我们认为圈复杂度控制在 1~10，这个代码的质量是非常高的，如果说很难控制的话，最好也不要超过 20，超过 20 的话就很难维护了。

那么这个数字通常是使用两种公式来计算的：

1. 其中，e 表示流程图中的边数，n 表示流程图中的节点数。
2. 其中，R 表示平面被流程图划分的区域数量。

示例一：

我们看到上图中的函数没有任何分支，全都是顺序执行，不管函数里有一行还是一百行的代码，由于它是顺序执行并不产生分支，所以说它的圈复杂度只有一条路径，也就是圈复杂度为 1。

套用公式一：可以看到边为1，节点数为 2，那么 也就是圈复杂度为 1

套用公式二：可以看到只有一个区域，所以 也就是圈复杂度为 1

示例二：

这个图就相对复杂了点，我们直接套用公式算一下。

套用公式一：可以看到边为6，节点数为 5，那么 也就是圈复杂度为 3

套用公式二：可以看到有三个区域，一个最外围的区域，两个封闭的区域，所以 也就是圈复杂度为 3

示例三：

直接套入公式算一下。

套用公式一：可以看到边为 7，节点数为 6，那么 也就是圈复杂度为 3

套用公式二：可以看到有三个区域，一个最外围的区域，两个封闭的区域，所以 也就是圈复杂度为 3

这就是圈复杂度的计算方式，那么基于这样的一个计算标准呢，我们就可以知道为什么我们的代码会报错了，因为代码的圈复杂度算出来是 14，而最高要求 10。

总结

随着我们前端的逐渐成熟，各公司对代码质量的要求也在逐渐提高，最近收到不少同学反应各种 eslint 规则通不过的问题，那么其中呢就遇到了好几个同学是圈复杂度的问题。

我们应该时刻关注我们的代码质量，避免写出过于复杂和冗余的代码，应该尽量保持代码的简洁和清晰，遵循一些编程规范和原则，比如单一职责、开闭原则、最小惊讶等，也应该利用eslint这样的工具来帮助我们检查和优化代码，降低圈复杂度，提高代码可读性和可维护性。

当然圈复杂度只是衡量代码质量的一个方面，还有很多其他的指标和方法可以帮助我们提高代码水平。

前端在不断的发展和技术在不停的进步，我们需要更加地学习和更新我们的知识和技能，以适应不断变化的需求和环境。