博客

今天在项目中写登录的时候，判断账号连写几个if判断，感觉代码有点不太美观，就想着有什么办法能优化一下，我采用的办法分析如下：

首先我们先看原代码

在判断账号密码的时候就使用了三个if,代码相当不美观

我改良之后的代码

首先定义了一个数组，将要判断的条件和返回的结果都定义成了函数形式

 const rule = [
    [
      () => checked.value === false,
      () => '请先阅读《到位用户协议、隐私政策》并同意'
    ],
    [
      () => useTel.value === '',
      () => '账号不能空'
    ],
    [
      () => userCode.value === '',
      () => '密码不能为空'
    ],
    [
      () => emergencyCode.value === '',
      () => '应急码账号不能为空'
    ],
    [
      () => cipher.value === '',
      () => '应急码密码不能为空'
    ]
  ]

然后 我们通过find方法 去找到数组的每一个元素的第一个方法调用，可以看到我这里写了五个不同的条件，if也只需要写一次

 const target = rule.find((m) => m[0]())
  if (target) {
    return console.log(target[1]())
  }

当然，上面是在判断条件不同的情况下，如果我们在相同的的条件下做判断，方法如下：

感觉和swich case 差不多

先看原代码

场景为调用登录接口，要通过接口返回的状态值，弹出不同的信息提示

 const res = await loginApi.login({
    userId: useTel.value,
    password: password
  }
  if (res.state=== '200') {
    return Toast('登录成功')
  }
  if (res.state=== '400') {
    return Toast('默认密码不能登录，请到PC端修改密码')
  }
   if (res.state=== '401') {
    return Toast('密码错误')
  }

优化之后的代码为

我们把 需要判断的条件封装成一个函数，只需要调用即可

 const res = await loginApi.login({
    userId: useTel.value,
    password: password
  }
function regulation (state) {
    const rule = {
      200: '登录成功',
      400: '默认密码不能登录，请到PC端修改密码',
      401: '密码错误'
    }
    if (rule[state]) {
      console.log(rule[state])
    }
  }
  regulation(res.state)