【JavaScript】ループと反復処理

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• JavaScriptにおける反復処理の構文、方法

while文

• 条件式がtrueの間、反復処理が行われる。
• 条件式がfalseとなる文(処理)が存在しないと無限ループが発生する。

while (条件式) {
    // 条件式がtrueの間繰り返す処理
}

let i = 1;

// 変数iが5以下の間処理を繰り返す
while (i <= 5) {
    // 条件式がtrueの間繰り返す処理
    console.log(`${i}回目の処理です`);
    i++;  // ここまで終えると「while (i <= 5)」の比較へ戻る
}

// 条件式がfalseとなり、反復処理を抜けた後の処理
console.log("反復処理が終了しました");

// => 1回目の処理です
// => 2回目の処理です
// => 3回目の処理です
// => 4回目の処理です
// => 5回目の処理です
// => 反復処理が終了しました

do-while文

• while文とは異なり、条件式の結果に限らず最初の処理を行う。
• while文同様にfalseとなる文(処理)が存在しないと無限ループが発生する。

do {
 // 実行する文;
} while (条件式);

let x = 1;

do {
    console.log(`${x}回目の処理です`);
    x++;
} while (x < 1); // 条件式がtrueの場合、do内の処理を反復する

// 条件式がfalseとなり、反復処理を抜けた後の処理
console.log("反復処理が終了しました");

// => 1回目の処理です ※条件式が最初からfalseでも実行されている
// => 反復処理が終了しました

for文

• 繰り返す範囲を指定し、反復処理を行うことができる。
• 下記①->④の順で処理が行われる。

for (①初期化式; ②条件式; ③増分式) {
    ④実行する文;
}

for (let i = 1; i <= 5; i++) {
  console.log(`${i}回目の処理です`);
}

// 条件式がfalseとなり、反復処理を抜けた後の処理
console.log("反復処理が終了しました");

/* 上記の反復処理部分の流れ **/
// 1.変数iの宣言及び１を代入(初期化)
// 2.変数iが5以下であることを比較(trueの場合は③へfalseの場合は終了)
// 3.ブロック({})内の処理を行う
// 4.変数iをインクリメント(+1)

/* 結果 **/
// => 1回目の処理です
// => 2回目の処理です
// => 3回目の処理です
// => 4回目の処理です
// => 5回目の処理です
// => 反復処理が終了しました

break文

• ループ処理を途中で抜け、後続処理へ移ることができる。
• while文をはじめ、do-while文、for文でも使用可能。

// 2で割り切れる数値であった場合、ループ処理を抜けるという例
const randomNumbers = [15, 21, 34, 42];

let i = 0;
while (true) {
  if (randomNumbers[i] % 2 === 0) {
      // 　余りが0 = 2で割り切れる
      console.log(`${randomNumbers[i]}は2で割り切れます`);
      console.log('ループを抜け後続処理へ移動します');
      break;
  }
  console.log(`${randomNumbers[i]}は2で割り切れません`);
  i++;
}

console.log('ループの後続処理です');

// => 15は2で割り切れません
// => 21は2で割り切れません
// => 34は2で割り切れます
// => ループを抜け後続処理へ移動します
// => ループの後続処理です

// 34の時点で2で割り切れ、break文を使用したことでループから抜けている

continue文

• 現在のループ処理をその時点で終え、次のループ(周期)へ移る。
• break文とは異なり、ループは抜けず次のループ周期へ移ることがポイント。
• for文をはじめ、while文、do-while文でも使用可能。

const results = ['アタリ', 'アタリ', 'ハズレ', 'ハズレ', 'アタリ'];

for (let i = 0; i < results.length; i++) {
  if (results[i] === 'ハズレ') {
    console.log(`${results[i]}:ざんねん...`);
    console.log('次のループへ！');
    continue;
  }
  console.log(`${results[i]}:おめでとう！！`)
}

// => アタリ:おめでとう！！
// => アタリ:おめでとう！！
// => ハズレ:ざんねん...
// => 次のループへ！
// => ハズレ:ざんねん...
// => 次のループへ！
// => アタリ:おめでとう！！

for...in文

• オブジェクトのプロパティに対するループ処理。
• オブジェクトから全てのプロパティを取得できる。

const Taro = {
  name: 'タロウ',
  age: 21,
  hobby: 'baseball'
}

// プロパティ値を変数keyに代入
for (const key in Taro) {
  // constで定義していてもループのたびに変数が定義されているため、エラーにならない
  console.log(`${key}: ${Taro[key]}`);
}

for...of文

• ES2015で導入された。
• iterable(Symbol.iteratorという特別な名前のメソッドを実装したオブジェクト)から値を1つ取り出す。
• ArrayオブジェクトやMap、Setオブジェクトなどがiterableオブジェクトに該当する。
• iteratorについてはこのあたりに詳細が記述されている

for (variable of iterable) {
    実行する文;
}

const array = [1, 2, 3, 4, 5];

for (val of array) {
  console.log(val);
}

console.log("反復処理が終了しました");

// => 1
// => 2
// => 3
// => 4
// => 5
// => 反復処理が終了しました