JavaScript　初学者用チュートリアル　制御フロー　if文　if...else if文　switch文　繰り返し処理

制御フローとは、文法によってコンピューターの挙動が変化することです

例えば、この選択をしたら甲の挙動　こっちの選択をしたら乙の挙動

ある一文を記述したら、同じような挙動が繰り返されて行われるなどです

if文

if(条件式){
  条件式がtrueの場合に実行する命令}
else{
  条件式がfalseの場合に実行する命令}

windowに明日は晴れますか？と、表示させます

OKをクリック→「はい、晴れです」　キャンセルをクリック→「明日は雨です」

yes/noまたはtrue/falseで判断してコンソールに出力される文法です

if...else if文

先ほどは甲ならyes、乙ならnoみたいに単発で完結してましたが、else if文を使用すると、複数の分岐点を作ることが可能になります

if(条件式1){
  条件式1がtrueの場合に実行する命令}
elseif(条件式2){
  条件式2がtrueの場合に実行する命令}
...}else{
  すべての条件式がfalseの場合に実行する命令}

条件の当てはめは上から処理されていきます

arrが3より上の数字ならconsoleに「arrは3より上です」と、出力

arrに5を代入しているので「arrは3より上です」と、出力されています

同じ条件式でarrに1を代入してみます

条件式の(arr>=3),(arr>=2)にも当てはまりません

全ての条件に当てはまらなかったので1番下のlogが出力されます

arr=5の時に(arr>=3)(arr>=2)の2つの条件式が当てはまってますが、consoleにha「arrは3より上です」だけしか出力されてません

なぜかというと、if文などは実行される挙動は最初のブロック文だけになります

switch文

switch(式){
    case 値1;
    //式の値=値1の場合実行される命令文
    [break;]
    case 値2;
    //式の値=値2の場合実行される命令文
    [break;]
    ...
    case 値a;
    //式の値=値aの場合実行される命令文
    [break;]
    default;
    //式の値がどれも一致しなかった場合の命令文
    [break;]
  }

cにBを代入しています

上から順に条件が一致するまで当てはめていき、c=Bになった命令文がconsoleに出力されてます

switch文は『break』が見つかるまで実行されるよ！

繰り返し処理

while文

while

while(条件式){
  条件式がtrueの時の文
}

do...while文

do...while

do {
  条件式がtrueの時の文
}while(条件);

whileとdo...whileの違い

二つとも同じようなループ処理のような...

ループが無限に繰り返されて、PCに影響が及ぼす可能性があるのでwhile文は気をつけてね

for文

for

for(初期化,ループ条件,再設定){
  ループ内で実行する条件文
};

初期化→「x=5」xに5を代入

ループ条件→「x<10」xが10より少ない時ループ処理

設定→「x++」xの値を1つずつ増加

xが10になるまでループ処理が行われます

ループ前に初期化が実行され、条件が真になるまで文が実行...

設定が実行されてから、もう一度条件が判定される流れだね！

for...in/for...of文

for...in

for (変数 in オブジェクト){
  ループ文
};

オブジェクトとは簡単に言えば、箱、入れ物と考えます

オブジェクトの要素を取り出して処理を繰り返します

for...inでは、オブジェクトを一時的に変数に格納します

連想配列(配列ではない)fruitsを順に取り出し、

変数shopに代入しながらループを繰り返しています

for...inは連想配列に使用し、配列を処理するにはfor...ofを使用します

for...of

for(変数ofオブジェクト){
  ループ文
};