快捷導(dǎo)航

JavaScript避免嵌套代碼淺析

更新時(shí)間：2023年02月22日 10:12:12 作者：白瑕

這篇文章主要介紹了JavaScript避免嵌套代碼，很多時(shí)候需要編寫(xiě)的邏輯本身就很惡心, 乍看之下, 堆頁(yè)巖般的判定嵌套里似乎每一層都是必要的, 也只能說(shuō)盡量讓它看起來(lái)不那么惡心

前言

看過(guò)不少過(guò)度嵌套的代碼, 我真正意識(shí)到問(wèn)題的嚴(yán)重性是剛?cè)肼毮菚?huì), 我在一個(gè)老項(xiàng)目里看到了40個(gè)連續(xù)的else if, 套了6層的if, for和forEach, 因?yàn)槲覀儾](méi)有做什么限制代碼嵌套的提前約定.

呃, 那之后認(rèn)識(shí)到會(huì)寫(xiě)代碼和代碼寫(xiě)得好完全是兩種概念, 能夠?qū)崿F(xiàn)復(fù)雜的需求也并不能說(shuō)明代碼寫(xiě)得好, 開(kāi)始注重代碼結(jié)構(gòu)方面.

事實(shí)是, 很多時(shí)候需要編寫(xiě)的邏輯本身就很惡心, 乍看之下, 堆頁(yè)巖般的判定嵌套里似乎每一層都是必要的, 也只能說(shuō)盡量讓它看起來(lái)不那么惡心.

嗯, 比如少來(lái)幾次Tab.

一、何為嵌套代碼

嵌套代碼是在函數(shù)內(nèi)部添加更深層級(jí)的代碼塊, 放在javascript里, 常用的嵌套手段都包含符號(hào)’{‘, 那么對(duì)于一個(gè)代碼塊, 刨除平級(jí)的情況, 其內(nèi)部的’{'越多就說(shuō)明這個(gè)代碼塊的嵌套深度越大.

也就是: 禁止套娃.

對(duì)于以下代碼, 它的嵌套深度為1:

function fun1 () {
  console.log(1);
}

而如果在內(nèi)部加上if語(yǔ)句, 其深度將變?yōu)?:

function fun1 () {
  if (true) {
    console.log(1);
  }
}

而如果再加一個(gè)循環(huán)進(jìn)去, 深度將變?yōu)?:

function fun1 () {
  if (true) {
    for (let i = 0; i < 5; i++) {
      console.log(1);
    }
  } else {
    console.log(2);
  }
}

而…

好的各位, 我最多最多就到這了, 再套下去我就要開(kāi)始覺(jué)得惡心了.在這里可能沒(méi)有那么直觀, 而這段代碼放在編輯器里, console.log前面已經(jīng)有三道豎線了, 光是tab提行就已經(jīng)開(kāi)始不舒服了.

在三層嵌套以上, 你所做的一切就不再是一套單一的算法, 這已經(jīng)開(kāi)始逐漸演變?yōu)槎鄠€(gè)算法的組合了, 是可以做一些封裝抽離而最好不要就這樣混寫(xiě)在一起.

實(shí)戰(zhàn)中三層嵌套絕對(duì)連半數(shù)以下的計(jì)算都處理不了, 那如果還有邏輯沒(méi)編寫(xiě)呢.

二、避免嵌套

1.提煉抽取

提煉(Extraction), 我一般管這叫抽離, 當(dāng)然, 不一定要抽到外面, 只要能維持嵌套深度處于穩(wěn)定的水平就好(不過(guò)函數(shù)內(nèi)實(shí)在不能在消減嵌套深度那還是抽到外面形成另外一個(gè)函數(shù)吧).

比如這段嵌套:

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.

原理十分明了, 就好像在原生環(huán)境獲取DOM, 有的人喜歡這樣:

function change() {
  document.querySelector("#scar").style.display = 'none';
}

有的人喜歡:

function change() {
  const scar = document.querySelector("#scar");
  scar.style.display = 'none';
}

抽離提煉就類(lèi)似于將前者轉(zhuǎn)化為了后者.

封裝axios也是一樣的道理(不過(guò)那更多還是為了避免接口變動(dòng)導(dǎo)致的被動(dòng)局面).

2.反轉(zhuǎn)排列

反轉(zhuǎn)(Inversion), 對(duì)于判定語(yǔ)句, 把正面條件排在負(fù)面條件前通常會(huì)需要更多的判定, 所以改為優(yōu)先處理負(fù)面條件.

先把正面條件放前面:

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
  }
}

但是如果先進(jìn)行負(fù)面條件判定:

function justice(e) {
  if(e.length === 2) {
    return 2;
  } else if (e.length < 5) { // 這里也可以另起一個(gè)if, 不過(guò)這樣可以節(jié)約一行 )
    return false;
  } 
  for(let i = 0; i < e.length; i++) {
    console.log(e);
  }
}

可以看到現(xiàn)在深度層級(jí)由3減小到2.

這種優(yōu)化方法需要先把少數(shù), 需要特殊處理的情況在前面解決完及時(shí)退出, 剩下的多數(shù)情況就可以不放在判定語(yǔ)句中.

而在這個(gè)過(guò)程中, 需要把最特殊, 且不將其他特殊情況包含在內(nèi)的情況寫(xiě)在前面, 越特殊, 越提前處理, 此處e.length === 2為最特殊, 而e.length < 5這個(gè)特殊情況將e.length === 2包含在內(nèi), 所以應(yīng)當(dāng)?shù)诙€(gè)處理.

我在前面也寫(xiě)過(guò)這種做法, 將判定嵌套改為平次的衛(wèi)語(yǔ)句, 稱(chēng)作validation gatekepping, 感興趣的話可以去看這篇:

JavaScript多級(jí)判定代碼優(yōu)化淺析

不過(guò)還可以在平次判定這個(gè)基礎(chǔ)上使用這個(gè)技巧, 我們把負(fù)面情況放在靠前的平次判定處理, 如果處理中途出現(xiàn)過(guò)多嵌套, 那就提煉抽離, 把正面條件放最后:

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);
  }
}

截取最近項(xiàng)目里的代碼作為例子, 現(xiàn)在有兩個(gè)world, 一個(gè)新一個(gè)舊, 如果需要讓舊world的視圖更新, 那么需要將新world的world.webglGroup.children內(nèi)的元素部分替換, 其他除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];
    }
  }
}

以上是初版, 現(xiàn)在用Extraction提煉和Inversion反轉(zhuǎn)去嘗試降低嵌套深度:

先把world.webglGroup.children局部替換的代碼提煉為replace,

已知world.frameInfo不需要替換, 那么正常的負(fù)面條件寫(xiě)法應(yīng)當(dāng)為key === 'frameInfo', 但即便如此key === 'frameInfo'和key === 'webglGroup'也是必須用else if處理的, 如果改成平次if又不能終止執(zhí)行, 那么這兩個(gè)特殊條件在一輪循環(huán)中都會(huì)被執(zhí)行.

本著要把正面條件處理方案寫(xiě)最后的原則, 直接在最后一個(gè)特殊條件不滿足(按照上文所述寫(xiě)法, 最后一個(gè)特殊條件不滿足說(shuō)明前面所列特殊條件均不滿足)時(shí)執(zhí)行正面條件處理方案.

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];
}

只是判定需求不同罷了.

上面這種寫(xiě)法是在所有負(fù)面條件不滿足時(shí)執(zhí)行正面條件處理方案.

前面反轉(zhuǎn)的例子是在任意負(fù)面條件不滿足時(shí)結(jié)束執(zhí)行.

但遵循兩種優(yōu)化手段的原則都可以實(shí)施優(yōu)化.

到此這篇關(guān)于JavaScript避免嵌套代碼淺析的文章就介紹到這了,更多相關(guān)JS避免嵌套代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: