JavaScript complex judgment logic writing techniques

The content of this article is about JavaScript complex judgment logic writing skills. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In some scenarios, we may encounter multiple judgment conditions. In this case, we usually use if/else/switch for processing, but under multiple judgments, like this There will be a lot of code in the way of writing. How to solve it? Please continue reading

First of all, let’s take if/esle as an example. I will not write the switch writing method again

checkStatus(status) {
 if (status == 1) {
    function1();
  } else if (status == 2) {
    function2();
  } else if (status == 3) {
    function3();
  } else if (status == 4) {
    function4();
  } else if (status == 5) {
    function5();
  }
}

By judging different statuses, different methods are executed. This is a very common way of writing. The disadvantage is that the amount of code is large and not conducive to readability. When others come to maintain it, they cannot quickly know how many judgment conditions this method has. , how many methods need to be called. You must read the entire method to know this. Here are some more optimized methods. This article focuses on the vue writing method

const actions = {
  '1': 'function1',
  '2': 'function2',
  '3': 'function3',
  '4': 'function4',
  '5': 'function5'
 }
 function checkStatus(status) {
   let action = actions[status];
  this[action]()
 }

. This writing method binds the method name to the type value that needs to be judged. When calling, find the corresponding attribute value through the attribute name and call the corresponding The method is written in a simple and clear way. Under our extension, what if we need to call more than one method when the type is 1? Please see below:

const actions = {
 '1': ['function1','function2'],
 '2': ['function3','function4'],
 '3': ['function5','function6'],
}

We can write the methods that need to be called when the type is 1 in the array. , then you can get it like this when calling:

function checkStatus(status) {
  let action = actions[status];
   this[action[0]]()
  this[action[1]]()
 }

The above two methods are used when making one-yuan judgments. The specific use depends on the specific scenario.
What if it is multiple judgments? For example, when judging status as 1, we also need to judge whether the type value is 1 and so on. . .
The condition corresponds to

if (status == 1 && type == 1) {
    //do someThing
} else if (status == 2 && type == 2) {
   //do someThing
} else if (status == 3 && type == 3) {
   //do someThing
} else if (status == 4 && type == 4) {
   //do someThing
} else if (status == 5 && type == 5) {
   //do someThing
}

In this business scenario, if you use traditional if/else, the amount of code is unimaginable. Next, let’s see how to optimize this situation

  const actions = new Map([
   [{type:'1',status:1},()=>{/*do sth*/}],
   [{type:'2',status:2},()=>{/*do sth*/}],
   //...
  ])

  function checkStatus(type,status)=>{
   let action = [...actions].filter(([key,value])=>(key.type == type && key.status == status))
   action.forEach(([key,value])=>value.call(this))
  }

One thing that needs to be explained here is that Map can use any type of data as a key. We can directly determine whether the key meets our conditions, and the corresponding processing method can be written in the corresponding vulue value. This way of writing can basically satisfy most of the judgment logic. . . The difficulty will be upgraded below. . .
We mentioned above that the corresponding method is executed when type and status are in one-to-one correspondence. When type is 1, ststus is 2 and 3 and both need to execute the same method. When type is 2, status is 1. , 2 also need to execute the same method? The above method can also be used, as follows:

const actions = new Map([
  [{type:'1',status:2},()=>{functionA}],
  [{type:'3',status:3},()=>{/functionB}],
  [{type:'2',status:1},()=>{functionC}],
  [{type:'1',status:3},()=>{functionA}],
  //...
 ])

Writing like this can already meet daily needs, but it is still a bit uncomfortable to rewrite the status to 2 twice. If the judgment conditions become particularly complicated, For example, type has 3 states and status has 10 states. Then you need to define 30 processing logics, and often many of these logics are the same. It seems difficult to accept the above writing method, so you can write it like this:

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

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

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 up your imagination and unlock more ways to play. If you don’t understand the features of ES6Map, you can learn about it. The above usage is indeed a lot optimized for a large amount of judgment logic. .

I hope that in the future, there will be more than just if/else/switch. . . .

The above is the detailed content of JavaScript complex judgment logic writing techniques. For more information, please follow other related articles on the PHP Chinese website!