JavaScript で判決文をエレガントに記述する例

JavaScript で判決文をエレガントに記述する例

序文

JavaScript を記述する際には、if/else や switch を使用して実装できる論理的な判断に遭遇することがよくあります。ただし、複雑な判断の場合、条件が多すぎるとコードが長くなり、読みにくくなることがよくあります。したがって、コードを最適化して、よりエレガントにする必要があります💎。

1. モナドの判断

1.1 例

共通の if/else 判定関数を記述し、それを最適化します。

const myFunction = (ステータス) => {
  (ステータス === 1)の場合{
    コンソールログ("ステータス1");
  } そうでない場合 (ステータス === 2) {
    コンソールログ("ステータス2");
  } そうでない場合 (ステータス === 3) {
    コンソールログに"status3"と入力します。
  }
};

1.2 オブジェクトに入れる

JavaScript のオブジェクトは実際には順序付けられていないキーと値のペアのコレクションであることがわかっているので、これを判断条件の保存に使用できます。例えば、上記の場合、判定条件は数値型で、その後の操作は文字列のみを使用します。このとき、オブジェクトを作成し、そのオブジェクトのキー名と対応する値として使用する数値と文字列をそれぞれ使用することができます。

//判定条件をオブジェクトに入れる const statusObj = {
  1: "ステータス1"、
  2: "ステータス2"、
  3: "ステータス3"、
};

// 最適化された関数 💎
const myFunction = (ステータス) => {
  console.log(statusObj[ステータス]);
};

1.3 マップに載せる

プリミティブ オブジェクトに加えて、Map オブジェクトも使用できます。 MDN の説明を見てみましょう:

マップ オブジェクトはキーと値のペアを格納し、キーの元の挿入順序を記憶することができます。任意の値 (オブジェクトまたはプリミティブ) をキーまたは値として使用できます。

Map オブジェクトが実際には通常のオブジェクトの拡張バージョンであることは、簡単にわかります。特に、任意の値をキーと値のペアとして使用できるため、関数や正規表現などもキーまたは値として使用でき、判断に使用する操作が大幅に容易になります。 Map オブジェクトの詳細についてはここでは説明しません。

//判定条件をMapに入れる const statusMap = new Map([
  [1, "ステータス1"],
  [2, "ステータス2"],
  [3, "ステータス3"],
]);

// 最適化された関数 💎
const myFunction = (ステータス) => {
  console.log(statusMap.get(ステータス));
};

2. 複数の判断

2.1 例

単変量判定は最適化できるので、複数判定も最適化できます。以下は判定条件が2つある場合です。

// 例を挙げる 🌰
const myFunction = (right, status) => {
  if (right === "管理者" && status === 1) {
    console.log("管理者は王冰冰が好きです");
  } そうでない場合 (権利 === "管理者" && ステータス === 2) {
    console.log("管理者は王冰冰が好きではありません");
  } そうでない場合 (right === "user" && status === 1) {
    console.log("ユーザーは王冰冰が好きです");
  } そうでない場合 (right === "user" && status === 2) {
    console.log("ユーザーは王冰冰を好きではありません");
  }
};

// 重複した例 🌰
const myFunction = (right, status) => {
  if (right === "管理者" && status === 1) {
    console.log("管理者は王冰冰が好きです");
  } そうでない場合 (権利 === "管理者" && ステータス === 2) {
    console.log("管理者は王冰冰が好きです");
  } そうでない場合 (right === "user" && status === 1) {
    console.log("ユーザーは王冰冰が好きです");
  } そうでない場合 (right === "user" && status === 2) {
    console.log("ユーザーは王冰冰が好きです");
  }
};

2.2 判定条件を文字列にしてオブジェクトに入れる

どちらの状況も、Object を使用して最適化できます。

// 「例🌰」を最適化する

//判定条件をオブジェクトに入れる const actionsObj = {
  "administrator-1": "管理者は王冰冰が好きです",
  "administrator-2": "管理者は王冰冰が好きではない",
  "user-1": "ユーザーは王冰冰が好きです",
  "user-2": "ユーザーは王冰冰が好きではありません",
};

// 最適化された関数 💎
const myFunction = (right, status) => {
  console.log(actionsObj[`${right}-${status}`]);
};

// 関数を「値」として使用できます。以下のケースも同様であるため、詳細には説明しません。
定数アクションオブジェクト = {
  "administrator-1": () => console.log("管理者は王冰冰が好きです"),
  "administrator-2": () => console.log("管理者は王冰冰が好きです"),
  "user-1": () => console.log("管理者は王冰冰が好きです"),
  "user-2": () => console.log("管理者は王冰冰が好きです"),
};

// 最適化された関数 💎
const myFunction = (right, status) => {
  actionsObj[`${right}-${status}`]();
};

// 「重複する状況の例🌰」を最適化します
// パブリック関数は抽出できます。以下の状況は類似しており、繰り返されません 🍓
定数アクション = () => {
  const f1 = () => console.log("管理者は王冰冰が好きです");
  const f2 = () => console.log("ユーザーは王冰冰が好きです");

  戻る {
    「管理者-1」: f1,
    「管理者-2」: f1,
    "ユーザー1": f2,
    "ユーザー2": f2,
  };
};

// 最適化された関数 💎
const myFunction = (right, status) => {
  アクション()[`${right}-${status}`]();
};

2.3 判定条件を文字列にしてマップに入れる

同様に、Map オブジェクトも使用できます。 2 つの条件を文字列として保存します。

// 「例🌰」を最適化する

//判定条件をMapに入れる const actionsMap = new Map([
    ['administrator-1', '管理者は王冰冰が好きです'],
    ['administrator-2', '管理者は王冰冰が好きではない'],
    ['user-1', 'ユーザーは王冰冰が好きです'],
    ['user-2', 'ユーザーは王冰冰が好きではありません']
]);

// 最適化された関数 💎
const myFunction = (right, status) => {
    console.log(actionsMap.get(`${right}-${status}`));
};

2.4 判定条件をオブジェクトに入れてからマップに入れる

// 「例🌰」を最適化する

//判定条件をMapに入れる const actionsMap = new Map([
    [{ right: 'administrator', status: 1 }, () => console.log('管理者は王冰冰が好きです')],
    [{ right: 'administrator', status: 2 }, () => console.log('管理者は王冰冰が好きではありません')],
    [{ right: 'user', status: 1 }, () => console.log('ユーザーは王冰冰が好きです')],
    [{ right: 'user', status: 2 }, () => console.log('ユーザーは王冰冰を好きではありません')]
]);

// 最適化された関数 💎
const myFunction = (right, status) => {
    const action = [...actionsMap].filter(([e]) => (e.right === right && e.status === status));
    action.forEach(([_, index]) => index.call());
};

2.5 判定条件を正規表現で記述し、マップに挿入する

正規表現を使用すると、比較的複雑な状況を処理できます。

// 「重複する状況の例🌰」を最適化します

// 判定条件を正規表現で記述し、マップに入れる const actions = () => {
    const f1 = () => console.log('管理者は王冰冰が好きです');
    const f2 = () => console.log('ユーザーは王冰冰が好きです');

    新しいマップを返す([
        [/^管理者-[1-2]/, f1],
        [/^ユーザー-[1-2]/, f2]
    ]);
};

// 最適化された関数 💎
const myFunction = (right, status) => {
    const action = [...actions()].filter(([e]) => e.test(`${right}-${status}`));
    action.forEach(([_, index]) => index.call());
};

結論

判断を最適化するためにネイティブの Object および Map オブジェクトを使用しますが、実際の開発プロセスでは、まず実用性の原則に従い、過剰な最適化を避ける必要があります。

これで、JavaScript で判定を記述するエレガントな方法についての記事は終了です。JavaScript で判定を記述するエレガントな方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascriptの基本ループの詳しい説明
  • JS ループで async と await を正しく使用する方法
  • JSにおける4つのデータ型判定方法
  • データ型の判断における js typeof と instanceof の違いと、その開発と使用について
  • JavaScript で文字列を数値に変換する方法
  • parseInt parseFloat js 文字列変換数値
  • JavaScript の一般的なステートメント ループ、判定、文字列から数値

<<:  HTML テーブルタグチュートリアル (8): 背景画像属性 BACKGROUND

>>:  Nginxはhttpリクエスト実装プロセス分析を処理する

推薦する

MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)

1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...

少なくとも7日間連続して注文を行ったユーザーに対するSQLクエリ

テーブルを作成するテーブル order(id varchar(10),date datetime,o...

GolangでMySQLデータベースを操作するための実装コード

序文Golang は、SQL データベースにアクセスするための database/sql パッケージ...

WeChatミニプログラムの基本チュートリアル:Echartの使用

序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...

Dockerコマンドの自動補完の実装

序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...

CentOS7 構成 Alibaba Cloud yum ソースメソッドコード

Centos yumフォルダを開くコマンドcd /etc/yum.repos.d/を入力します。 w...

MySQL では SQL ステートメントはどのように実行されますか?

目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...

PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル

1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...

XHTML 入門チュートリアル: Web ページのヘッダーと DTD

ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでし...

ページのキャッシュを防ぐソリューション

解決: <head> に次のコードを追加します。コードをコピーコードは次のとおりです。 ...

MySQL で lower_case_table_names を記録する際の落とし穴の詳細な説明

1 原因プロジェクトがデータベースを移行して再起動した後、「T_AAAテーブルが存在しません」という...

Linux の一般的なハードディスク管理コマンドの紹介

目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...

CocosCreator最適化DrawCallの詳細な説明

目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...

Linuxシステムにおける仮想デバイスファイルのさまざまな実用的な使用法の詳細な説明

みなさんこんにちは。私は梁旭です。ご存知のとおり、Linux ではデバイス ファイルも含めすべてがフ...

Zookeeper&Kafka クラスターを構築するための Docker の実装

最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...