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

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 をよろしくお願いいたします。

参照ドキュメント

  • developer.mozilla.org/zh-CN/docs/…
  • developer.mozilla.org/zh-CN/docs/…
  • developer.mozilla.org/zh-CN/docs/…
以下もご興味があるかもしれません:
  • Iframe の内外のページで JS がどのように動作するかの概要
  • JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明
  • JSON.stringify のさまざまな用途のまとめ
  • Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)
  • JavaScript JSON.stringify() の使用法の概要
  • JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明
  • json.stringify() と json.parse() の違いと使い方
  • Selenium+BeautifulSoup+jsonはスクリプトタグ内のjsonデータを取得します
  • JavaScript のカンマ式が含まれている場合について

<<:  HTMLフォームタグチュートリアル(1):

>>:  Dockerコンテナのタイムゾーン調整操作

推薦する

MySQL 4G メモリ サーバー構成の最適化

会社のウェブサイトのアクセス数が増えてくると(1日10万PV以上)、当然MySQLがボトルネックにな...

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...

Hadoop 2.x と 3.x の 22 ポイントの比較、Hadoop 3.x の 2.x に対する改善点

質問ガイド1. Hadoop 3.x はどのようにして障害を許容するのでしょうか? 2. Hadoo...

Vue 計算プロパティ実装トランスクリプト

この記事では、Vueの計算プロパティ実装レポートカードを参考に共有します。具体的な内容は次のとおりで...

MySQL に大量のデータを挿入するときに重複データを除外する方法

目次1. 問題を発見する2.重複したデータを残さずにすべて削除する3. 削除テーブルから重複データを...

border-radius 値の設定に関する質問

問題記録今日はプログレスバーに似た小さなコンポーネントを完成させるつもりでした。プロトタイプは次のよ...

ウェブデザインと制作におけるハイパーリンクの効果の向上

ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このよう...

レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析

序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...

ブラウザの自動更新を実装するReactサンプルコード

目次フロントエンドルーティングとは何ですか?フロントエンドルーティングを実装するにはどうすればいいで...

Linux nslookup コマンドの使用方法の詳細な説明

[nslookup とは?] 】 nslookup コマンドは、Linux で非常によく使用されるネ...

Vueはログインジャンプを実装する

この記事では、ログインジャンプを実装するためのVueの具体的なコードを例として紹介します。具体的な内...

CSSオーバーフローメカニズムについての簡単な説明

CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...

VMware に Linux システム (Redhat8) と仮想マシンのネットワーク構成をインストールする方法

目次1. VMwareをインストールする1.1 VMwareworkstationsをダウンロードし...

MySQLで自動作成時間と変更時間を設定する方法の例

この記事では、MySQL の自動作成時刻と変更時刻を設定する方法について説明します。ご参考までに、詳...