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

更新時間：2023年02月22日 10:02:31 作者：白瑕

這篇文章主要介紹了JavaScript多級判定代碼優(yōu)化，JavaScript用二元運算符和if拆分優(yōu)化多級判定結構,?用JavaScript邏輯運算符替換if-else結構判定

一、場景

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

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

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

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

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

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

在Vue源碼(此處僅指Vue2.6版, 我最近在看這個)里有大量的運用邏輯運算符來表達 “那么” 或者 “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結構, 不再使用包裹式, 而是這種像閘口一樣的結構.

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

1.優(yōu)化if-else結構

就像這樣:

if() {
if() {

} else if() {

} else if() {

}
} else if () {
if() {

} else if() {

} else {

}
}

再復雜一些, 再在內部加入各種邏輯, 就有些頭疼了.

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

if () {
if () {

}
if () {

}
if() {

}
}
if () {
if () {

}
if () {

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

}
}

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

圖示一下的話, if-else-if結構就像深墻老院:

優(yōu)化后的if結構更像是關隘:

有一個專有名詞validation gatekeeping(驗證守護), 即是描述這種驗證結構.

但是一定注意判定條件的次序, 有些地方是必須用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就會導致key為webglGroup時兩條邏輯均會被執(zhí)行.

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

2.二元運算符簡化

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

當然如果你愿意在里面寫函數(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) {
  // 可以結合三元運算符
  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ù).