繰り返し処理あれこれ (for, while, for) - JavaScript入門
JavaScriptの繰り返し処理
JavaScriptでは、ほかのプログラミング言語と同様に、forとwhileを使って繰り返し処理（ループ処理）を記述できます。
また、配列（Array型）なら、forEachを使って一つ一つ処理することができます。
forEachを使えば、インデックスと値のペアを一つずつ取得することもできます。
今回は、forとwhileの使い方をまとめます。
JavaScriptでforを使う
for (基本)
まずは、for文の基本的な使い方です。
for文は以下のように記述します。
for ([初期化式]; [条件式]; [加算式]) 文
for文のかっこの中は3つに分かれていて、初期化式、条件式、加算式となっています。
この形は、C/C++やJavaと同様なので、そのような言語に触れたことがあれば、すぐに理解できると思います。
初期化式では、var i = 0;のように、変数の宣言と初期化を行います。
条件式は、i < 100;のように、条件を書きます。
加算式は、i++のように、ループ変数をどのように変化させるかを記述します。
サンプルになります。
for (var i = 0; i < 100; i++) {
console.log(i);
}
for ... in ~
for ... in ~では、~に渡されたオブジェクトのプロパティ名を一つずつ取得します。
for ... in ~は、ほかの言語ではあまり見ないようなループ文だと思います。
オブジェクトのプロパティとは、そのオブジェクトに紐づけられた変数のようなものです。
つまり、クラスのメンバのようなイメージです。
わかりにくいので、サンプルを載せます。
var myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
for (p in myCar) {
console.log(p + " : " + myCar[p]);
}
結果は以下のようになります。
make : Ford model : Mustang year : 1969
結果をみればわかる通り、オブジェクト.プロパティ名といった形式でプロパティを定義できます。
また、オブジェクト[プロパティ名]とすることで、プロパティの値を取得できます。
もし、for ... in ~に配列を渡した場合は、添え字（インデックス）を取得できます。
for ... of ~
for ... of ~は、反復可能オブジェクト（Array、Map、Set、arguments オブジェクトなどを含む）を一つずつ処理できます。
for ... of ~は、Pythonのfor ... in ~に似ていると思います。
オブジェクトの値を一つずつ取得してループを回すことができます。
（これはイテレータが関連してそうな）
例えば、配列（Array）があって、for ... of ~を使うとします。
すると、ループの一回一回では、配列の要素を一つずつ取得することになります。
サンプルを載せます。
arr = ["JavaScript", "HTML", "CSS", "C/C++", "Ruby"]
for (e of arr) {
console.log(e);
}
JavaScript HTML CSS C/C++ Ruby
JavaScriptでwhileを使う
JavaScriptでは、ループ処理にwhile文も使えます。
JavaScriptでwhile文を使うには、2パターンあります。
先にwhileを書くパターンと初めにdoを書き、最後にwhileを各パターンです。
先にwhileを各パターンでは、
while (条件式) 文
初めにdoを書き、最後にwhileを各パターンでは、
do 文 while (条件式);
2パターンありますが、while文の使い方もC/C++のような言語と大体同じなので、そのあたりの言語の経験があれば簡単だと思います。
この2パターンどちらもwhileの後ろに条件式を書くだけです。
この2パターンの違いとして、条件判定のタイミングが異なります。
先にwhileを各パターンでは条件判定もはじめに行われます。
逆に、最後にwhileを各パターンでは、"文"の処理が終わったあとに条件判定が行われます。
例えば、初めから条件式がfalseになる場合、先にwhileを各パターンでは一回も"文"の処理は行われませんが、
最後にwhileを各パターンでは、1回だけ"文"の処理が行われます。
参考:
ループと反復処理 - JavaScript | MDN
終わり
