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 updatexml() 関数のエラーインジェクション分析

まず、updatexml()関数を理解する UPDATEXML (XML ドキュメント、XPath ...

ページのスクロールバーを無効にするには、overflow: hiddenを使用します。

コードをコピーコードは次のとおりです。 html {オーバーフロー: 非表示; }体{オーバーフロー...

CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法

今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...

JS でページのスクリーンショット機能を実装する方法

「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで...

タグのターゲットリンクを iframe に向ける方法

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

Vueは動的に生成されたコンポーネントをドラッグアンドドロップする要件を実装します

目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...

EclipseにTomcatサーバー設定を追加する方法

1. ウィンドウ -> 設定を選択してEclipseの設定パネルを開きます。 2. 「設定」ウ...

Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...

Dockerデータを完全にクリーンアップする方法

目次定期的に剪定するミラーエビクションコンテナのクリーンアップネットワークソート体積の蒸発完全にクリ...

HTMLチュートリアル、簡単に学べるHTML言語

1. <body background=画像ファイル名 bgcolor=color text=...

Vueコンポーネント間のデータ共有の詳細な説明

目次1. プロジェクト開発において、コンポーネント間の最も一般的な関係は次の 2 つのタイプに分けら...

Linux ネットワーク システムの紹介

目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...

Ubuntu 18.04 で中国語入力方法を設定する方法

Ubuntuの最新バージョンでは、ユーザーは中国語入力方法を別途ダウンロードする必要がなくなりました...

MySQL オンライン DDL ツール gh-ost 原理分析

目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...