TS/JS代码嵌套逻辑判断的优化

我们开发中会大量使用判断语句以及控制流程if...else...、switch...case...、do...while...等。在习惯一上来直接 if...else...后，简单场景下使用 if...else...处理简单方便，但是复杂的逻辑下如果多层判断会长生很冗长的代码，可读性甚至性能都会变得很差。那么如何避免写出这种被总是被老程序员嘲笑的代码呢？如何编写高可维护性和高质量的代码？今天我们主要讨论一下 JavaScript/typescript 中如何优化逻辑判断代码。

简单逻辑优化

function mutiCondition(user: { name: string; age: number }) {
  try {
    const list = ['张三', '李四', '王五', '王麻子']
    if (user) {
      if (list.includes(user.name)) {
        console.log('这个人中奖了！')
        if (user.age > 60) {
          console.log('刚过60岁')
        }
      }
    } else {
      throw new Error('没有这个人！')
    }
  } catch (error) {
    console.log(error.message)
  }
}
mutiCondition({ name: '李四', age: 70 })

通过上面这个例子，判断逻辑的代码层层嵌套，如果传入了 user 参数，则每次执行都至少需要经过两步 if 判断，有一定的性能问题，阅读性和可维护性都不佳，接下来我们来对上面的代码进行一下优化处理：

function mutiCondition(user: { name: string; age: number }) {
  try {
    const list = ['张三', '李四', '王五', '王麻子']
    if (!user) throw new Error('没有这个人！')
    if (!list.includes(user.name)) return
    console.log('这个人中奖了！')
    if (user.age >= 60) {
      console.log('年龄大于60')
    }
  } catch (error) {
    console.log(error.message)
  }
}

mutiCondition({ name: '李四', age: 70 })

可以看出我们通过判断，在不符合条件的情况下及时return终止了后续流程，简化了代码结构，增强了可阅读性。

多条件分支的优化

function select(stage: number) {
  if (stage === 100) {
    return {
      gray: true,
      publish: false,
      confirm: false
    }
  } else if (stage === 200) {
    return {
      gray: false,
      publish: true,
      confirm: false
    }
  } else {
    return {
      gray: false,
      publish: false,
      confirm: true
    }
  }
}

利用 Map 数据结构，通过 keys 键值映射的方式进行查找对应的值

function select(stage: number) {
  const map = new Map()
  map
    .set(100, {
      gray: true,
      publish: false,
      confirm: false
    })
    .set(200, {
      gray: false,
      publish: true,
      confirm: false
    })
  return map.get(stage) || { gray: false, publish: false, confirm: true }
}