卫语句-前端应用

卫语句-前端应用

什么是卫语句

卫语句就是把复杂的条件表达式拆分成多个条件表达式，减少嵌套。

什么时候使用卫语句

一般来说，当出现if语句时就可以考虑是否使用卫语句
无论if是仅出现一次，还是多次

为什么要使用卫语句

一般来说卫语句使用是为了两个事情，

• 减少智力成本
• 结构优化

至于少量性能提升，只是副作用罢了

卫语句的应用场景

长if语句

长if语句是最为简单的处理，因为基本上没有什么智力成本，仅需将代码重构下即可，逻辑完全不动

优化前

if(list.length>0){
	list.forEach(item=>item)
	list.map(item=>item)
	list = [...list]
	// 就是假装逻辑特别长
	// 就是假装逻辑特别长
	// 就是假装逻辑特别长
}
// 结束了 else没有处理
1
2
3
4
5
6
7
8
9

优化后

if(list.length<=0) return

list.forEach(item=>item)
list.map(item=>item)
list = [...list]
// 就是假装逻辑特别长
// 就是假装逻辑特别长
// 就是假装逻辑特别长
1
2
3
4
5
6
7
8

处理思路

1. 就是将if取反后处理else逻辑即可，没啥说的

if-else嵌套地狱

优化前

    var a, b //重点在于a、b的逻辑，故不赋值
    if (a || b) {
      if (a) {
        if (b) {
          // ...
          // a真b真的处理逻辑
          // ...
        } else {
          // ...
          // a真b假的处理逻辑
          // ...
        }
      } else {
        // ...
        // a假b真的处理逻辑
        // ...
      }
    } else {
      // ...
      // a、b均为假值的处理逻辑
      // ...
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

处理后

    var a, b //重点在于a、b的逻辑，故不赋值
    //a、b均为假值的处理逻辑在最外层且内部无冗余if，提取到头部判断
    if (!(a || b)) {
      // ...
      // a、b均为假值的处理逻辑
      // ...
      return
    }
    //下行逻辑， a或b必至少有一真
    //  将a、b均真提取
    if (a && b) {
      // ...
      // a真b真的处理逻辑
      // ...
      return
    }
    //下行逻辑， a或b必只有一真
    if (a) {
      // ...
      // a真b假的处理逻辑
      // ...
      return
    }
    // ...
    // a假b真的处理逻辑
    // ...
    return
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

处理后，多层次判断结构变为单层次结构，作用域更加明显，逻辑由嵌套变为线性处理

处理思路

1. a、b均为假值的处理逻辑在最外层且内部无冗余if，提取到头部判断
2. 下行逻辑， a或b必至少有一真
3. 将a、b均真提取
4. 下行逻辑， a或b必只有一真
5. a真逻辑提取
6. 剩下内容为b真

其实卫语句是比较方便的，只是要学会使用return，勤用return，就可以使代码结构更加清晰明了