共计 5481 个字符，预计需要花费 14 分钟才能阅读完成。
当一个我的项目通过继续迭代，一直减少性能，逐步变成一个简单的产品时，新性能的开发变得绝对艰难。其中一个很大的起因是代码复杂度高，导致可维护性和可读性都很差。本文将从前端 JavaScript 的角度登程，介绍一些无效的办法和技巧来优化前端代码的 圈复杂度。
什么是圈复杂度
圈复杂度的计算基于程序中的决策构造，如条件语句（if 语句）、循环语句（for、while 语句）、分支语句（switch 语句）等。每当程序流程图中减少一个决策点，圈复杂度就会减少 1。圈复杂度的值越高，示意代码的复杂性越大，代码的可读性、可测性和可维护性也会受到影响。
通常状况下，圈复杂度的推荐值应该在 1 到 10 之间。超过 10 的代码模块可能须要进行重构，以进步代码的可了解性和可测试性，并升高引入谬误的危险。
辅助工具
VScode 插件 Code Metrics
VScode 插件 Code Metrics 能够帮忙咱们疾速发现那些须要优化复杂度的代码，装置好插件后如下图所示，在代码上方会呈现对应的复杂度值，依据值的大小能够看出哪些代码是急需优化晋升可读性。
鼠标点击所提醒复杂度数值的中央能够看到具体是哪些代码影响了复杂度，能够进行针对性的优化。
eslint 查看
能够应用 eslint 帮忙查看代码的圈复杂度，当超出了某个值就会报错。
rules: {
complexity: [
'error',
{max: 10}
]
}如下面的配置就是超出了 10 就会呈现报错信息。
圈复杂度的罕用解决办法
函数拆分和重构，繁多职责
较高的圈复杂度往往意味着函数或办法外部有过多的决策门路。通过将简单的函数分解成多个小而清晰的函数，能够升高每个函数的圈复杂度，并使代码更易于了解和保护。拆分函数时，可依据功能模块或责任进行分类，确保每个函数只负责一项具体的工作。
优化前代码：
function handle(arr) {
// 去重
let _arr=[],_arrIds=[];
for(let i=0;i<arr.length;i++){if(_arrIds.indexOf(arr[i].id)===-1){_arrIds.push(arr[i].id);
_arr.push(arr[i]);
}
}
// 替换
_arr.map(item=>{for(let key in item){if(item[key]===''){item[key]='--';
}
}
});
// 排序
_arr.sort((item1,item2)=>item1.id-item2.id);
return _arr;
}优化后代码：
function removeDuplicates(arr) {const uniqueArr = [];
const uniqueIds = [];
for(let i = 0; i < arr.length; i++) {if(uniqueIds.indexOf(arr[i].id) === -1) {uniqueIds.push(arr[i].id);
uniqueArr.push(arr[i]);
}
}
return uniqueArr;
}
function replaceEmptyValues(arr) {
const processedArr = arr.map(item => {for(let key in item) {if(item[key] === '') {item[key] = '--';
}
}
return item;
});
return processedArr;
}
function sortById(arr) {const sortedArr = arr.sort((item1, item2) => item1.id - item2.id);
return sortedArr;
}
function handle(arr) {const uniqueArr = removeDuplicates(arr);
const processedArr = replaceEmptyValues(uniqueArr);
const sortedArr = sortById(processedArr);
return sortedArr;
}以上将原始函数拆分成了三个函数。removeDuplicates 函数用于去除数组中的反复元素，replaceEmptyValues 函数用于遍历替换空值，sortById 函数用于依据 id 进行排序。每个函数都只负责一个明确的职责。
卫语句能够缩小分支
对输出条件进行多重判断时，应用卫语句能够缩小分支语句的应用，进步代码的可读性和可维护性。
// 优化前
function calculateScore(score) {if (score < 0) {return "Invalid score";} else if (score < 50) {return "Fail";} else if (score < 70) {return "Pass";} else if (score < 90) {return "Good";} else {return "Excellent";}
}
// 优化后
function calculateScore(score) {if (score < 0) {return "Invalid score";}
if (score < 50) {return "Fail";}
if (score < 70) {return "Pass";}
if (score < 90) {return "Good";}
return "Excellent";
}通过应用卫语句，咱们将每个条件判断独立进去，防止了嵌套的分支语句。这种优化形式使得代码更加清晰，每个条件判断都独立成为一个逻辑块，并且打消了应用 else 的须要。这样做不仅进步了代码的可读性，还不便了后续对每个条件判断的批改和保护。
简化条件表达式
有雷同逻辑代码进行条件合并输入，缩小条件判断代码，晋升可读性。
// 优化前
function a (num) {if (num === 0) {return 0;} else if (num === 1) {return 1;} else if (num === 2) {return 2;} else {return 3;}
}
// 优化后
function a (num) {if ([0, 1, 2].indexOf(num) > -1) {return num;} else {return 3;}
}
---
// 优化前
function a() {if (this.a == 0) return;
if (!this.b) return;
...
}
// 优化后
function a() {if (this.a == 0 || !this.b) return;
...
}
---
// 优化前
function a (type) {if (type === 'a') {return 'String';} else if (type === 'b') {return 'Number';} else if (type === 'c') {return 'Object';}
}
// 优化后
function a (type) {
let obj = {
'a': 'String',
'b': 'Number',
'c': 'Object'
};
return obj[type];
}表达式逻辑优化
逻辑计算也会减少圈复杂度，优化一些结构复杂的逻辑表达式，缩小不必要的逻辑判断，也将肯定水平上升高圈复杂度。
// 优化前
a && b || a && c
// 优化后
a && (b || c)通过多态形式代替条件式。
通过多态形式代替条件式是一种优化技巧，多态容许咱们依据不同的类型执行不同的操作，而不须要应用简单的条件判断逻辑。
优化前的代码：
class Shape {constructor(type) {this.type = type;}
calculateArea() {if (this.type === "circle") {// 计算圆形的面积} else if (this.type === "rectangle") {// 计算矩形的面积} else if (this.type === "triangle") {// 计算三角形的面积}
}
}优化后的代码：
class Shape {calculateArea() {throw new Error("calculateArea() method must be implemented");
}
}
class Circle extends Shape {calculateArea() {// 计算圆形的面积}
}
class Rectangle extends Shape {calculateArea() {// 计算矩形的面积}
}
class Triangle extends Shape {calculateArea() {// 计算三角形的面积}
}应用多态的形式，咱们能够通过调用相应对象的 calculateArea 办法来执行特定形态的面积计算，而无需应用简单的条件判断逻辑。
替换算法，优化复杂度
当发现某个算法的工夫复杂度较高时，能够思考替换为一个具备更优工夫复杂度的算法，以进步代码的性能。
// 优化前
function findDuplicates(nums) {let duplicates = [];
for (let i = 0; i < nums.length; i++) {for (let j = i + 1; j < nums.length; j++) {if (nums[i] === nums[j]) {duplicates.push(nums[i]);
}
}
}
return duplicates;
}
// 优化后
function findDuplicates(nums) {let freq = {};
let duplicates = [];
for (let num of nums) {if (freq[num]) {duplicates.push(num);
} else {freq[num] = true;
}
}
return duplicates;
}须要留神的是，优化算法并不总是实用于所有状况。在抉择代替算法时，应该综合思考数据规模、特定问题的个性以及算法的复杂度等因素。
合成条件式，拆分函数
当遇到简单的条件判断式或函数时，能够思考将其合成为更小的局部，以进步代码的可读性和维护性。
优化前代码：
function calculateScore(player) {if (player.score >= 100 && player.level === "expert") {return player.score * 2;} else if (player.score >= 50 || player.level === "intermediate") {return player.score * 1.5;} else {return player.score;}
}优化后代码：
function hasHighScore(player) {return player.score >= 100 && player.level === "expert";}
function hasIntermediateScore(player) {return player.score >= 50 || player.level === "intermediate";}
function calculateScore(player) {if (hasHighScore(player)) {return player.score * 2;} else if (hasIntermediateScore(player)) {return player.score * 1.5;} else {return player.score;}
}将原始的简单条件判断式拆分成了两个独立的函数：hasHighScore和 hasIntermediateScore。这样calculateScore 函数中的条件判断变得更加清晰和可读。通过合成条件式和拆分函数，咱们能够进步代码的可读性、可维护性和重用性。
缩小 return 呈现
以后大多数圈复杂度计算工具对 return 个数也进行计算，如果要针对这些工具掂量规定进行优化，缩小 return 语句个数也为一种形式。
// 优化前
function a(){const value = getSomething();
if(value) {return true;} else {return false;}
}
// 优化后
function a() {return getSomething();
}移除管制标记，缩小变量
移除管制标记能够使代码更加简洁、可读性更高，并且缩小了不必要的变量应用。
优化前的代码：
function findFirstPositive(numbers) {
let found = false;
let firstPositive = null;
for (let num of numbers) {if (num > 0) {
found = true;
firstPositive = num;
break;
}
}
if (found) {return firstPositive;} else {return -1;}
}优化后的代码：
function findFirstPositive(numbers) {for (let num of numbers) {if (num > 0) {return num;}
}
return -1;
}在优化后的代码中，咱们间接在找到第一个负数后立刻返回后果，而无需应用管制标记和额定的变量。如果遍历残缺个数组后仍未找到负数，则返回 -1。
最初
如果只是刻板的应用圈复杂度的算法去掂量一段代码的清晰度，这并不可取。在重构零碎时，咱们能够应用代码圈复杂度工具来统计代码的复杂度，并对复杂度较高的代码进行具体的场景剖析。但不是说肯定要将复杂度优化到某种程度，应该依据理论的业务状况做出优化决策。
看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）