JavaScriptの複雑な判定ロジックの書き方テクニック

この記事の内容は、JavaScriptの複雑な判定ロジックの記述スキルに関するものであり、一定の参考価値はありますが、困っている友人は参考にしていただければ幸いです。

シナリオによっては、複数の判定条件が発生する場合があります。この場合、通常は if/else/switch を使用して処理しますが、複数の判定条件がある場合には、このように大量のコードが発生します。引き続き読んでください

まずはif/esleを例に考えてみましょうスイッチの書き込み方法は改めて書きません

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();
  }
}

判断することでステータスが違えばメソッドも実行される これは非常に一般的な書き方ですが、コード量が多くて読みにくいのが欠点です 他の人がメンテするときに、このメソッドがどれだけの判定条件を持っているのかすぐに分からないhas. 、呼び出す必要があるメソッドの数。これを知るにはメソッド全体を読む必要があります。ここでは、より最適化されたメソッドをいくつか紹介します。この記事では、vue の書き込みメソッド

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

に焦点を当てます。この書き込みメソッドは、メソッド名を、判定する必要がある型の値にバインドします。呼び出すときは、対応する属性値を検索します。属性名を指定して、対応するメソッドを呼び出します。このメソッドは、シンプルかつ明確な方法で記述されています。私たちの拡張では、型が 1 のときに複数のメソッドを呼び出す必要がある場合はどうすればよいでしょうか? 以下を参照してください:

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

型が 1 のときに呼び出す必要があるメソッドを配列に記述することができます。

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

上記の 2 つのメソッドは、1 元の判断を行うときに使用されます。具体的な使用法は、特定のシナリオによって異なります。
複数の判定がある場合はどうなりますか?たとえば、ステータスを 1 と判断する場合、タイプの値が 1 であるかどうかも判断する必要があります。 。 。
この条件は

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
}

に対応します

このビジネス シナリオでは、従来の if/else を使用すると、コードの量は想像を絶するものになります。次に、この状況を最適化する方法を見てみましょう

  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))
  }

ここで説明する必要があるのは、Map はあらゆる種類のデータをキーとして使用できるということです。キーが条件を満たすかどうかを直接判断でき、対応する vulue 値に対応する処理メソッドを記述することができます。この書き方で基本的にはほとんどの判定ロジックを満たせます。 。 。以下、難易度がアップします。 。 。
typeとstatusが1対1に対応している場合、対応するメソッドが実行されると述べましたが、typeが1の場合、ststusは2と3であり、両方とも同じメソッドを実行する必要があります。typeが2の場合、status 1.、2も同じメソッドを実行する必要がありますか？

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

このように書けば日常的なニーズは満たせますが、ステータスを 2 に 2 回書き換えるのはまだ少し面倒です。特に判定条件が複雑になる場合は、たとえば、type には 3 つの状態があり、status には 10 つの状態がある場合、30 個の処理ロジックを定義する必要がありますが、これらのロジックの多くは同じであることがよくあります。

  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))
  }

つまり、配列ループの特性を利用して、規則的な条件を満たすロジックを実行することで、公開ロジックと個別ロジックを同時に実行することができます。規則性が存在するためです。 , あなたはあなたの想像力を開き、より多くの遊び方のロックを解除することができます. ES6Map の機能を理解していない場合は、それについて学ぶことができます. 上記の使用法は、確かに大量の判定ロジックに合わせて大幅に最適化されています。 。

将来的には、if/else/switch 以外の機能が登場することを願っています。 。 。 。

以上がJavaScriptの複雑な判定ロジックの書き方テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。