In business code, we often need to deal with conditional code, the following summary can better write concise and high maintenance logic code

  1. Array.includes replaces multiple judgements
  2. Return early to reduce judgment
  3. Iterate over Object and Map data structures instead of switch statements
  4. Use default parameters
  5. && short circuit syntax

1.Array.includes

Let's talk directly about that example:if(this.userinfoGetter.role_id === 1 || this.userinfoGetter.role_id === 2
 || this.userinfoGetter.role_id === 3 ||
  this.userinfoGetter.role_id === 4}{} this code determines whether the permission belongs to1.2.3.4There is no problem with the corresponding operation, but if there are too many permission ids, the readability of the code will become very poor. We can use array to collect and use the API of includes to judge. After the modification, the code is as follows:const roleArr = [1.2.3.4.6.11]
if(roleArr.includes(this.userinfoGetter.role_id)){}
Copy the code

2. Return early to minimize judgment

Go straight to codethis.$refs['form'].validate((valid) = > {
        if (valid) {
          lethttpData = { ... this.convertData(this.form) }
          this.$api['adOpenAccount/edit_open_account'](httpData).then((res) = > {
            if (res.result === 'success') {
              this.$message.success('Submission successful! ')
              this.dialogShow = false
              this.$refs['form'].resetFields()
              this.$emit('refresh')}else {
              this.$message.error('Commit failed, please try again later')}}}else {
          return false}}) optimized codethis.$refs['form'].validate(handleSubmit(valid))
function handleSubmit(valid){
  if(! valid){ retrunfalse
  }
  lethttpData = { ... this.convertData(this.form) }
  this.$api['adOpenAccount/edit_open_account'](httpData).then((res) = > {
    if(res.result ! = ='success') {
      this.$message.error('Commit failed, please try again later')
      return false
    } 
    this.$message.success('Submission successful! ')
    this.dialogShow = false
    this.$refs['form'].resetFields()
    this.$emit('refresh')})}Copy the code

3. Traverse Object and Map data structures instead of switch statements

 extentionType (type) {
      switch (type) {
        case 'day':
          return 'day'
        case 'month':
          return 'months'
        case 'year':
          return 'years'}}, the above code looks error-free, but I found some verbiage. The syntax looks much cleaner with object traversal to achieve the same result:const dateObj = {
      day:'day'.month:'month'.year:'years',} extentionType (type) {returun dateObj[type]}, can also be implemented using map data structures, map allows you to store key and value valuesconst dateMap = new Map()
.set('day'.'day')
.set('month'.'month')
.set('year'.'years')
extentionType (type) {
     returun dateMap.get(type)
},
Copy the code

4. Use the default parameters

A lot of times we need to evaluate valuesnull,undefinedAs a result, the following code is very longfunction foo(param1,param2){
  if(! param1){ retrun } param2 = param2 ||'Default value'} This can be simplified by assigning default arguments to functions after values that are not assigned to default argumentsfunction foo(param1,param2='Default value'){
  if(! param1){ retrun } }Copy the code

5.&& Short out grammar

Short-circuit syntax returns the second true value and can elegantly replace multiple layersifJudge, improve code readability,if(arr){
    if(arr.length){}} The code above determines whether the RES object exists, and then whether its data attribute exists. We can use the short circuit syntax of && to simplify the codeif(arr && arr.length){
}
Copy the code