JavaScriptでのswitchステートメントの最適化

投稿日: 2022-04-20 2022-04-20
タグ: javascript

switchステートメントは、特定のプログラミングタスクに不可欠です。この記事では、switchの使用方法を学び、うまくいけば、いつ使用すべきかを直感的に理解できるようになります。

switchを使用するための明確な兆候は、if/elseステートメントが連続している場合です。 if/elseを使用した例を見てから、比較のためにswitchに相当するものを見てみましょう。

let dayIndex = new Date().getDay();
let day;

if (dayIndex === 0) {
  day = 'Sunday';
}
else if (dayIndex === 1) {
  day = 'Monday';
}
else if (dayIndex === 2) {
  day = 'Tuesday';
}
else if (dayIndex === 3) {
  day = 'Wednesday';
}
else if (dayIndex === 4) {
  day = 'Thursday';
}
else if (dayIndex === 5) {
  day = 'Friday';
}
else if (dayIndex === 6) {
  day = 'Saturday';
};

console.log(day); // "Friday"

知ってますか？ JavaScriptには、曜日を取得するためのネイティブメソッドがありません。

if/elseの使用は非常に冗長であり、switchが簡単に処理できる不要な定型文が多数含まれています。

let dayIndex = new Date().getDay();
let day;

switch (dayIndex) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
};

console.log(day); // "Friday"

コードはほとんどなく、さわやかに最小限に抑えられています。これは、switchが、値の条件ではなく、可能な値にを強調するためです。

休憩を使用する

JavaScriptはcaseブランチ全体を何度もナビゲートするため、breakを使用して、予期しないcaseの一致を防ぐか、エンジンが余分なコードを解析する必要がないようにすることをお勧めします。

switch (dayIndex) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
}

この例では、case 2がcase 5になることは決してないため、breakは実際には追加の安全性を提供しません。したがって、breakはやや無関係です。 breakのこの厳密な使用法は、セミコロン（;）の使用法のように、開発者の間で優先事項のようです。プログラミングに明示的なアプローチをとる開発者は、すべてのcaseにbreakを使用しますが、一部の開発者はswitchで戦略的にbreakのみを使用します。ただし、これを全面的に使用すると、パフォーマンスがわずかに向上します。これは、別のケースが当てはまる可能性がない場合でも、少なくとも、switchステートメントの残りの部分でエンジンを実行することすらできないためです。

「休憩」の戦略的使用

実際にケースを「失敗」させたい場合があります。これらのインスタンスにbreakを使用することは、安全対策というよりも戦略です。

let seasonIndex = new Date().getMonth();
let season;

switch (seasonIndex) {
  case 0:
  case 1:
  case 2:
    season = 'Winter'; // January, February, March
    break;
  case 3:
  case 4:
  case 5:
    season = 'Spring'; // April, May, June
    break;
  case 6:
  case 7:
  case 8:
    season = 'Summer'; // July, August, September
    break;
  case 9:
  case 10:
  case 11:
    season = 'Autumn'; // October, November, December
    break;
}

この例では、ケースは「フォールスルー」しており、breakを使用してswitchを早期に明示的に終了します。これにより、複数のケースを1つの値にまとめることができます。

if/elseバージョンでは、多くの||論理演算子を使用する必要がありますが、これは透過的ではないようです。

 if (seasonIndex === 0 || seasonIndex === 1 || seasonIndex === 2) {
   season = 'Winter';
 } else if (seasonIndex === 3 || seasonIndex === 4 || seasonIndex === 5) {
   season = 'Spring';
 } else if (seasonIndex === 6 || seasonIndex === 7 || seasonIndex === 8) {
   season = 'Summer';
 } else if (seasonIndex === 9 || seasonIndex === 10 || seasonIndex === 11) {
   season = 'Fall';
 }

デフォルトのケースの処理

switchのもう1つの機能は、予期しないケースや一般的なケースを処理する機能です。最初の例に戻ると、defaultを使用してエラー処理を実装できます。

let dayIndex = new Date().getDay();
let day;

switch (dayIndex) {
  default:
    day = new Error('Invalid argument: "dayIndex" must be an integer from 0 –> 6');
  case 0:
    day = 'Sunday';
    break;
  case 1:
    day = 'Monday';
    break;
  case 2:
    day = 'Tuesday';
    break;
  case 3:
    day = 'Wednesday';
    break;
  case 4:
    day = 'Thursday';
    break;
  case 5:
    day = 'Friday';
    break;
  case 6:
    day = 'Saturday';
    break;
}

defaultケースが上部に配置されていることに気付いたかもしれません。心配無用！ JavaScriptはdefaultに落ち着く前に、すべてのcaseブランチを調べるため、期待どおりに機能します。

一般的なケースには、defaultを使用することもできます。

let beverage = 'Mr. Pibb';
let cost;

switch (beverage) {
  default:
    cost = 0.05;
  case 'Pepsi':
    cost = 1.00;
    break;
  case 'Coca-Cola':
    cost = 1.00;
    break;
  case 'Dr. Pepper':
    cost = 2.00;
    break;
  case 'Moutain Dew':
    cost = 5.00;
    break;
}

console.log(cost); // 0.05

これにより、定義したcasesのいずれとも一致しない場合でも、switchから何らかのソート値を取得できます。

結論

Switchステートメントは、if/elseステートメントを連続して大量に記述している場合の優れた代替手段です。 switchは、たとえばfor-loopほど頻繁には使用しないかもしれませんが、必要なときに代替品はありません。 LodashやReduxなどの最新のライブラリライブラリは現在もswitchを使用しているため、JavaScriptの昔ながらの主力機能の1つであり、常に管理する必要があります。ベルト。

switchの詳細については、 MozillaDeveloperのWebサイトにアクセスしてください。

getdocs

13036