Javascript自分メモ（ループ編）for文・while文

この記事は私のJavascriptに対する認識であり、私自身が同じことを何度も調べていて、正直面倒くさいからまとめてみているだけのものです。
なので、必ずしも正しい内容が書かれているとは限りません。
記載されている内容に誤りがありましたら、ご指摘頂けると幸いです。
あなたの一言が私を成長させます。

ループ処理

任意の回数、または条件に合致している間、同じ処理を繰り返したい時に使う。

Javascriptでの記述方法
for文	指定した回数、繰り返す
while文	条件式がfalseになるまで繰り返す

for文

頻繁に見かける。使う場面多い気がする。

基本の形

for ( 初期化式; 条件式; 増減式 ) {
  繰り返し処理;
}

for ( 初期化式; 条件式; 増減式 ) {

繰り返し処理;

}

読み込み順番は、初期化式⇒条件式⇒処理⇒増減式⇒条件式⇒…
条件式の答えが false になるまでループする。

注意点

初期化式で新たな変数を使う時、宣言をしておかないとグローバル変数になってしまう。
条件式、増減式、または両方の式を間違えると、無限ループが発生してしまう。

for( let i = 1; i > 0; i++) {...}

1	for( let i = 1; i > 0; i++) {...}

例：10回繰り返す

for ( let i = 0; i < 10; i++ ) {
   console.log( i );
}

for ( let i = 0; i < 10; i++ ) {

console.log( i );

}

変数 i に０を代入 ⇒ i は10未満か判定 ⇒ i の値を出力 ⇒ i に１加算 ⇒ i は10未満か判定 ⇒ …
i が10になるまで繰り返す。

for…in文

オブジェクトのすべてのプロパティに対してループ処理をする。

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

for ( 変数 in オブジェクト ) {

ループ処理;

}

まだよくわからない。

for…of文

配列のすべての値に対してループ処理をする。

for ( 変数 of 配列 ) {
  ループ処理;
}

for ( 変数 of 配列 ) {

ループ処理;

}

まだよくわからない。

forEach文

配列のすべての値に対してループ処理をする。

for 配列.forEach ( コールバック関数 )

1	for 配列.forEach ( コールバック関数 )

for…of文との違いとか、コールバック関数とか、よくわからない。

while文

たまーに見かける。繰り返し回数が決まっていない時に使えばいい？

基本の形

while ( 条件式 ) {
  ループ処理;
}

while ( 条件式 ) {

ループ処理;

}

条件式の答えがtrueならば、ループ処理を行う。最初から false ならなにもしない。
ループ処理後、再度条件式の答えを確認し、また true ならループ処理を行う。の繰り返し。

注意点

for文と違い、基本形の中に増減式などがない為、ループ処理の中で条件式が false になるタイミングを用意しなければならない。
false になるまで延々とループする初心者キラー。

例：10回ループ

let i = 0;

while ( i < 10) {
  console.log( i );
  i++;
}

let i = 0;

while ( i < 10) {

console.log( i );

i++;

}

while文の外で変数宣言をしておく。
条件式の答え true ⇒ ループ処理(変数出力と変数に１加算)をする ⇒ 条件式の答え true ⇒ ループ…
i が10になり、条件式の答えが false になったらループ終了。

do…while文

純粋なwhile文と違って、とりあえず一回ループ処理を行ってから、条件判定。
とりあえずDoしちゃう。

do {
 ループ処理;
} while ( 条件式 )

do {

ループ処理;

} while ( 条件式 )

なんとなく意味は理解できているけど、使った事はない。
使う場面にもまだ出会っていない。

ループ処理の途中抜け

ループ処理の途中で飛ばしたり、強制終了したりする事もできる。
for文、while文、どちらでも使える。

continue	それ以降のループ処理をスキップし、条件判定から再スタート
break	それ以降のループすべてをスキップ。強制終了。

for文

for (let i = 0; i < 10; i++){
  if (i % 2 === 1){  // i が奇数なら continue
    continue;
  }

  if (i === 8){  // i が 8 なら break
    break;
  }

  console.log( i );
}

for (let i = 0; i < 10; i++){

if (i % 2 === 1){ // i が奇数なら continue

continue;

}

if (i === 8){ // i が 8 なら break

break;

}

console.log( i );

}

while文

let i = 0;

while (i < 10) {
  if(i%2===1){
      i++;
      continue;
  }
  
  if(i===8){
      break;
  }
  
  console.log( i );
  i++;
}

let i = 0;

while (i < 10) {

if(i%2===1){

i++;

continue;

}

if(i===8){

break;

}

console.log( i );

i++;

}

実行結果

注意点

while文で continue を使う場合、増減式や条件判定を false に変える式も一緒にスキップしてしまわないように気をつけないと、無限ループに陥る。

その他Javascriptの自分メモ

Javascript自分メモ（変数編）

この記事は私のJavascriptに対する認識であり、私自身が同じことを何度も調べていて、正直面倒くさいからまとめてみているだけのものです。なので、必ずしも正しい内容が書かれているとは限りません。記載されている内容に誤りがありましたら、...

Javascript自分メモ（演算子編）

Javascript自分メモ（条件分岐編）if文・switch文・条件(三項)演算子