序文日常生活で使用する論理的判断文には、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.13 手動インストールチュートリアル
>>: MySQLマスタースレーブ遅延現象と原理の詳細な分析
目次序文1. ルーティングの遅延読み込み1. ルートの遅延読み込みが必要なのはなぜですか? 2. ル...
Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...
目次1. 手順2. 修飾語3. .sync 修飾子4. まとめ1. 手順指示とは命令です。文字通りの...
1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...
MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...
序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...
1. 足場とは何ですか? 1. Vue CLI Vue CLI は、Vue.js をベースにした迅速...
Chrome ブラウザで Web ページを開くと、ページを右クリックすると 2 つの非常によく似たオ...
時間フィールドは、データベースの使用時によく使用されます。よく使われるのは作成時間と更新時間です。し...
序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...
目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...
この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...
位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...
目次1. 次のコードはwatchの簡単な使用法です2. 即時監視3. ハンドラメソッド4. 深い属性...
目次1. サブクエリとは何ですか? 2. サブクエリはどこに表示されますか? 3. Whereサブク...