繰り返し処理って何?
詳しく知りたい・・・
本記事は、
上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。
本記事は、繰り返し処理に関して要点をわかりやすく説明しております。
1.JavaScriptの繰り返し処理
繰り返し処理の大枠は、
for文とwhile文の2種類に分かれます。
それぞれ意味合いが少し違いますので
順番に説明していきます。
2.for文とwhile文の違いと記述方法
for文に関して
for文は、指定された回数だけ
繰り返し処理をする命令になります。
for文の記述方法
for文の記述方法は、
[初期値の指定] [ループ条件式] [初期値の増減式]の
3つの記述が必要になり以下のようになります。
for文でのxが0から4まで繰り返す処理
for (var x = 0; x < 5; x++) {
console.log("xの値は" + x);
}
xの値は0
xの値は1
xの値は2
xの値は3
xの値は4
while文に関して
while文は、
条件が成り立つ限り一定の処理を繰り返します。
while文の記述方法
while文の記述方法は、
[ループ条件式] のみで、条件が成立する限り
ループ処理を実行します。
while文でxが0から4まで繰り返す処理
var x = 0;
while (x < 5) {
console.log("xの値は" + x);
x++;
}
xの値は0
xの値は1
xの値は2
xの値は3
xの値は4
3.よく似た構文の違い
for文とwhile文には、よく似た構文が以下の3種類ありますので順番に見ていきましょう。
- for/in文
- for/of文(ES2015)
- do/while文
for/in文
for/in文は、オブジェクトのプロパイティ要素を取り出して先頭から処理をします。
仮変数は、keyを一時的に格納する変数として
dataのkey名を順に取り出し、
変数keyにセットしながらループを繰り返します。
for/in文でのデータ表示
var data = {りんご:'大好き', ゴルゴ:13, パンツ:'臭い'};
for (var key in data) {
console.log(key + '=' + data[key]);
}
りんご=大好き
ゴルゴ=13
パンツ=臭い
for/of文(ES2015)
for/of文は配列を順番に取り出し格納していく命令になります。
for/of文でのデータ表示
const array = ['りんご', 'ゴルゴ', 'パンツ'];
for(const val of array) {
console.log(val);
}
りんご
ゴルゴ
パンツ
for/of文は、イテレーターやジェネレーターなどの処理ができる
イテレーターとは?
イテレーターとは反復処理ができるものを言い、反復子とも言います。
配列はSymbol.iteratorと言うメソッドを
持っておりイテレーターを返す関数です。
イテレーター関数はnextメソッドを持ち、
valueとdoneの2つのプロパティがあります。
value
- 取り出した値
done
- 反復処理の終了したか否かの真偽値
イテレーターでのデータ表示
const array = ['りんご','ゴルゴ','パンツ'];
const iterator = array[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
{value: “りんご”, done: false}
{value: “ゴルゴ”, done: false}
{value: “パンツ”, done: false}
{value: undefined, done: true}
ジェネレーターとは?
ジェネレーターは、
イテレーターの反復処理を強力にしたもので
独自のイテレータを作成することで
柔軟な反復処理アルゴリズムが記述できます。
そしてジェネレーターは、
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());
{value: “りんご”, done: false}
{value: “ゴルゴ”, done: false}
{value: “パンツ”, done: false}
{value: undefined, done: true}
do/while文
do/while文は、while文での
条件判定のタイミングに違いがあります。
while文は、
判定した後にループを実行するのに対して
do/while文は、
ループを実行した後に判定する流れになります。
do/while文の記述方法
doの中に処理内容を記述して、
末尾に条件式を記述します。
do/while文でのデータ表示
var x = 0;
do {
console.log("xの値は" + x);
x++;
} while(x < 5);
xの値は0
xの値は1
xの値は2
xの値は3
xの値は4
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);
xの値は10
上記のように、同じwhile文ですが
前置判定と後置判定の違いにより
出力結果に違いが出てきます。
まとめ
最後にこの記事のポイントをまとめておきます。
指定された回数だけ繰り返す
for文
- 繰り返し処理
for/in文
- オブジェクトの要素を取り出す
for/of文
- 配列を順番に取り出す
条件が成り立つ限り処理を繰り返す
while文
- 前置判定
do/while文
- 後置判定
イテレーターとジェネレーター
イテレーター
- 反復処理ができるもの
ジェネレーター
- イテレーターの反復を強力にしたもの