スイッチも複雑なコードブロックもありません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 エラーをトリガーします。
.get() メソッドはエラーを発生せず、存在しないキーにデフォルト値を指定できるため、より安全なアプローチです。
したがって、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 つの定数に基づいてオンザフライで計算されます。 定数マッピング = { [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回ほど測ってみると、
上記は、JavaScript で switch ステートメントを使用する必要がない理由の詳細です。JavaScript の switch ステートメントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQLの指定順序ソートクエリについての簡単な説明
>>: Mysql5.6.36 スクリプトのコンパイル、インストール、初期化のチュートリアル
XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...
目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...
<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...
目次1. リクエストを取得する: 2. 投稿リクエスト: 3. 拡張と補足Vue スキャフォールディ...
目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...
序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...
テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...
MySQL パスワードを 2 回忘れてしまいましたか?最初、私はアンインストールして再インストールす...
1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...
FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...
「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...
効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...
Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...
目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...
li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...