Elegant way to write complex judgments in JavaScript-JS Tutorial-php.cn

Premise

We often encounter complex logical judgments when writing js code. Usually you can use if/else or switch to implement multiple conditional judgments, but There will be a problem with this. As the logic complexity increases, the if/else/switch in the code will become more and more bloated and difficult to understand. So how to write judgment logic more elegantly? This article will give you a try one time.

For example

Look at a piece of code first

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  if(status == 1){
    sendLog(&#39;processing&#39;)
    jumpTo(&#39;IndexPage&#39;)
  }else if(status == 2){
    sendLog(&#39;fail&#39;)
    jumpTo(&#39;FailPage&#39;)
  }else if(status == 3){
    sendLog(&#39;fail&#39;)
    jumpTo(&#39;FailPage&#39;)
  }else if(status == 4){
    sendLog(&#39;success&#39;)
    jumpTo(&#39;SuccessPage&#39;)
  }else if(status == 5){
    sendLog(&#39;cancel&#39;)
    jumpTo(&#39;CancelPage&#39;)
  }else {
    sendLog(&#39;other&#39;)
    jumpTo(&#39;Index&#39;)
  }
}

Copy after login

You can see the click logic of this button through the code: do two things according to different activity states, send logs to bury points and jump to the corresponding page. You can easily propose a rewriting plan for this code. The switch appears:

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  switch (status){
    case 1:
      sendLog(&#39;processing&#39;)
      jumpTo(&#39;IndexPage&#39;)
      break
    case 2:
    case 3:
      sendLog(&#39;fail&#39;)
      jumpTo(&#39;FailPage&#39;)
      break  
    case 4:
      sendLog(&#39;success&#39;)
      jumpTo(&#39;SuccessPage&#39;)
      break
    case 5:
      sendLog(&#39;cancel&#39;)
      jumpTo(&#39;CancelPage&#39;)
      break
    default:
      sendLog(&#39;other&#39;)
      jumpTo(&#39;Index&#39;)
      break
  }
}

Copy after login

Well, this looks much clearer than if/else. Careful students also discovered the small Tip, when the logic of case 2 and case 3 is the same, you can omit the execution statement and break, and the logic of case 3 will be automatically executed in case 2.

At this time, some students will say that there is a simpler way to write:

const actions = {
  &#39;1&#39;: [&#39;processing&#39;,&#39;IndexPage&#39;],
  &#39;2&#39;: [&#39;fail&#39;,&#39;FailPage&#39;],
  &#39;3&#39;: [&#39;fail&#39;,&#39;FailPage&#39;],
  &#39;4&#39;: [&#39;success&#39;,&#39;SuccessPage&#39;],
  &#39;5&#39;: [&#39;cancel&#39;,&#39;CancelPage&#39;],
  &#39;default&#39;: [&#39;other&#39;,&#39;Index&#39;],
}
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  let action = actions[status] || actions[&#39;default&#39;],
      logName = action[0],
      pageName = action[1]
  sendLog(logName)
  jumpTo(pageName)
}

Copy after login

The above code does look cleaner. The smart thing about this method is that it takes the judgment condition as an object The attribute name uses the processing logic as the attribute value of the object. When the button is clicked, logical judgment is made by searching the object attributes. This writing method is particularly suitable for unary conditional judgment.

Is there any other way to write it? Some:

const actions = new Map([
  [1, [&#39;processing&#39;,&#39;IndexPage&#39;]],
  [2, [&#39;fail&#39;,&#39;FailPage&#39;]],
  [3, [&#39;fail&#39;,&#39;FailPage&#39;]],
  [4, [&#39;success&#39;,&#39;SuccessPage&#39;]],
  [5, [&#39;cancel&#39;,&#39;CancelPage&#39;]],
  [&#39;default&#39;, [&#39;other&#39;,&#39;Index&#39;]]
])
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  let action = actions.get(status) || actions.get(&#39;default&#39;)
  sendLog(action[0])
  jumpTo(action[1])
}

Copy after login

Writing like this uses the Map object in es6. Isn’t it more fun? What is the difference between Map object and Object object?

An object usually has its own prototype, so an object always has a "prototype" key.
The key of an object can only be a string or Symbols, but the key of a Map can be any value.
You can easily get the number of key-value pairs of a Map through the size attribute, while the number of key-value pairs of an object can only be confirmed manually.

We need to upgrade the problem. In the past, we only needed to judge the status when clicking the button. Now we also need to judge the user’s identity:

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 * @param {string} identity 身份标识：guest客态 master主态
 */
const onButtonClick = (status,identity)=>{
  if(identity == &#39;guest&#39;){
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }else if(identity == &#39;master&#39;) {
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }
}

Copy after login

Forgive me for not writing every judgment. The specific logic here is because the code is too lengthy.

Forgive me for using if/else again, because I see many people still using if/else to write such large sections of logical judgment.

We can see from the above example that when your logic is upgraded to binary judgment, your judgment amount will double, and your code amount will also double. How to write more refreshingly at this time?

const actions = new Map([
  [&#39;guest_1&#39;, ()=>{/*do sth*/}],
  [&#39;guest_2&#39;, ()=>{/*do sth*/}],
  [&#39;guest_3&#39;, ()=>{/*do sth*/}],
  [&#39;guest_4&#39;, ()=>{/*do sth*/}],
  [&#39;guest_5&#39;, ()=>{/*do sth*/}],
  [&#39;master_1&#39;, ()=>{/*do sth*/}],
  [&#39;master_2&#39;, ()=>{/*do sth*/}],
  [&#39;master_3&#39;, ()=>{/*do sth*/}],
  [&#39;master_4&#39;, ()=>{/*do sth*/}],
  [&#39;master_5&#39;, ()=>{/*do sth*/}],
  [&#39;default&#39;, ()=>{/*do sth*/}],
])

/**
 * 按钮点击事件
 * @param {string} identity 身份标识：guest客态 master主态
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 */
const onButtonClick = (identity,status)=>{
  let action = actions.get(`${identity}_${status}`) || actions.get(&#39;default&#39;)
  action.call(this)
}

Copy after login

The core logic of the above code is: splice the two conditions into a string, and search and execute the Map object using the conditional string as the key and the processing function as the value. This writing method is used in multiple It is especially useful when making conditional judgments.

Of course, the above code is similar if it is implemented using Object objects:

const actions = {
  &#39;guest_1&#39;:()=>{/*do sth*/},
  &#39;guest_2&#39;:()=>{/*do sth*/},
  //....
}

const onButtonClick = (identity,status)=>{
  let action = actions[`${identity}_${status}`] || actions[&#39;default&#39;]
  action.call(this)
}

Copy after login

If some students feel that it is a bit awkward to spell the query conditions into strings, then there is another solution, which is to use Map objects. , using the Object object as the key:

const actions = new Map([
  [{identity:&#39;guest&#39;,status:1},()=>{/*do sth*/}],
  [{identity:&#39;guest&#39;,status:2},()=>{/*do sth*/}],
  //...
])

const onButtonClick = (identity,status)=>{
  let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status))
  action.forEach(([key,value])=>value.call(this))
}

Copy after login

Is it a little more advanced?

The difference between Map and Object can also be seen here. Map can use any type of data as key.

Now we will upgrade the difficulty a little bit. What if the processing logic of status1-4 is the same in the guest case. The worst case is this:

const actions = new Map([
  [{identity:&#39;guest&#39;,status:1},()=>{/* functionA */}],
  [{identity:&#39;guest&#39;,status:2},()=>{/* functionA */}],
  [{identity:&#39;guest&#39;,status:3},()=>{/* functionA */}],
  [{identity:&#39;guest&#39;,status:4},()=>{/* functionA */}],
  [{identity:&#39;guest&#39;,status:5},()=>{/* functionB */}],
  //...
])

Copy after login

A better way to write it is Cache the processing logic function

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  return new Map([
    [{identity:&#39;guest&#39;,status:1},functionA],
    [{identity:&#39;guest&#39;,status:2},functionA],
    [{identity:&#39;guest&#39;,status:3},functionA],
    [{identity:&#39;guest&#39;,status:4},functionA],
    [{identity:&#39;guest&#39;,status:5},functionB],
    //...
  ])
}

const onButtonClick = (identity,status)=>{
  let action = [...actions()].filter(([key,value])=>(key.identity == identity && key.status == status))
  action.forEach(([key,value])=>value.call(this))
}

Copy after login

Writing like this can already meet daily needs, but to be serious, it is still a bit uncomfortable to rewrite functionA 4 times above. If the judgment condition becomes particularly complicated, for example, identity has 3 There are 10 states in status. Then you need to define 30 processing logics, and often many of these logics are the same. This seems to be something I don’t want to accept. It can be implemented like this:

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  return new Map([
    [/^guest_[1-4]$/,functionA],
    [/^guest_5$/,functionB],
    //...
  ])
}

const onButtonClick = (identity,status)=>{
  let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
  action.forEach(([key,value])=>value.call(this))
}

Copy after login

Here The advantages of Map are even more prominent. Regular types can be used as keys, which opens up unlimited possibilities. If the requirement becomes that a log burying point must be sent for all guest situations, and different status situations also require separate logical processing, then we can Write like this:

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  const functionC = ()=>{/*send log*/}
  return new Map([
    [/^guest_[1-4]$/,functionA],
    [/^guest_5$/,functionB],
    [/^guest_.*$/,functionC],
    //...
  ])
}

const onButtonClick = (identity,status)=>{
  let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
  action.forEach(([key,value])=>value.call(this))
}

Copy after login

That is to say, using the characteristics of array loops, logic that meets the regular conditions will be executed. Then public logic and individual logic can be executed at the same time. Because of the existence of regular rules, you can open your imagination and unlock it. There are more ways to play, which I won’t go into details in this article.

Summary

This article has taught you 8 ways to write logical judgments, including:

if/else
switch
When making one-yuan judgment: Save it in Object
When making one-way judgment: Save it in Map
When making multiple judgments: Splice the condition into a string and save it in Object
When making multiple judgments: Splice the condition into a string and save it in Map
When making multiple judgments: Save the condition as an Object and save it in the Map
When making multiple judgments: Save the condition as a regular expression in the Map

At this point, this article will come to an end. I hope that your future life will not only have if/else/switch.