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

以下もご興味があるかもしれません: