JavaScript でロジック判定コードを最適化する方法

JavaScript でロジック判定コードを最適化する方法

序文

日常生活で使用する論理的判断文には、if...else...、switch...case...、do...while... などがあります。

単純なシナリオでは、これらの構文のパフォーマンスは感じられないかもしれませんが、複雑なビジネス シナリオに遭遇した場合、適切に処理しないと、論理的なネストが多くなり、読みにくくなり、拡張が困難になります。

千里の道も一歩から。保守性が高く高品質なコードを書くには、細部から始める必要があります。今日は主に、JavaScript で論理判断コードを最適化する方法について説明します。

ネストレベルの最適化

関数供給(果物, 数量) {
    const redFruits = ['リンゴ', 'イチゴ', 'チェリー', 'クランベリー'];
    // 条件 1: 果物が存在するif (果物) {
        // 条件2: 赤い果物である if (redFruits.includes(fruit)) {
            console.log('赤い果物');
            // 条件3: 果物の数が10より大きい if (quantity > 10) {
                console.log('数値は10より大きいです');
            }
        }
    } それ以外 {
        throw new Error('果物がありません!');
    }
}

上記の例から、判断プロセスが標準的であり、現実世界のマッピングと一致していることがわかります。ただし、コードがネストされているため、読みにくく、保守も困難です。

fruit パラメータが渡されると、実行ごとに少なくとも 2 つの if 判断ステップが必要になり、パフォーマンスの問題も発生します。

上記のコードを最適化してみましょう。

関数供給(果物, 数量) {
    const redFruits = ['リンゴ', 'イチゴ', 'チェリー', 'クランベリー'];
    if (!fruit) throw new Error('There is no fruit'); // 条件1: fruitが無効な場合は、事前にエラーを処理する if (!redFruits.includes(fruit)) return; // 条件2: red fruitでない場合は、事前に返す

    console.log('赤い果物');

    // 条件3: 果物の数が10より大きい if (quantity > 10) {
        console.log('数値は10より大きいです');
    }
}

ここでは主にネスト レベルを最適化し、非修飾条件を事前に終了し、3 レベルのネストを 1 レベルに減らし、コード結果構造を簡素化して、読みやすさを向上させます。

複数の条件分岐の最適化

私たちの多くは次のコードに馴染みがあると思います。 (初めてコードを書き始めたときのことを思い出してください)

関数 pick(color) {
    // 色に基づいて果物を選択する if (color === 'red') {
        ['apple', 'strawberry'] を返します。
    } そうでなければ (色 === '黄色') {
        ['バナナ', 'パイナップル']を返します。
    } そうでなければ (色 === '紫') {
        ['ブドウ', 'プラム'] を返します。
    } それ以外 {
        戻る [];
    }
}

ちょっとした原則を知っておく必要があります。if else は条件付き区間判定に適しており、switch case は特定の列挙値の分岐判定に適しています。

これを書き直すには、switch...case... を使用します。

関数 pick(color) {
    // 色に基づいて果物を選択する switch (color) {
        ケース「赤」:
            ['apple', 'strawberry'] を返します。
        ケース「黄色」:
            ['バナナ', 'パイナップル']を返します。
        ケース「紫」:
            ['ブドウ', 'プラム'] を返します。
        デフォルト:
            戻る [];
    }
}

最適化されたコードは、きちんとフォーマットされ、考えが明確に見えますが、それでもまだ長いです。最適化を続行します:

Object の {key: value} 構造を利用すると、Object 内のすべてのケースを列挙し、key をインデックスとして使用して Object.key または Object[key] を通じてコン​​テンツを直接取得できます。

定数フルーツカラー = {
    赤: ['リンゴ', 'イチゴ'],
    黄色: ['バナナ', 'パイナップル'],
    紫: ['ブドウ', 'プラム'],
}
関数 pick(color) {
    fruitColor[色] || [] を返します。
}

実際の (キー、値) キーと値のペア構造である Map データ構造を使用します。

const fruitColor = 新しい Map()
    .set('赤', ['リンゴ', 'イチゴ'])
    .set('黄色', ['バナナ', 'パイナップル'])
    .set('紫', ['ブドウ', 'プラム']);

関数 pick(color) {
    fruitColor.get(color) を返します || [];
}

最適化後はコードがシンプルになり、拡張しやすくなります。

読みやすさを向上させるために、オブジェクトをより意味的に定義し、Array.filter を使用して同じ効果を実現することもできます。

const フルーツ = [
    {名前: 'リンゴ'、色: '赤'},
    {名前: 'イチゴ'、色: '赤'},
    {名前: 'バナナ'、色: '黄色'},
    {名前: 'パイナップル'、色: '黄色'},
    {名前: 'ブドウ'、色: '紫'},
    {名前: 'プラム'、色: '紫'}
];

関数 pick(color) {
    戻り値: fruit.filter(f => f.color == color);
}

要約する

上記の例と方法は比較的初歩的なものですが、そこに含まれるアイデアは慎重に検討する価値があります。皆さんがそこから何かを得られることを願っています。

JavaScript でロジック判定コードを最適化する方法についての記事はこれで終わりです。JavaScript のロジック判定コード最適化に関するより関連性の高い内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の論理判定演算子 &&、||、! の紹介
  • js IPアドレス、サブネットマスク、ゲートウェイに関する論理的判断
  • JS 論理判断セレクターに関する一般的な議論 || &&
  • JS ロジック判定は if-else と switch 条件判定だけを使うべきではない (ヒント)

<<:  MySQL 8.0.13 手動インストールチュートリアル

>>:  MySQLマスタースレーブ遅延現象と原理の詳細な分析

推薦する

ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明

Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...

シンプルなショッピングフォームを実装するJavaScript

この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...

WeChat アプレットのカスタム下部ナビゲーション バー コンポーネント

この記事の例では、WeChatアプレットの下部ナビゲーションバーコンポーネントの具体的な実装コードを...

CentOS/RHEL システムで VLAN タグ付きイーサネット カードを使用する方法

シナリオによっては、Linux サーバー (CentOS/RHEL) の同じイーサネット カード (...

el-tree での不完全なテキスト表示の解決策

目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...

MySQLがファントムリードを解決する方法の詳細な説明

1. ファントムリーディングとは何ですか?トランザクションにおいて、複数のクエリの後に結果セットの数...

Linux システムで tcpdump を使用してパケットをキャプチャする方法

まずサンプルコードを見てみましょう: 1. 共通パラメータ tcpdump -i eth0 -nn ...

React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド

目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...

MySQL の列から行への変換と年月グループ化の例

以下のように表示されます。 SELECT count(DISTINCT(a.rect_id)) zc...

React.FCとReact.Componentの使用に関する簡単な説明

目次1. React.FC<> 2. クラスxxはReact.Componentを拡張し...

JS、CSS スタイルのリファレンスの記述

CS: ... 1. <link type="text/css" href...

初心者向け入門講座⑧:記事サイトを簡単に作る

前回の投稿では、Web ページの作成方法について説明しました。Web サイトは多くの Web ページ...

MySQLにおける遅いSQLの最適化の方向性について詳しく話しましょう

目次序文SQL文の最適化遅いクエリSQLを記録する設定を変更する方法スロークエリログを表示するSQL...

正の整数かどうかを判断するMYSQLカスタム関数の例コード

関数を記述できます。主に正規表現を使用して判断を行います。入力文字が空の場合は、「-」を使用して置き...

CSS3 変換遷移ジッター問題の解決

transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...