优化代码中的if else语句

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

// 优化以下代码
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循环有很多种方式。

三元表达式

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

if(a > 1){
  a = 2 * a
} else {
  a = a + 1
}

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

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

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

// 两种情况以上的三元表达式
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语句。

// 判断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。代码如下：

// 定义对象，
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需要增加一条语句无疑是减少了工作量。

重构

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

function timeoo(props) {
  1: '星期一',
  2: '星期二',
  3: '星期三',
  4: '星期四',
  5: '星期五',
  6: '星期六',
  0: '星期天'
}

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

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

达到了同样的效果。

总结

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

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