盒子
盒子
文章目录
  1. 优化代码中的if else语句
    1. 三元表达式
    2. 逻辑运算符
    3. 使用Map、JSON、对象
    4. 重构
    5. 总结

如何优化判断语句

优化代码中的if else语句

在平时写代码时,难免会有判断语句。if...elseswitch虽然简单粗暴的解决了问题,但是代码长度很大,而且不美观。今天遇到的一道面试题,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 优化以下代码
showTime() {
const day = this.state.date.getDay();
let dayStr;
if (day === 0) {
dayStr = '星期日';
} else if (day === 1) {
dayStr = '星期一';
} else if (day === 2) {
dayStr = '星期二';
} else if (day === 3) {
dayStr = '星期三';
} else if (day === 4) {
dayStr = '星期四';
} else if (day === 5) {
dayStr = '星期五';
} else if (day === 6) {
dayStr = '星期六';
}
return dayStr + this.state.date.toLocaleTimeString();
}

优化这种冗长的if循环有很多种方式。

三元表达式

三元表达式适用于两种情况的判断语句。如:

1
2
3
4
5
6
7
8
if(a > 1){
a = 2 * a
} else {
a = a + 1
}

// 优化
a = a > 1 ? a * 2 : a + 1

如果判断语句为true,则返回:前的表达式;否则返回:后的表达式。

两种情况以上的判断语句也可以使用三元表达式。但是我们优化的目的就是为了减少嵌套,情况越多,三元表达式也会嵌套越多,两种情况以上使用三元表达式优化就失去了意义。

1
2
// 两种情况以上的三元表达式
a = a > 1 ? ( a > 3 ? a * 3 : a * 2) : (a < 0 ? a + 2 : a + 1)

可以看到上边的三元表达式中有四种情况,但是一眼看去就很复杂的感觉。

对于多种情况的判断语句,我们还有其他的优化方式。

逻辑运算符

逻辑运算符有三种&&||!

运算方法如下:

  • ||:只要前边为false,无论后边是true还是false,都返回后边的值;只要前边为true,无论后边是true还是false,都返回前边的值。「真前假后」
  • &&:只要前边为false,无论后边是true还是false,都返回前边的值;只要前边为true,无论后边是true还是false,都返回后边的值。「假前真后」
  • !!:将其他类型的变量转换为Boolean类型

主要是||&&两个运算符,运算规则是相反的,只需要记住一种就可以。「同时&&的优先级高于||。」

使用逻辑运算符可以优化if...else语句。

1
2
3
4
5
// 判断a是否被定义,如果定义,将a赋值为b;如果未定义b就为undefined
const b = a || undefined

// && 判断对象是否存在再取值
p && p.x

多个操作数情况下的运算规则:

  • a || b || c || d,若结果为true,则返回第一个true值;结果为false,则返回最后一个值。
  • a && b && c && d,若结果为false,则返回第一个false值;结果为true,则返回最后一个值。

使用Map、JSON、对象

先定义一个数组、对象、或JSON。代码如下:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 定义对象,
const dayobj = {
1: '星期一',
2: '星期二',
3: '星期三',
4: '星期四',
5: '星期五',
6: '星期六',
0: '星期天'
}

const timemap = new Map([
[0, '星期天'],
[1, '星期一'],
[2, '星期二'],
[3, '星期三'],
[4, '星期四'],
[5, '星期五'],
[6, '星期六'],
])

const timejson = {
'0': '星期天',
'1': '星期一',
'2': '星期二',
'3': '星期三',
'4': '星期四',
'5': '星期五',
'6': '星期六'
}

// 中间使用React hooks的useEffect实现

const [ time, setTime ] = setState(new Date())

useEffect(() => {
clearInterval()
setInterval(
() => {setTime(new Date())}, 1000
)
})

// 判断对象是否有该属性,增加代码的健壮性
return(
<div>
<p>{ (timeobj[time.getDay()] || '') + time.toLocaleTimeString() }</p>
<p>{ (timemap.get(time.getDay()) || '') + time.toLocaleTimeString() }</p>
<p>{ (timejson[time.getDay()] || '') + time.toLocaleTimeString() }</p>
</div>
)

对象取属性值前先使用||判断是否有该属性,这样相当于做异常处理。

界面效果界面效果

如果硬要用数组的话,也不是不行,但是意义不大,甚至会引出新的问题。

每当要添加一种新的情况时,只需要在对象(JSON/Map)添加一条属性,相对于if..else需要增加一条语句无疑是减少了工作量。

重构

使用面向对象里的思想。将逻辑封装到一个函数中,跟使用对象差不多。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function timeoo(props) {
1: '星期一',
2: '星期二',
3: '星期三',
4: '星期四',
5: '星期五',
6: '星期六',
0: '星期天'
}

// useEffect()跟上边相同,此处省略
...

<p>{ timeoo(time.getDay()) + time.toLocaleTimeString()}</p>

达到了同样的效果。

总结

为了减少if...else之类的判断语句,使用其他方式优化代码。主要方法如下:

  • 对于两种情况的判断语句,可以使用「三元表达式」「逻辑运算符」
  • 对于更多情况,可以使用「对象、JSON、Map、函数」解决,之后每次只需要在其中添加一条属性。

个人微信公众号

支持一下
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集