[Webフロントエンドの基本| JSの基本]ロジックステートメント

プロセス制御

プロセス制御の概念

プログラムの実行中、各コードの実行シーケンスは、プログラムの結果に直接影響します。多くの場合、完了したい機能を実現するために、コードの実行シーケンスを制御する必要があります。

簡単な理解：プロセス制御は、特定の構造的な順序で実行されるコードを制御することです

あるプロセス制御のための3つの主な構造、ある配列構造、分岐構造、及びループ構造3つのコードが実行される順序を表します。

1つ：シーケンスフロー制御

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

2：分岐フロー制御

分岐構造
コードを上から下に実行するプロセスでは、さまざまな条件に従って、さまざまなパスコードが実行され（1つを選択してコードを実行するプロセス）、さまざまな結果が得られます
。JS言語には、次の2種類の分岐構造ステートメントがあります。 ifステートメント、switchステートメント

1：ifステートメント

1.1：ifステートメント（単一ブランチステートメント）

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    
    
    // 条件成立执行的代码语句
}

ステートメントは動作として理解でき、ループステートメントとブランチステートメントは典型的なステートメントです。プログラムは多くのステートメントで構成されており、通常の状況では、1つのステートメントに分割されます。

1.2：if elseステートメント（二重分岐ステートメント）

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    
    
    // [如果] 条件成立执行的代码
} else {
    
    
    // [否则] 执行的代码
}

2：if else ifステートメント（マルチブランチステートメント）

// 适合于检查多重条件。
if (条件表达式1) {
    
    
    语句1；
} else if (条件表达式2)  {
    
    
    语句2；
} else if (条件表达式3)  {
    
    
   语句3；
 ....
} else {
    
    
    // 上述条件都不成立执行此处代码
}

3：三項式

  表达式1 ? 表达式2 : 表达式3;

式1がtrueの場合、式2の値を返します。式1がfalseの場合、式3の値を返します。
簡単な理解：if else（二重分岐）の省略形に似ています

4：分岐プロセス制御の切り替え

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

  switch( 表达式 ){
    
     
      case value1:
          // 表达式 等于 value1 时要执行的代码
          break;
      case value2:
          // 表达式 等于 value2 时要执行的代码
          break;
      default:
          // 表达式 不等于任何一个 value 时要执行的代码
  }

スイッチ：スイッチ変換、ケース：小さなサンプルオプション
キーワードスイッチは、式または括弧内の値、通常は変数にすることができます
キーワードcase、オプションの式または値、コロン
スイッチ式の値は、構造内のケースの値と比較されます
一致する合同（===）がある場合、ケースに関連付けられたコードブロックが実行され、ブレークが発生すると停止し、switchステートメントコード全体の実行が終了します。
すべてのケースの値が式の値と一致しない場合、デフォルトのコードが実行されます

注：ケースでステートメントを実行するときに、ブレークがない場合は、次のケースでステートメントを実行し続けます。

【叽叽歪歪】switch文とifelseif文の違い

通常の状況では、2つのステートメントは互いに置き換えることができます
switch ... caseステートメントは通常、caseが比較的特定の値である場合を処理しますが、if ... else ...ステートメントはより柔軟性があり、範囲の判断（特定の範囲以上）によく使用されます。）
switchステートメントは、条件付き判定の直後にプログラムの条件付きステートメントを実行します。これは、より効率的です。そして... elseステートメントにいくつかの条件がある場合は、何回判断する必要があります。
ブランチの数が少ない場合、if ... elseステートメントの実行効率はswitchステートメントの実行効率よりも高くなります。
ブランチが多いほど、switchステートメントの実行効率が高くなり、構造が明確になります。

3：ループ構造

1：forループ

forループは主に、いくつかのコードを数回ループするために使用され、通常はカウントに関連しています。その文法構造は次のとおりです。

for(初始化变量; 条件表达式; 操作表达式 ){
    
    
    //循环体
}

名前	効果
変数を初期化します	通常、カウンターを初期化するために使用されます。式では、varキーワードを使用して新しい変数を宣言できます。この変数は、回数を記録するのに役立ちます。
条件式	各サイクルを実行できるかどうかを判断するために使用されます。結果がtrueの場合はループを続行し、そうでない場合はループを終了します。
演算式	各サイクルを実行できるかどうかを判断するために使用されます。結果がtrueの場合はループを続行し、そうでない場合はループを終了します。

実装プロセス：

変数を初期化します。初期化操作は、forループ全体で1回だけ実行されます。
条件式を実行します。trueの場合はループ本体ステートメントを実行し、そうでない場合はループを終了してループを終了します。
演算式が実行され、1回目のラウンドが終了します。
2回目のラウンドの開始時に、条件式を直接実行します（変数を初期化しません）。trueの場合は、ループ本体ステートメントを実行します。それ以外の場合は、ループを終了します。
引き続き演算式を実行すると、2回目のラウンドが終了します。
フォローアップは、条件式がfalseになり、forループ全体が終了するまで、2回目のラウンドと一致します。

2：ブレークポイントのデバッグ：

ブレークポイントデバッグとは、プログラムの特定の行にブレークポイントを設定することです。デバッグ時には、プログラムがこの行に到達するとプログラムが停止し、段階的にデバッグできます。デバッグプロセス中に、それぞれの現在の値を確認できます。エラーコード行をデバッグすると、エラーが表示されて停止します。ブレークポイントのデバッグは、プログラムの実行中のプロセスを監視するのに役立ちます

forループは同じコードを繰り返します

forループは同じコードを繰り返すことができます。たとえば、「一生懸命勉強して、毎日進歩する」という10文を出力したいとします。

//  基本写法
for(var i = 1; i <= 10; i++){
      
      
    console.log('好好学习，天天向上');
}
// 用户输入次数
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++) {
      
      
    console.log('好好学习，天天向上');
}

forループは異なるコードを繰り返します

Forループは、主に各ループ中に変更されるカウンターを使用するため、異なるコードを繰り返すこともできます。

たとえば、1〜100歳を出力するには：

//  基本写法
for (var i = 1; i <= 100; i++) {
      
      
      console.log('这个人今年' + i + '岁了');
}

たとえば、1〜100歳の出力、および迅速な出生、死亡

// for 里面是可以添加其他语句的 
for (var i = 1; i <= 100; i++) {
      
      
 if (i == 1) {
      
      
    console.log('这个人今年1岁了， 它出生了');
 } else if (i == 100) {
      
      
    console.log('这个人今年100岁了，它死了');
  } else {
      
      
       console.log('这个人今年' + i + '岁了');
  }
}

カウンターが存在するため、forループは、一部の算術演算など、特定の演算を繰り返し実行することもできます。

3：ダブルforループ

doubleforループの概要

ループのネストとは、ループステートメントでループステートメントを定義する文法構造を指します。たとえば、forループステートメントでは、forループをネストできます。このようなforループステートメントは、doubleforループと呼ばれます。
ダブルforループ構文
```
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
      
      
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
      
        
       需执行的代码;
   }
}
```
- 内側のループは外側のループのステートメントと見なすことができます
- 内部ループの実行順序も、forループの実行順序に従う必要があります
- 外側のループは1回実行され、内側のループは常に実行する必要があります

5行5列の星を印刷する

var star = '';
for (var j = 1; j <= 3; j++) {
      
      
    for (var i = 1; i <= 3; i++) {
      
      
      star += '☆'
    }
    // 每次满 5个星星 就 加一次换行
    star += '\n'
}
console.log(star);

コアロジック：

1.内側のループは、1行に5つの星を印刷する役割を果たします

2.外側のループは5行の印刷を担当します

4：whileループ

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下：

while (条件表达式) {
    
    
    // 循环体代码 
}

ループ本体コードを実行する
ループ本体コードが実行された後、プログラムは実行条件式を判断し続けます。条件がまだ真の場合、ループ条件が偽になるまでループ本体を実行し続け、ループプロセス全体が終了しません。

注：
whileループを使用する場合は、注意が必要です。終了条件が必要です。そうでない場合、無限ループになります。
whileループとforループの違いは、whileループでは、ユーザー名やパスワードの判断など、より複雑な条件付き判断を実行できることです。

5：do-whileループ

do ... whileステートメントは、実際にはwhileステートメントの変形です。ループはコードブロックを1回実行してから、条件式を判断します。条件がtrueの場合、ループ本体は繰り返し実行されます。それ以外の場合、ループは終了します。

do {
    
    
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

ループ本体コードを1回実行します
次に、条件式を実行します。結果がtrueの場合は、ループ本体コードの実行を続行します。falseの場合は、ループを終了して、次のコードの実行を続行します。

注：最初にループ本体を実行してから判断すると、do ... whileループステートメントはループ本体コードを少なくとも1回実行します

6：続ける、休憩

continueキーワードは、このループからすぐにジャンプして次のループに進むために使用されます（このループ本体でcontinueの後のコードは、実行回数が1回少なくなります）。

breakキーワードは、ループ全体（ループの終わり）からすぐにジャンプするために使用されます。

4：コード仕様

1：識別子の命名規則

変数と関数の名前は意味のあるものでなければなりません
変数名は一般的に名詞です
関数の名前は通常動詞です

2：オペレーター仕様

3：単一行コメント仕様

4：その他の仕様

[注]データ型変換を追加するときは、型を変換することを忘れないでください