【JavaScript】JavaScriptまとめ③（繰り返し処理）

概要

JavaScriptの理解を深めるため、

で学習した内容を記載していく。

本記事では、繰り返し処理について記載する。

for文

for文は指定した回数だけ同様の処理を行う。

for文の仕組み

for文は、指定した回数だけ処理を繰り返して実行することができるが、その繰り返し処理の途中で「繰り返した回数」を記憶しておく必要がある。この役割を担うのがループカウンターと呼ばれる変数である。ループカウンターは始めに、例えば１という数値で初期化され、繰り返し処理を行うたびに２、３、４・・・・・と加算されていく。最終的にループカウンターが指定の数値に達したら、繰り返し処理全体を終わらせる。

for文の書き方

for (初期化式; 条件式; 加算式) {
    処理;
}

for文の式

式の種類	説明	実行タイミング
初期化式	ループカウンターを初期化する式	最初の1回だけ実行される
条件式	処理を継続する条件式	繰り返し処理の最初に毎回実行される
加算式	ループカウンターを加算する式	繰り返し処理の最後に毎回実行する

結果を繰り返し表示する（for.js）

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

let i = 1

ループカウンターの変数iを宣言している。ループカウンターは、加算されて変更されていくものなので、constではなくletによって宣言している点に注意。

i <= 5

上の条件式がtrueの場合、ブロック内の処理を実行する。ブロック内ではループカウンターiを参照することができる。今回は繰り返し処理の回数を表示するため、以下のように記述している。

console.log(`${i}回目の処理`)

iが加算され、５より大きい数値になったタイミングでfor文は終了する。

i++

上の式ではインクリメント演算子を使っている。iを１増加させる。
加算式が実行された後は、条件式に戻り、条件式がfalseになるまで処理を繰り返しfor文を終了させる。

while文

回数を指定せずに繰り返し処理ができるのがwhile文。

while文の書き方

while (条件式) {
    処理;
}

while文の仕組みはシンプル。
①条件式を評価する
②条件式がfalseなら終了、trueなら処理を実行
条件式がfalseになるまで①と②を繰り返す。

2倍ずつ増えていく数列を作る(while_example.js)

let number = 2;

while (number < 100) {
    console.log(`${number}番`);
    number = number * 2;
}

このコードを順番に説明する。
①let number = 2と初期化する。
②初めの段階ではnumberは2なので、条件式number < 100は満たされ、③④に移る。
③`${number}番`をコンソールに表示する。
④numberの2倍をnumber自身に再代入する。この処理が終わったら②に戻る。
最終的には、number < 100という条件を満たせなくなり、while文は終了する。

「配列」に対する繰り返し処理

['りんご', 'みかん', 'バナナ']のような配列が与えられたときに、各要素をコンソールに表示するプログラムはどのように書けばよいか。

「配列」に対するfor文を使った処理

for_array1.js

const fruits = ['りんご', 'みかん', 'バナナ'];

for (let i = 0; i < 3; i++) {
    console.log(fruits[i]);
}

上のコードは問題なく動くが、配列が['りんご', 'みかん', 'バナナ', 'ぶどう']のように変更され、要素数が変わったとする。このとき条件式のi < 3の部分をi < 4のように書き換えれば、意図した動作になる。しかし、与えられた配列が変わるたびに、for文を書き換えるのは面倒である。そこで、配列の要素数を取得することができるlengthを使う。

for_array2.js

const fruits = ['りんご', 'みかん', 'バナナ', 'ぶどう'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

for・・・・of文の書き方

「配列」に対する繰り返し処理を簡単に書く方法としてfor・・・・of文と呼ばれるものがある。

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

これだけで、自動的に配列の要素数回だけ繰り返し処理を行える。

for_of.js

const fruits = ['りんご', 'みかん', 'バナナ'];

for (const fruit of fruits) {
    console.log(fruit);
}

for・・・of文は、配列の要素数だけ繰り返し処理が行われるので、この例の場合は3回繰り返される。そして、変数fruitsには、順番にりんご、みかん、バナナという文字列が格納される。