[ JavaScript ] 代码圈复杂度优化
原创[ JavaScript ] 代码圈复杂度优化
原创
代码圈复杂度优化
什么是圈复杂度
圈复杂度就是可以用来衡量一个模块判定结构的复杂程度，数量上表现为独立线性路径条数。举一个最简单的例子，一个函数有 if else 语句，这个时候，执行这个函数就需要两条路径来执行，一个是 if 另一个是 else，那么，这个函数的圈复杂度就为 2 。
圈复杂度越高，说明代码维护性低而且不易理解，这个时候测试成本变高同时也容易出现问题。我们需要做的就是在代码中优化，降低圈复杂度，让开发者对程序易于理解和维护。
圈复杂度也是衡量一个项目的代码质量，在大型的项目中，对圈复杂度也是有一定的要求，超出了这个标准可能就会出现告警状态，所以，圈复杂度是需要每个开发者重视的。
圈复杂度常用优化类型
- 算法优化
- 表达式逻辑优化
- 大函数拆小函数
圈复杂度优化对比
减少不必要的分支
以下是 if else 语句的一个写法，其实只要不是一个新手，一般都不会写出下面这样的代码，但还是拿这个来做个例子。
// bad
const env = "dev";
if (env === "test") {
// do something
} else if (env === "dev") {
// do something
} else if (env === "online") {
// do something
} else {
// do something
}我记得第一次做活动H5的时候就出现过这样的代码，在写完的时候就已经觉得别扭，所以，后来我做了一个修改。改成了用 swtich 的方法：
// bad
switch (env) {
case "dev":
// do something
break;
case "test":
// do something
break;
case "online":
// do something
break;
default:
// do something
break;
}但是，这样的优化其实也只是在感觉上好了一点，没有了那么多的 if else ，而是只关注每个 case 的 函数。看上去是整洁了一些，但是，圈复杂度还是没有变化。所以，需要改成：
// good
const env = "online";
const list = {
dev: pageDevEvent,
test: pageTestEvent,
online: pageOnlineEvent,
};
list[env]();圈复杂度大大降低 ，不论在 list 里面加多少配置，他的圈复杂度都是 1 。
表达式逻辑优化
表达式逻辑计算的增加也会增加圈复杂度，优化一些结构复杂的逻辑表达式，也能在一定程度上降低圈复杂度。举例：
// bad
const version = 4;
const client = "iOS";
if (
(client === "iOS" && version > 2) ||
(client === "And" && version > 3)) {
//do something
console.log("11");
}通过优化判断改为：
const isHighVerIos = client === "iOS" && version > 1;
const isHighVerAnd = client === "And" && version > 2;
if (isHighVerIos || isHighVerAnd) {
//do something
}下面是另一个例子，也是我最近看到的随手就记录了下来。虽然，让我眼前一亮，但是，实际上业务代码不知道会不会这么写，这么写其实有点另类。
// bad
const eventName = "dev";
if (eventName === "dev" || eventName === "test") {
}通过 includes 方法来判断是否含有对应的参数
//good
const eventName = "dev";
console.log(["dev", "test"].includes(eventName));试试吧，这个写法应该能改过来，毕竟和之前的方法不太一样，这个看起来会有点逼格。
减少 return 出现
//bad
function next(){
const env = getBoolen();
if(env){
return true;
}else{
return false;
}
}
//good
function next(){
return getBoolen();
}这个注意一下就好，一般 return 会有多个的情况，这样的函数还没有怎么见过。函数最多也就1到2个 return。要是整了好几个 return 那就是代码有问题了，就算没有问题看着都会难受吧。
辅助工具
可以使用 eslint 帮助检查 代码的圈复杂度，超出了某个值就会报错
"complexity": ["error", { "max": 8 }]上面的配置就是超出了 8 就会出现报错信息。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。