目錄

• 一、場(chǎng)景
• 二、優(yōu)化多級(jí)判定
• 1.優(yōu)化if-else結(jié)構(gòu)
• 2.二元運(yùn)算符簡(jiǎn)化

一、場(chǎng)景

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

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

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

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

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

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

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

src/core/vdom/patch.js中的這個(gè)函數(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í)判定

最初我在使用這種改進(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 {

}
}

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

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

if () {
if () {

}
if () {

}
if() {

}
}
if () {
if () {

}
if () {

} else { // else一般沒(méi)什么辦法...

}
}

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

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

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

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

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

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就會(huì)導(dǎo)致key為webglGroup時(shí)兩條邏輯均會(huì)被執(zhí)行.

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

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

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

當(dāng)然如果你愿意在里面寫函數(shù)的話是可以解決這個(gè)問(wèn)題的, 用三元運(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")  // 這句可以再拆一個(gè)if出來(lái)的, 只是為了說(shuō)明判定原理, 括號(hào)需要加  // 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)在沒(méi)有找到能在判定完成之后跳出執(zhí)行的方法, 也就是說(shuō)你可以用這個(gè)方法沿路做一些順手的操作, 但是不能像在if里那樣做完判定可以return跳出函數(shù).

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

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

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

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