JavaScript フロー制御 (分岐)

JavaScript フロー制御 (分岐)

1. プロセス制御

プロセス制御には主に 3 つの構造があります。

  • 連続構造
  • 支店構造
  • ループ構造

これら 3 つの構造は、コード実行の 3 つの順序を表します。

2. シーケンシャルプロセス制御

シーケンシャル構造は、プログラムにおける最も単純かつ基本的なフロー制御です。特定の文法構造はありません。プログラムはコードの順序に従って実行されます。プログラム内のほとんどのコードは、この方法で実行されます。

3. 分岐フロー制御if文

1. 支店構造

コードを上から下へ実行する過程で、異なる条件に応じて異なるパスコードが実行され(複数の実行コードを選択するプロセス)、異なる結果が得られます。

2. if文

// 条件が満たされた場合はコードを実行し、そうでない場合は何もしない if (条件式) {
    // 条件が満たされたときに実行されるコードステートメント}

実行プロセスは次のとおりです。

たとえば、入力ボックスがポップアップ表示され、ユーザーに年齢の入力を求めます。年齢が 18 歳以上であれば、インターネット カフェに入店できます。

var age = prompt('年齢を入力してください:');
        年齢が18歳以上の場合
            alert('あなたの年齢は適法です。入力してください!');
        }

入力値が 18 以上の場合、次のポップアップ ウィンドウが表示されます。

3. if else文(二重分岐文)

文法構造:

// 条件が満たされた場合はif内のコードを実行し、そうでない場合はelse内のコードを実行します if (条件式) {
    // [if] 条件が満たされた場合、コードを実行します } else {
    // [それ以外の場合] 実行するコード}

実行プロセス:

たとえば、うるう年かどうかを確認するケースを作成します。ユーザーが入力した年を受け取ります。うるう年の場合は、うるう年を示すポップアップ ウィンドウが表示されます。それ以外の場合は、平年を示すポップアップ ウィンドウが表示されます。
アルゴリズム分析:
アルゴリズム: 4 で割り切れるが 100 で割り切れない年はうるう年 (例: 2004 年はうるう年、2005 年はうるう年ではない)、または 400 で割り切れる年はうるう年です。 prompt入力ボックスが表示され、ユーザーに年を入力するよう求められ、その値は変数に保存されます。if 文を使用して、うるう年かどうかを判断します。うるう年の場合は、if 中括弧内の出力文が実行され、それ以外の場合は else 内の出力文が実行されます。&& と or || の書き方に注意してください。また、割り切れるかどうかを判断する方法は、余りを 0 とすることであることにも注意してください。

 var year = prompt('審査対象となる年を入力してください:');
        if(year%400 == 0 || year % 4 == 0 && year / 100 != 0) {
            alert('今年はうるう年です!');
        }それ以外{
            alert('今年は平年並みです!');
        }

2004 年に入ると:

2005 を入力すると、次のポップアップが表示されます。

4. if else if 文(多分岐文)

文法構造:

// 複数の条件をチェックするのに適しています。
if (条件式1) {
    声明1;
} else if (条件式2) {
    ステートメント2;
} else if (条件式3) {
   ステートメント3;
 ....
} それ以外 {
    // 上記の条件が満たされない場合は、ここでコードを実行します}

実行プロセス:

:成績を判断するケースを出力し、ユーザーが入力したスコアを受け取り、スコアに基づいて対応する成績文字 A、B、C、D、E を出力します。で:

  1. 90点以上、出力:A
  2. 80点以上90点未満、出力:B
  3. 70点以上80点未満、出力:C
  4. 60点以上70点未満、出力:D
  5. 60点以下、出力:E

ケーススタディ:

大きいものから小さいものへと判断するというアイデアに従って、 prompt入力ボックスがポップアップ表示され、ユーザーにスコアを入力するように求めます。この値が取得され、変数に保存されます。異なる値を個別に判断して出力するために、マルチブランチのif else ifステートメントを使用します。

 var score = prompt('スコアを入力してください:');
        (スコア >= 90)の場合{
        アラート('A');
        } そうでない場合 (スコア >= 80) {
        警告('B');
        } そうでない場合 (スコア >= 70) {
        アラート('C');
        } そうでない場合 (スコア >= 60) {
        警告('D');
        } それ以外 {
        アラート('E');
        }

対応するスコアを入力すると、対応するレベルがポップアップ表示されます。

4. 三項式

三項式では、いくつかの簡単な条件選択を行うこともできます。 三項演算子で構成される式は三項式と呼ばれます。

式1 ? 式2 : 式3;


実装のアイデア:

式 1 が真の場合、式 2 の値が返されます。式 1 が偽の場合、式 3 の値が返されます。簡単に言うと、if else (二重分岐) の省略形に似ています。
たとえば、 0 を追加するケースを入力します。ユーザーは数字を入力します。数字が 10 未満の場合は、01、09 のように、その前に 0 を追加します。数字が 10 より大きい場合は、20 のように、0 は必要ありません。
ケーススタディ:
ユーザーは0から59までの数字を入力します。数字が10未満の場合、数字の前に0を追加します。それ以外の場合は、何も実行されません。戻り値を受け取り、出力するために変数が使用されます。

var num = prompt('0から59までの数字を入力してください');
        var result = num < 10 ? '0' + num : num;
        アラート(結果);

入力が 2 の場合、0 を加算する演算が実行されます。

10 を入力すると、結果が直接印刷されます。

5. 分岐フロー制御スイッチ文

1. 文法構造

switchステートメントもマルチブランチ ステートメントであり、さまざまな条件に基づいてさまざまなコードを実行するために使用されます。 switch 、変数の一連のオプションを特定の値に設定する場合に使用されます。

文法構造:

switch(式){ 
    ケース値1:
        // 式が値1 と等しい場合に実行されるコード break;
    ケース値2:
        // 式が値2 と等しい場合に実行されるコード break;
    デフォルト:
        // 式がどの値とも等しくない場合に実行されるコード}

switch : スイッチ変換、 case : 小さな例のオプション

  • キーワードswitchの後には、式または括弧内の値 (通常は変数) を続けることができます。
  • キーワードcaseの後にはオプションの式または値が続き、その後に条件ではなくコロンが続きます。
  • switch式の値は、構造体内のケースの値と比較されます。一致 (===) がある場合、ケースに関連付けられたコード ブロックが実行され、 breakに遭遇すると停止します。 switchステートメント コード全体の実行が終了します。
  • すべてのcaseの値が式の値と一致しない場合は、 defaultのコードが実行されます

注:ケース内のステートメントを実行するときに break がない場合、実行は次のケース内のステートメントから続行されます。

たとえば、成績を照会するケースを入力する場合、要件は上記の if-else-if ステートメントと同じです。

var s = prompt('スコアを入力してください:');
var n = parseInt(s/10);
var k = null;
スイッチ(n){
    ケース10: {
        k = 'A';
        壊す;
    }
    ケース9:
        k = 'B';
        壊す;
    }
    ケース8:
        k = 'C';
        壊す;
    }
    ケース7:
        k = 'D';
        壊す;
    }
    デフォルト: k = 'E';
}
console.log('あなたの成績は: '+k);

入力が 100 ポイントの場合、出力は次のようになります。

入力が 73 ポイントの場合、出力は次のようになります。

2. switch文とif else if文の違い

  • 一般的に、これら 2 つのステートメントは互いに置き換えることができます。switch switch…caseステートメントは通常、case が比較的確実な値である場合に処理しますが、 if…else…ステートメントはより柔軟性が高く、範囲の判断 (特定の範囲以上) によく使用されます。
  • switch 文は条件判断を行った後、プログラムの条件文を直接実行するので、より効率的です。 if…else文には複数の条件があるため、その回数だけ判断する必要があります。
  • 分岐数が少ない場合、 if… else文の実行効率はswitch文の実行効率よりも高くなります。
  • 分岐が多い場合は、switch ステートメントの方が効率的で、構造も明確になります。

JavaScript フロー制御 (分岐) に関するこの記事はこれで終わりです。JavaScript フロー制御に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript フロー制御 (ループ)
  • JavaScript フロー制御ステートメントのコレクション
  • JSP を使用して掛け算表を生成する簡単な例
  • jsは掛け算表の華やかな効果を実現します
  • JavaScript で掛け算表を書く (オプション 2 つ)
  • この記事では、JavaScriptを使用してプロセス制御を使用して掛け算表を印刷する方法を説明します。

<<:  エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

>>:  大規模なウェブサイトアーキテクチャを設計・構築する際に考慮すべき10の課題

推薦する

MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード

序文多くの MySQL テスト シナリオでは、テスト用に一部のテスト データを手動で生成する必要があ...

js を使用して数字推測ゲームを実装する

先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書...

WMLとは何ですか?

WML (ワイヤレス マークアップ言語)。これは HTML から派生したマークアップ言語ですが、W...

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...

仕事の効率を上げるJS略語スキル20選

目次複数の変数を同時に宣言する場合は、1 行に短縮できます。分割代入は複数の変数に同時に値を割り当て...

mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません

2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...

Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策

目次シナリオ解決してみる解決するシナリオ今日、コンポーネントの双方向データバインディングにv-mod...

Vue印刷機能を実装する2つの方法の概要

方法1: npm経由でプラグインをインストールする1. npm install vue-print-...

HTML チュートリアル: よく使われる HTML タグのコレクション (5)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

Linux で Squid プロキシ サーバーを構築するための完全な手順

序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

KTLツールはMySQLからMySQLへのデータの同期方法を実現します

ktl ツールを使用して、mysql から mysql にデータを同期します。 1. 新しいジョブス...