【JavaScript】ループと反復処理

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* JavaScriptにおける反復処理の構文、方法

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

```js
while (条件式) {
    // 条件式がtrueの間繰り返す処理
}
```
```js
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となる文(処理)が存在しないと`無限ループ`が発生する。

```js
do {
 // 実行する文;
} while (条件式);
```
```js
let x = 1;

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

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

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

# for文
* 繰り返す範囲を指定し、反復処理を行うことができる。
* 下記①->④の順で処理が行われる。
```js
for (①初期化式; ②条件式; ③増分式) {
    ④実行する文;
}
```

```js
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文でも使用可能。

```js
// 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文でも使用可能。

```js
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文
* オブジェクトのプロパティに対するループ処理。
* オブジェクトから全てのプロパティを取得できる。

```js
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については[このあたりに詳細が記述されている](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols)

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

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

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

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

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