关于业务条件判断类型的代码

「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」。

1. Array.includes代替多重判断
2. 提前return，减少判断
3. 遍历Object和Map数据结构代替switch语句
4. 使用默认参数
5. &&短路语法

1.Array.includes代替多重判断

我们直接拿例子说话：

 if(this.userinfoGetter.role_id === 1 || this.userinfoGetter.role_id === 2
 || this.userinfoGetter.role_id === 3 ||
  this.userinfoGetter.role_id === 4)}{
 	console.log('繁琐')
 }

这段代码判断权限是否属于1，2，3，4再进行相应的操作没有什么问题，但是如果权限id很多的时候代码的可读性就会变的特别差，我们可以利用数组进行收集，利用includes的api进行判断，修改过后代码如下：

const roleArr = [1,2,3,4,6,11]
if(roleArr.includes(this.userinfoGetter.role_id)){}

2.提前return，减少判断

直接上代码

this.$refs['form'].validate((valid) => {
        if (valid) {
          let httpData = { ...this.convertData(this.form) }
          this.$api['adOpenAccount/edit_open_account'](httpData).then((res) => {
            if (res.result === 'success') {
              this.$message.success('提交成功！')
              this.dialogShow = false
              this.$refs['form'].resetFields()
              this.$emit('refresh')
            } else {
              this.$message.error('提交失败，请稍后重试')
            }
          })
        } else {
          return false
        }
  })

优化后的代码

this.$refs['form'].validate(handleSubmit(valid))
function handleSubmit(valid){
  if(!valid){
  retrun false
  }
  let httpData = { ...this.convertData(this.form) }
  this.$api['adOpenAccount/edit_open_account'](httpData).then((res) => {
    if (res.result !== 'success') {
      this.$message.error('提交失败，请稍后重试')
      return false
    } 
    this.$message.success('提交成功！')
    this.dialogShow = false
    this.$refs['form'].resetFields()
    this.$emit('refresh')
  })
} 

3.遍历Object和Map数据结构代替switch语句

 extentionType (type) {
      switch (type) {
        case 'day':
          return '天'
        case 'month':
          return '个月'
        case 'year':
          return '年'
      }
    },

上面的代码看起来没有错误，但是我找到了一些累赘。用对象遍历实现相同的结果，语法看起来更简洁:

 const dateObj = {
      day:'天',
      month:'月',
      year:'年',
   }  
extentionType (type) {
     returun dateObj[type]
},

同时也可以使用map数据结构进行实现，map允许你存储key和value的值

const dateMap = new Map()
.set('day','天')
.set('month','月')
.set('year','年')
extentionType (type) {
     returun dateMap.get(type)
},

4.使用默认参数

很多时候我们需要对值进行null、undefined的判断，于是乎下面代码是很长见的

function foo(param1,param2){
  if(!param1){
   retrun
  }
  param2 = param2 || '默认值'
}
其实我们可以通过函数的默认参数来简化，记得分配默认参数时候需要放在不给默认参数的值的后面
function foo(param1,param2='默认值'){
  if(!param1){
   retrun
  }
}

5.&&短路语法

短路语法返回第二个为真的值，可以优雅的代替多层if判断，提升代码可读性，

if(arr){
    if(arr.length){
  }
}

上面代码判断res对象是否存在，然后再判断其data属性是否存在，我们可以利用&&的短路语法来简化代码

if(arr && arr.length){
}