JavaScript多级判定代码优化浅析.docxVIP

第

JavaScript多级判定代码优化浅析

目录一、场景二、优化多级判定1.优化if-else结构2.二元运算符简化

一、场景

业务代码里,一次操作可能会前置多个判定,我以前只是在函数的开头使用if语句去做这些事情,虽然只是拦截一下不需要做else,但是好多个判定堆在一起看着会有点low,而且,如果这些东西堆在函数开头的话,看起来就像这样:

xxx(){

xxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxx

像在竖大拇指),咳说回这种方法.

这其实是使用二元运算符完成的一种简化写法,可以理解为一种没有else的三元运算(因为我的逻辑里需要这种没有处理办法的写法),我原本以为它需要void来驱动的确可以在这种表达式外围包裹void,我的确是这么做的,整整一天.

void运算符对给定的表达式进行求值，然后返回undefined。

但其实根本没必要,void与否并不干扰执行.

在Vue源码(此处仅指Vue2.6版,我最近在看这个)里有大量的运用逻辑运算符来表达那么或者so的写法,比如

src/core/vdom/patch.js中的这个函数.

functionsameInputType(a,b){

if(a.tag!==input)returntrue

leti

consttypeA=isDef(i=a.data)isDef(i=i.attrs)i.type

consttypeB=isDef(i=b.data)isDef(i=i.attrs)i.type

returntypeA===typeB||isTextInputType(typeA)isTextInputType(typeB)

二、优化多级判定

最初我在使用这种改进后的if结构,不再使用包裹式,而是这种像闸口一样的结构.

当然特殊情况也还是要用if-else结构,能优化就优化,不能也不要强求.

1.优化if-else结构

就像这样:

if(){

if(){

}elseif(){

}elseif(){

}

}elseif(){

if(){

}elseif(){

}else{

}

}

再复杂一些,再在内部加入各种逻辑,就有些头疼了.

完全可以把每个条件单独分出一个if,顺序不变,比如以上可以优化为:

if(){

if(){

}

if(){

}

if(){

}

}

if(){

if(){

}

if(){

}else{//else一般没什么办法...

}

}

elseif里的或关系也可以单独拆一个if出来,在看起来很复杂的情况下,提升可读性.

图示一下的话,if-else-if结构就像深墙老院:

优化后的if结构更像是关隘:

有一个专有名词validationgatekeeping(验证守护),即是描述这种验证结构.

但是一定注意判定条件的次序,有些地方是必须用elseif的,否则会出现一个条件同时执行了多套处理方案的情况比如下面这个例子:

for(constkeyinnewWorld){

if(key===webglGroup){

this.worldList[oldWorldIndex][key][children]=this.worldList[oldWorldIndex][key][children].filter((ele)={returnele.type!==Group});

this.worldList[oldWorldIndex][key][children].push(...newWorld[key][children].filter((ele)={returnele