目錄

• 一、場景
• 二、優化多級判定
• 1.優化if-else結構
• 2.二元運算符簡化

一、場景

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

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

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

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

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

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

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

src/core/vdom/patch.js中的這個函數.

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

二、優化多級判定

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

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

1.優化if-else結構

就像這樣:

if() {
if() {

} else if() {

} else if() {

}
} else if () {
if() {

} else if() {

} else {

}
}

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

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

if () {
if () {

}
if () {

}
if() {

}
}
if () {
if () {

}
if () {

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

}
}

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

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

優化后的if結構更像是關隘:

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

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

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時兩條邏輯均會被執行.

所以原則還是能優化的優化.

2.二元運算符簡化

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

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

重寫成如下:

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}

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

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

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

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

到此這篇關于JavaScript多級判定代碼優化淺析的文章就介紹到這了,更多相關JS多級判定內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！