JavaScript ではおそらく switch 文を使う必要はない

スイッチも複雑なコードブロックもありません

Switch は便利です。式を指定すると、それが case 節内の他の一連の式と一致するかどうかを確認できます。次の例を考えてみましょう。

const name = "ジュリアナ";

スイッチ (名前) {
  ケース「ジュリアナ」:
    console.log("彼女はジュリアナです");
    壊す;
  ケース「トム」:
    console.log("彼女はジュリアナではない");
    壊す;
}

名前が「Juliana」の場合、メッセージを出力し、すぐにブロックから抜け出します。 switch 関数内では、case ブロック内で return を直接使用することで break を省略できます。

一致するものがない場合、デフォルトのオプションを使用できます。

定数名 = "クリス";

スイッチ (名前) {
  ケース「ジュリアナ」:
    console.log("彼女はジュリアナです");
    壊す;
  ケース「トム」:
    console.log("彼女はジュリアナではない");
    壊す;
  デフォルト：
    console.log("申し訳ございませんが、一致するものはありません");
}

Switch は、if を多く使用することを避けるために Redux リデューサーでも頻繁に使用されます (ただし、Redux Toolkit は定型文を少し簡略化します)。次の例を考えてみましょう。

定数 LOGIN_SUCCESS = "LOGIN_SUCCESS";
LOGIN_FAILED は、次のようになります。

定数authState = {
  トークン: "",
  エラー： ""、
};

関数 authReducer(状態 = authState, アクション) {
  スイッチ（アクションタイプ）{
    LOGIN_SUCCESSの場合:
      return { ...状態、トークン: action.payload };
    LOGIN_FAILEDの場合:
      return { ...状態、エラー: action.payload };
    デフォルト：
      状態を返します。
  }
}

これに何か問題があるでしょうか? ほとんどありません。しかし、もっと良い代替案はあるのでしょうか?

Pythonからのインスピレーション

Telmo からのこのツイートが私の注目を集めました。彼は 2 つのスタイルの「スイッチ」を示しており、そのうちの 1 つは Python のパターンに非常に近いものです。

Python にはスイッチがないので、より良い代替手段が提供されます。まず、コードを JavaScript から Python に移植してみましょう。

LOGIN_SUCCESS = "ログイン成功"
ログイン失敗 = "ログイン失敗"

auth_state = {"トークン": "", "エラー": ""}


auth_reducer を定義します(状態 = auth_state、アクション = {}):
    マッピング = {
        LOGIN_SUCCESS: {**state, "token": action["payload"]},
        LOGIN_FAILED: {**state, "error": action["payload"]},
    }

    マッピングを返す。get(アクション["type"], state)

Python では、辞書を使用してスイッチをシミュレートできます。 dict.get() は、スイッチのデフォルトステートメントを表すために使用できます。

存在しないキーにアクセスすると、Python は KeyError エラーをトリガーします。

>>> my_dict = {
"名前": "ジョン",
"都市": "ローマ",
「年齢」: 44
}
>>> my_dict["ここにはない"]
# 出力: KeyError: 'not_here'

.get() メソッドはエラーを発生せず、存在しないキーにデフォルト値を指定できるため、より安全なアプローチです。

>>> my_dict = {
"名前": "ジョン",
"都市": "ローマ",
「年齢」: 44
}
>>> my_dict.get("not_here", "見つかりません")
# 出力: '見つかりません'

したがって、Python のこの行:

マッピングを返す。get(アクション["type"], state)

JavaScript での同等のものは次のとおりです。

関数 authReducer(状態 = authState, アクション) {
  ...
    デフォルト：
      状態を返します。
  ...
}

辞書を使用してスイッチを置き換える

前の例をもう一度考えてみましょう。

定数 LOGIN_SUCCESS = "LOGIN_SUCCESS";
LOGIN_FAILED は、次のようになります。

定数authState = {
  トークン: "",
  エラー： ""、
};

関数 authReducer(状態 = authState, アクション) {
  スイッチ（アクションタイプ）{
    LOGIN_SUCCESSの場合:
      return { ...状態、トークン: action.payload };
    LOGIN_FAILEDの場合:
      return { ...状態、エラー: action.payload };
    デフォルト：
      状態を返します。
  }
}

スイッチを使わずにこれを行うことができます:

関数 authReducer(状態 = authState, アクション) {
  定数マッピング = {
    [LOGIN_SUCCESS]: { ...状態、トークン: action.payload },
    [LOGIN_FAILED]: { ...状態、エラー: action.payload }
  };

  マッピング[アクション.type] || 状態を返します。
}

ここでは、ES6 の計算プロパティを使用します。ここでは、マッピングのプロパティは、LOGIN_SUCCESS と LOGIN_FAILED の 2 つの定数に基づいてオンザフライで計算されます。
属性に対応する値は、ES9 (ECMAScript 2018) に由来するオブジェクト分解です。

定数マッピング = {
  [LOGIN_SUCCESS]: { ...状態、トークン: action.payload },
  [LOGIN_FAILED]: { ...状態、エラー: action.payload }
}

このアプローチについてどう思いますか?スイッチにはいくつかの制限があるかもしれませんが、リデューサーにとってはより良いソリューションかもしれません。

しかし、このコードはどのように動作するのでしょうか?

パフォーマンスはどうですか?

スイッチのパフォーマンスは辞書よりも優れています。次の例を使用してこれをテストできます。

console.time("サンプル");
(i = 0; i < 2000000; i++ とします) {
  const nextState = authReducer(authState, {
    タイプ: LOGIN_SUCCESS、
    ペイロード: "some_token"
  });
}
console.timeEnd("サンプル");

10回ほど測ってみると、