JavaScriptの繰り返し処理に関して

トモジ

繰り返し処理って何？
詳しく知りたい・・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、繰り返し処理に関して要点をわかりやすく説明しております。

1.JavaScriptの繰り返し処理

繰り返し処理の大枠は、
for文とwhile文の2種類に分かれます。

それぞれ意味合いが少し違いますので
順番に説明していきます。

2.for文とwhile文の違いと記述方法

for文に関して

for文は、指定された回数だけ
繰り返し処理をする命令になります。

for文の記述方法

for文の記述方法は、
[初期値の指定] [ループ条件式] [初期値の増減式]の
3つの記述が必要になり以下のようになります。

for (var x = 0; x < 5; x++) {
    console.log("xの値は" + x);
}

while文に関して

while文は、
条件が成り立つ限り一定の処理を繰り返します。

while文の記述方法

while文の記述方法は、
[ループ条件式] のみで、条件が成立する限り
ループ処理を実行します。

var x = 0;
while (x < 5) {
    console.log("xの値は" + x);
    x++;
}

3.よく似た構文の違い

for文とwhile文には、よく似た構文が以下の3種類ありますので順番に見ていきましょう。

for/in文

for/in文は、オブジェクトのプロパイティ要素を取り出して先頭から処理をします。

仮変数は、keyを一時的に格納する変数として
dataのkey名を順に取り出し、
変数keyにセットしながらループを繰り返します。

var data = {りんご:'大好き', ゴルゴ:13, パンツ:'臭い'};

for (var key in data) {
    console.log(key + '=' + data[key]);
}

for/of文(ES2015)

for/of文は配列を順番に取り出し格納していく命令になります。

const array = ['りんご', 'ゴルゴ', 'パンツ'];

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

for/of文は、イテレーターやジェネレーターなどの処理ができる

イテレーターとは？

イテレーターとは反復処理ができるものを言い、反復子とも言います。

配列はSymbol.iteratorと言うメソッドを
持っておりイテレーターを返す関数です。

イテレーター関数はnextメソッドを持ち、
valueとdoneの2つのプロパティがあります。

const array = ['りんご','ゴルゴ','パンツ'];
const iterator = array[Symbol.iterator]();

console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

ジェネレーターとは？

ジェネレーターは、
イテレーターの反復処理を強力にしたもので
独自のイテレータを作成することで
柔軟な反復処理アルゴリズムが記述できます。

そしてジェネレーターは、
functionの代わりに[function*]を使い
returnの代わりに[yield]を使用します。

function* generator() {
    yield 'りんご';
    yield 'ゴルゴ';
    yield 'パンツ';
}

const iterator = generator();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

do/while文

do/while文は、while文での
条件判定のタイミングに違いがあります。

while文は、
判定した後にループを実行するのに対して
do/while文は、
ループを実行した後に判定する流れになります。

do/while文の記述方法

doの中に処理内容を記述して、
末尾に条件式を記述します。

var x = 0;
do {
    console.log("xの値は" + x);
    x++;
} while(x < 5);

while文とdo/while文の違いについて

while文とdo/while文の違いが
少しわかりにくいのもあるので
プログラムの結果で見ていきましょう。

var x = 10;
while (x < 10) {
    console.log("xの値は" + x);
}

var x = 10;
do {
    console.log("xの値は" + x);
} while(x < 10);

上記のように、同じwhile文ですが
前置判定と後置判定の違いにより
出力結果に違いが出てきます。

まとめ

最後にこの記事のポイントをまとめておきます。