一、場景

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

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

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

這其實是使用二元運算符 "&&"完成的一種簡化寫法, 可以理解為一種沒有else的三元運算(因為我的邏輯里需要這種沒有處理辦法的寫法), 我原本以為它需要void來驅(qū)動…的確可以在這種表達(dá)式外圍包裹void, 我的確是這么做的, 整整一天.

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

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

在Vue源碼(此處僅指Vue2.6版, 我最近在看這個)里有大量的運用邏輯運算符來表達(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)化多級判定

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

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

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

就像這樣:

if() {
  if() {

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

  }
} else if () {
  if() {

  } else if() {

  } else {

  }
}

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

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

if () {
  if () {

  }
  if () {

  }
  if() {

  }
}
if () {
  if () {

  }
  if () {

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

  }
}

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

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

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

有一個專有名詞validation gatekeeping(驗證守護), 即是描述這種驗證結(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.二元運算符簡化

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

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

重寫成如下:

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é)合三元運算符
  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
}

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

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

然后, 額, 你可以用這種方法返回值

目的是提升可讀性和簡潔化代碼, 如果一個很長的處理方案或者很長的條件就這樣安插在二元運算符中間, 適得其反.

到此這篇關(guān)于JavaScript多級判定代碼優(yōu)化淺析的文章就介紹到這了,更多相關(guān)JS多級判定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論