JS で if 判定をスムーズに行う方法

序文

プロジェクト内の小さな要件ポイントでは、ボタンをクリックして数十の条件ボックスを検証し、すべての条件ボックスにデータが入力（選択）されているかどうか（少なくとも1つの条件が真であるかどうか）を判断し、対応する操作を実行します。

判定条件ボックスには、ラジオボタン単一選択ボックス、チェックボックス複数選択ボックス、入力ボックス、入力数値カウンタ、選択セレクタ、スイッチスイッチなどが含まれます。

このプロジェクトでは、ElementコンポーネントライブラリV2.15.6を使用しています。

さまざまな条件に対応するデータ型とデフォルト値

ラジオボタン文字列 ''
チェックボックス複数選択ボックス配列[]
入力ボックスの文字列を入力してください ''
InputNumber カウンター番号 0
選択
- 単一選択文字列 ''
- 複数選択配列 []
スイッチスイッチブール値 false

コードの実装

アイデア 1

ifを使用して直接判断すると、コードは次のようになります（変数はシミュレーション変数です）

// 複数条件の判定は次のように始まります if (obj.radio1 || obj.checkbox1.length > 0 || obj.input1 || obj.inputNumber1 > 0 || obj.select1 || obj.select2.length > 0 || obj.switch1 || obj.radio2 || obj.checkbox2.length > 0 || obj.input2 || obj.inputNumber2 > 0 || obj.select3 || obj.select4.length > 0 || obj.switch2 ...) {
  // 何かをする
} それ以外 {
  // 条件が満たされない場合は、これを表示します。$message({
    メッセージ: 「条件を選択してもう一度お試しください」
    タイプ: '警告'
  })
  偽を返す
}

実際のプロジェクトシナリオでは、変数名には多くの意味的な文字があります。if をいくつか書くだけでは、長い文字列を書くことになります。そして、いくつか書いたら、それ以上書けなくなります (たくさんのくだらないことを書いているように感じます)。

もっとエレガントな方法で実現できるでしょうか?

アイデア2

判定する変数を配列に入れて、map を使用してブール型に処理し、includes を使用して配列に指定されたブール値が含まれているかどうかを判定します。

// 次のように複数条件判定が始まります const arr = [
  obj.radio1、
  obj.checkbox1.長さ、
  オブジェクト入力1、
  obj.入力番号1、
  オブジェクト選択1、
  obj.select2.長さ、
  obj.switch1、
  obj.radio2、
  obj.checkbox2.長さ、
  obj.input2、
  obj.inputNumber2、
  オブジェクト選択3、
  obj.select4.長さ、
  オブジェクトスイッチ2 
  ...
]

定数 arr1 = arr.map(item => Boolean(item))
（arr1.includes(true)）の場合{
  // 何かをする
} それ以外 {
  // 条件が満たされない場合は、これを表示します。$message({
    メッセージ: 「条件を選択してもう一度お試しください」
    タイプ: '警告'
  })
  偽を返す
}

そうですね、大量の判定をこの方法で処理するとスムーズになりますね。^-^

要約する

js での if 判定をスムーズにする方法についての記事はこれで終わりです。js での if 判定に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。