本文探讨JavaScript中深层嵌套代码的危害及优化策略。通过提炼抽取和反转排列两种技巧，结合卫语句模式，有效降低代码嵌套深度，提升可读性与维护性。
前言
阅读大量过度嵌套的代码后，我深刻意识到其严重性。入职初期，在一个老项目中，我目睹了连续40个else if语句，嵌套层级高达6层，涉及if、for和forEach。由于缺乏对代码嵌套层级的预先限制约定，导致了这一局面。
此后，我认识到编写代码与写出优质代码是截然不同的概念。能够实现复杂需求并不代表代码质量高，因此我开始重点关注代码结构的设计。
事实上，许多需要编写的逻辑本身非常复杂。乍看之下，层层堆叠的判定嵌套似乎每一层都不可或缺，我们只能尽力使其看起来不那么混乱。
例如，减少使用Tab的使用频率。
一、何为嵌套代码
嵌套代码是指在函数内部添加更深层级的代码块。在javascript语言中，常用的嵌套手段都包含符号’{‘。对于一个代码块，排除平级情况，其内部的’{'越多，说明该代码块的嵌套深度越大。
简而言之：禁止套娃。
对于以下代码，它的嵌套深度为1：
function fun1 () {
console.log(1);
}
而如果在内部加上if语句，其深度将变为2：
function fun1 () {
if (true) {
console.log(1);
}
}
而如果再加一个循环进去，深度将变为3：
function fun1 () {
if (true) {
for (let i = 0; i < 5; i++) {
console.log(1);
}
} else {
console.log(2);
}
}
而…
好的各位，我最多最多就到这了，再套下去我就要开始觉得恶心了.在这里可能没有那么直观, 而这段代码放在编辑器里, console.log前面已经有三道竖线了, 光是tab提行就已经开始不舒服了.
在三层嵌套以上，你所做的一切就不再是一套单一的算法，这已经开始逐渐演变为多个算法的组合了，是可以做一些封装抽离而最好不要就这样混写在一起。
实战中三层嵌套绝对连半数以下的计算都处理不了，那如果还有逻辑没编写呢。
二、避免嵌套
1.提炼抽取
提炼(Extraction), 我一般管这叫抽离, 当然, 不一定要抽到外面, 只要能维持嵌套深度处于稳定的水平就好(不过函数内实在不能在消减嵌套深度那还是抽到外面形成另外一个函数吧).
比如这段嵌套：
function fun1() {
const arr = [1, 2, 3, 4]
if (arr.length = 4) {
arr.forEach((ele) => {
if (a === 4) {
console.log(4);
}
});
}
}
fun1();
可以改为这样：
function fun1() {
const arr = [1, 2, 3, 4]
const xxx = (a) => {
if (a === 4) {
console.log(4);
}
}
if (arr.length = 4) {
arr.forEach(xxx);
}
}
fun1();
嵌套深度由4减小为3。
原理十分明了，就好像在原生环境获取DOM，有的人喜欢这样：
function change() {
document.querySelector("#scar").style.display = 'none';
}
有的人喜欢：
function change() {
const scar = document.querySelector("#scar");
scar.style.display = 'none';
}
抽离提炼就类似于将前者转化为了后者。
封装axios也是一样的道理(不过那更多还是为了避免接口变动导致的被动局面)。
2.反转排列
反转(Inversion)，对于判定语句，把正面条件排在负面条件前通常会需要更多的判定，所以改为优先处理负面条件。
先把正面条件放前面：
function justice(e) {
if(e.length > 5) {
for(let i = 0; i < e.length; i++) {
console.log(e);
}
} else if (e.length === 2){
return 2;
} else {
return false
}
}
但是如果先进行负面条件判定：
function justice(e) {
if(e.length === 2) {
return 2;
} else if (e.length < 5) { // 这里也可以另起一个if, 不过这样可以节约一行 )
return false;
}
for(let i = 0; i < e.length; i++) {
console.log(e);
}
}
可以看到现在深度层级由3减小到2。
这种优化方法需要先把少数，需要特殊处理的情况在前面解决完及时退出，剩下的多数情况就可以不放在判定语句中。
而在这个过程中，需要把最特殊，且不将其他特殊情况包含在内的情况写在前面，越特殊，越提前处理，此处e.length === 2为最特殊，而e.length < 5这个特殊情况将e.length === 2包含在内，所以应当第二个处理。
我在前面也写过这种做法，将判定嵌套改为平次的卫语句，称作validation gatekepping，感兴趣的话可以去看这篇：
JavaScript多级判定代码优化浅析
不过还可以在平次判定这个基础上使用这个技巧，我们把负面情况放在靠前的平次判定处理，如果处理中途出现过多嵌套，那就提炼抽离，把正面条件放最后：
function justice(e) {
if(e.length === 2) {
return 2;
}
if(e.length === 3) {
return 3;
}
if (e.length < 5) {
return false;
}
for(let i = 0; i < e.length; i++) {
console.log(e);
}
}
截取最近项目里的代码作为例子，现在有两个world，一个新一个旧，如果需要让旧world的视图更新，那么需要将新world的world.webglGroup.children内的元素部分替换，其他除world.frameInfo外也要全替换。
async changeWorld(oldFrame, newWorld) {
for (const key in newWorld) {
if (key === 'frameInfo') {
} else if (key === 'webglGroup') {
for (const pro in newWorld[key]) {
if (pro === 'children') {
this.worldList[oldWorldIndex][key][pro] = this.worldList[oldWorldIndex][key][pro].filter((ele) => { return ele.type !== 'Group' });
this.worldList[oldWorldIndex][key][pro].push(...newWorld[key][pro].filter((ele) => { return ele.type === 'Group' }));
} else {
this.worldList[oldWorldIndex][key][pro] = newWorld[key][pro];
}
}
} else {
this.worldList[oldWorldIndex][key] = newWorld[key];
}
}
}
以上是初版，现在用Extraction提炼和Inversion反转去尝试降低嵌套深度：
先把world.webglGroup.children局部替换的代码提炼为replace，
已知world.frameInfo不需要替换，那么正常的负面条件写法应当为key === 'frameInfo'，但即便如此key === 'frameInfo'和key === 'webglGroup'也是必须用else if处理的，如果改成平次if又不能终止执行，那么这两个特殊条件在一轮循环中都会被执行。
本着要把正面条件处理方案写最后的原则，直接在最后一个特殊条件不满足(按照上文所述写法，最后一个特殊条件不满足说明前面所列特殊条件均不满足)时执行正面条件处理方案。
else if (key !== 'frameInfo') {
this.worldList[oldWorldIndex][key] = newWorld[key];
}
async changeWorld(oldFrame, newWorld) {
let oldWorldIndex = this.worldList.findIndex((w) => w.frameInfo.frame === oldFrame);
const replace = () => {
this.worldList[oldWorldIndex][key]['children'] = this.worldList[oldWorldIndex][key]['children'].filter((ele) => {
return ele.type !== 'Group';
});
this.worldList[oldWorldIndex][key]['children'].push(...newWorld[key]['children'].filter((ele) => {
return ele.type === 'Group';
}));
}
for (const key in newWorld) {
if (key === 'webglGroup') {
replace(key);
} else if (key !== 'frameInfo') {
this.worldList[oldWorldIndex][key] = newWorld[key];
}
}
return this.worldList[oldWorldIndex];
}
只是判定需求不同罢了。
上面这种写法是在所有负面条件不满足时执行正面条件处理方案。
前面反转的例子是在任意负面条件不满足时结束执行。
但遵循两种优化手段的原则都可以实施优化。
到此这篇关于JavaScript避免嵌套代码浅析的文章就介绍到这了,更多相关JS避免嵌套代码内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！