JavaScript ・ 基本構文
for
処理を繰り返す
同じ処理を決まった回数、または配列の要素の数だけ繰り返します。配列を順に処理するなら for...of が読みやすい書き方です。
01
サンプルコード
JS
1for (let i = 1; i <= 3; i++) {
2 console.log(i + '回目');
3}
4
5const menu = ['ブレンド', 'カフェラテ'];
6for (const name of menu) {
7 console.log(name);
8}
02
実行結果
コンソール
- console.log() の出力がここに表示されます
03
解説
for (初期化; 条件; 更新) の形では、条件が true の間だけ処理を繰り返します。上の例では i を1から3まで1ずつ増やしながら3回実行しています。
for (const 変数 of 配列) の形（for...of）は、配列の要素を先頭から1つずつ取り出して処理します。番号が必要ないときはこちらが簡潔です。
break で繰り返しを途中で終了し、continue でその回の残りを飛ばして次の回に進みます。
04
応用例・注意点
繰り返しの書き方
| 構文 | 説明 |
|---|---|
for (let i = 0; i < n; i++) | 回数を決めて繰り返す |
for (const x of 配列) | 配列の要素を順に取り出す |
for (const key in オブジェクト) | オブジェクトのキーを順に取り出す |
while (条件) | 条件が true の間繰り返す |
配列.forEach() | 配列の各要素に関数を実行する |
条件に合ったら途中で止める
break を使うと、見つかった時点で繰り返しを終了できます。
JS
1const scores = [62, 85, 91, 40];
2for (const s of scores) {
3 if (s >= 90) {
4 console.log('90点以上を見つけました：' + s);
5 break;
6 }
7}
注意点
- 01条件がずっと true のままだと無限ループになり、ページが固まります。
- 02配列を加工するだけなら、map() や filter() を使うと短く書けます。