序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML テーブルタグチュートリアル (8): 背景画像属性 BACKGROUND
>>: Nginxはhttpリクエスト実装プロセス分析を処理する
1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...
テーブルを作成するテーブル order(id varchar(10),date datetime,o...
序文Golang は、SQL データベースにアクセスするための database/sql パッケージ...
序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...
序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...
Centos yumフォルダを開くコマンドcd /etc/yum.repos.d/を入力します。 w...
目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...
1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...
ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでし...
解決: <head> に次のコードを追加します。コードをコピーコードは次のとおりです。 ...
1 原因プロジェクトがデータベースを移行して再起動した後、「T_AAAテーブルが存在しません」という...
目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...
目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...
みなさんこんにちは。私は梁旭です。ご存知のとおり、Linux ではデバイス ファイルも含めすべてがフ...
最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...