JavaScript逻辑代码简洁之道

在业务代码中，我们需要经常和条件代码打交道，下面几点总结可以更好的写出简洁的维护性高的逻辑代码

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)}{}
这段代码判断权限是否属于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){
}