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

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回ほど測ってみると、

for t in {1..10}; do node switch.js >> switch.txt; 完了

for t in {1..10}; do node map.js >> map.txt; 完了

上記は、JavaScript で switch ステートメントを使用する必要がない理由の詳細です。JavaScript の switch ステートメントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)
  • JavaScript ステートメントの一般的な for ループの詳細な説明
  • JavaScript の条件文の最適化手法の概要
  • Pythonでjsステートメントを実行する方法
  • JavaScriptステートメントを理解するのに役立つ記事

<<:  MySQLの指定順序ソートクエリについての簡単な説明

>>:  Mysql5.6.36 スクリプトのコンパイル、インストール、初期化のチュートリアル

推薦する

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...

HTML テーブル マークアップ チュートリアル (18): テーブル ヘッダー

<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...

Vue + Axios リクエストインターフェース方式とパラメータ渡し方式の詳しい説明

目次1. リクエストを取得する: 2. 投稿リクエスト: 3. 拡張と補足Vue スキャフォールディ...

MySQL データ圧縮パフォーマンス比較の詳細

目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...

よく使われるn番目の子セレクターをまとめる

序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...

CSSテキストシャドウの徐々にぼやける効果の実装

テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...

MySQLのパスワードを忘れた場合の対処方法

MySQL パスワードを 2 回忘れてしまいましたか?最初、私はアンインストールして再インストールす...

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...

ウェブページのFOUC問題によるウェブページの混乱の解決策

FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...

ウェブページの右下隅に「いいね!」カード効果を実現するための CSS (サンプルコード)

効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...

Nginx のパフォーマンスを向上させるための提案

Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...

K8Sの5つのコントローラーの紹介と使用

目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...

CSS を使用して ul と li の水平配置を実現する 2 つの方法

li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...