JavaScript多級判定代碼如何優(yōu)化

本篇內(nèi)容介紹了“JavaScript多級判定代碼如何優(yōu)化”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、場景

業(yè)務(wù)代碼里, 一次操作可能會前置多個判定, 我以前只是在函數(shù)的開頭使用if語句去做這些事情, 雖然只是攔截一下不需要做else, 但是好多個判定堆在一起看著會有點(diǎn)…low, 而且, 如果這些東西堆在函數(shù)開頭的話, 看起來就像這樣:

xxx () {
  xxx
  xxx
  xxx
  xxx
  xxxxxxxxxxxxxxxxxxxxxxx
  xxxxxxxxxxxxxxxxxxxxxxxxxxx
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  xxxxxxxxxxxxxxxxxxxxxxxxxx
  xxxxxxxxxxxxxxxxxxxxxxxx
  xxxxxxxxxxxxx
}

像在豎大拇指 ), 咳…說回這種方法.

這其實(shí)是使用二元運(yùn)算符 "&&"完成的一種簡化寫法, 可以理解為一種沒有else的三元運(yùn)算(因?yàn)槲业倪壿嬂镄枰@種沒有處理辦法的寫法), 我原本以為它需要void來驅(qū)動…的確可以在這種表達(dá)式外圍包裹void, 我的確是這么做的, 整整一天.

void 運(yùn)算符對給定的表達(dá)式進(jìn)行求值，然后返回 undefined。

但其實(shí)根本沒必要, void與否并不干擾執(zhí)行.

在Vue源碼(此處僅指Vue2.6版, 我最近在看這個)里有大量的運(yùn)用邏輯運(yùn)算符來表達(dá) “那么” 或者 “so” 的寫法, 比如

src/core/vdom/patch.js中的這個函數(shù).

function sameInputType (a, b) {
  if (a.tag !== 'input') return true
  let i
  const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
  const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
  return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}

二、優(yōu)化多級判定

最初我在使用這種改進(jìn)后的if結(jié)構(gòu), 不再使用包裹式, 而是這種像閘口一樣的結(jié)構(gòu).

當(dāng)然特殊情況也還是要用if-else結(jié)構(gòu), 能優(yōu)化就優(yōu)化, 不能也不要強(qiáng)求.

1.優(yōu)化if-else結(jié)構(gòu)

就像這樣:

if() {
  if() {

  } else if() {
  
  } else if() {

  }
} else if () {
  if() {

  } else if() {

  } else {

  }
}

再復(fù)雜一些, 再在內(nèi)部加入各種邏輯, 就有些頭疼了.

完全可以把每個條件單獨(dú)分出一個if, 順序不變, 比如以上可以優(yōu)化為:

if () {
  if () {

  }
  if () {

  }
  if() {

  }
}
if () {
  if () {

  }
  if () {

  } else { // else一般沒什么辦法...

  }
}

else if里的"或"關(guān)系也可以單獨(dú)拆一個 if 出來, 在看起來很復(fù)雜的情況下, 提升可讀性.

圖示一下的話, if-else-if結(jié)構(gòu)就像深墻老院:

優(yōu)化后的if結(jié)構(gòu)更像是關(guān)隘:

有一個專有名詞validation gatekeeping(驗(yàn)證守護(hù)), 即是描述這種驗(yàn)證結(jié)構(gòu).

但是一定注意判定條件的次序, 有些地方是必須用else if的, 否則會出現(xiàn)一個條件同時執(zhí)行了多套處理方案的情況比如下面這個例子:

for (const key in newWorld) {
  if (key === 'webglGroup') {
    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 pro in newWorld[key]) pro !== 'children' && pro !== 'position' && pro !== 'rotation' && pro !== 'quaternion' && pro !== 'scale' && (this.worldList[oldWorldIndex][key][pro] = newWorld[key][pro]);
  } else if (key !== 'frameInfo') this.worldList[oldWorldIndex][key] = newWorld[key];
}

這里把else if替換成if就會導(dǎo)致key為webglGroup時兩條邏輯均會被執(zhí)行.

所以原則還是能優(yōu)化的優(yōu)化.

2.二元運(yùn)算符簡化

嵌套else-if結(jié)構(gòu)不太好用這種方式, 對于優(yōu)化后的if結(jié)構(gòu)用二元運(yùn)算符重寫, 個人覺得外層的大判定還是用if可讀性會更好, 內(nèi)部小判定用二元符簡潔, 但其實(shí)你要是用二元運(yùn)算符做嵌套判定結(jié)構(gòu)的話, 層級問題會難以處理, 多個’&&'運(yùn)算連在一起的時候JavaScript會將其解析為 僅最后一個&&為判定, 其他&&全表示 ‘和’ 關(guān)系.

當(dāng)然如果你愿意在里面寫函數(shù)的話是可以解決這個問題的, 用三元運(yùn)算符做大判定也是可以的, 但是不好…

重寫成如下:

if (10 > a > 0) {
  a > 1 && b > 3 && console.log('HelloWorld_1');
  (a > 2 && b > 4  ||  a === 100 && b > 10) && console.log('HelloWorld_2')
  // 這句可以再拆一個if出來的, 只是為了說明判定原理, 括號需要加
  // a大于2并b大于4 或 a等于100并b大于10 均可輸出HelloWorld_2
}
if (a > 10) {
  // 可以結(jié)合三元運(yùn)算符
  a === 12 ? c === 3 && console.log("a") : (b === 6 || c === 3 && a !== 15) && console.log("b")
  // 如何讓前端同事追殺自己
  // 如果a等于12, 判定如果c等于3輸出a
  // 如果a不等于12, 判定b等于6或c等于3并且a不為15,輸出b
}

但是這種邏輯運(yùn)算符我現(xiàn)在沒有找到能在判定完成之后跳出執(zhí)行的方法, 也就是說你可以用這個方法沿路做一些順手的操作, 但是不能像在if里那樣做完判定可以return跳出函數(shù).

const a = 3 < 4 && 1
console.log(a)

然后, 額, 你可以用這種方法返回值。目的是提升可讀性和簡潔化代碼, 如果一個很長的處理方案或者很長的條件就這樣安插在二元運(yùn)算符中間, 適得其反.

“JavaScript多級判定代碼如何優(yōu)化”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！