for 文で処理を繰り返す方法を復習がてらメモします。
【JavaScript】for 文での繰り返し（ループ）処理する方法
久々に案件でループ処理を書いたら「あれ、どう書くんだっけ…」となったので復習しました。
for 文についてざっと説明すると、繰り返し（ループ）処理を実行するためのJavaScriptの構文のことで、指定された条件が false と評価されるまで繰り返されます。
詳しく知りたい方はコチラをどうぞ↓
developer.mozilla.orgfor 文の構文
for文の正式な構文は以下↓
for ([初期化式]; [条件式]; [加算式])もっと分かりやすく書くとこんな感じ↓
for (カウンタ変数定義と初期化 ; 繰り返し回数の指定 ; カウンタ加算幅 )カウンタ変数定義と初期化について
3つあるブロックの1つめ『カウンタ変数定義と初期化』で、まずは変数定義と初期化処理をします。
for 文は処理中に『今、何回目の繰り返し処理中か』をカウントする必要があり、そのための変数定義が必要になります。
ちなみに、『変数 i=0』で初期化するのが慣例となっています。
繰り返し回数の指定について
『何回繰り返し処理をしたいのか』をこの部分で条件で指定します。
カウンタ加算幅について
一つ目のブロックで定義した『変数 i 』に『++』というインクリメント演算子で加算し『 i++』と記述することで、カウンタを1ずつ加算するという意味になります。
インクリメント（++）演算子についてはコチラをご参照ください↓
for 文を使ってプログラムを書いてみる
まずは基本的なプログラムから。
カウンタを利用した基本的なプログラム
for (let i = 0; i < 3; i++) {
console.log( i + 1 + '回繰り返されました。');
}実行結果↓
1回繰り返されました。
2回繰り返されました。
3回繰り返されました。コンソールに繰り返された回数を表示するカンタンなプログラムです。
- 変数 i を定義
- 繰り返しの回数を 『 3 より 変数 i に代入された値が小さい間』に指定
- 変数 i に代入された値を一つずつ加算
という内容の for 文の内容で、繰り返される実行処理の回数をコンソールに表示させるプログラムです。
変数 i の初期値は 0 なので、その i に 『 + 1 』とすることで、
- 1回繰り返されました。
- 2回繰り返されました。
- 3回繰り返されました。
とコンソールに表示されます。
配列を利用したプログラム
私が案件で使ったのはこの『配列を利用した for 文』でした。
それでは書いてみます。
let colors = ['red', 'green', 'yellow'];
for (let i = 0; i < colors.length; i++) {
console.log( colors[i] );
}実行結果↓
red
green
yellowどうですかコレ、意味わかんなくないですか？
私は初見で「は？」ってなりました笑
カンタンに説明すると、配列って 『 colors[0] 』のような形でインデックス番号に整数を指定して値を出力できるんですね。
さて、上記の例文で言えば、変数 colors に代入した配列の中には
- red（インデックス番号[0]）
- green（インデックス番号[1]）
- yellow（インデックス番号[2]）
が入っています。
これを、2つ目のブロック colors.length の形で繰り返し回数（配列の中身『 3つ 』より 変数 i に代入された値が小さい間。つまり i < 3 ）を指定し、配列の値を全て出力するプログラムにしています。
もちろん『 i < 3 』と指定しても動作はしますが、配列の『 length プロパティ』を使うと配列の内容量を自動的に取得できるので、この指定方法が効率が良いと思います。
『配列』については過去記事でもご紹介してますので、そちらもご参照ください↓
『for … of 文 』についても過去記事にまとめました↓
