jQueryのfor文で繰り返し処理(continue,breakも)

jQueryでfor文を使った繰り返し処理の書き方です。

continueやbreakeを使えば、途中のループを1つ飛ばしたり、途中で終了させたりもできます。

for文のパフォーマンスを考慮して書く方法も併せてご紹介します。

for文の基本

単純なfor文の使い方です。

条件式で指定した数まで、繰り返し処理を行います。

結果（コンソール）

0
1
2
3

0～3まで表示されました。

コンソールについては下記ページでご紹介しています。

参考：jQueryでコンソールログを使ったデバッグ方法

for文の基本構文

for文は以下のような構文になります。

for (初期値; 繰り返しの条件式; 増減式) {
繰り返す処理
}

for文の動作

先ほどのサンプルは以下のように動作しています。

1. まず変数iに初期値となる0を格納する。
   for (var i = 0; i<4; i++) {
2. 次に変数iが4未満の場合、処理を続けなさいと命じる。
   for (var i = 0; i<4; i++) {
3. そしてi++で変数iに+1ずつ数字を足しながら繰り返し処理をする。
   for (var i = 0; i<4; i++) {
4. それからコンソールに0と表示させる。
   console.log(i);
5. そしてまた式の最初に戻り、iは1なので、処理を続行。
   for (var i = 0; i<4; i++) {
6. そしてiに1を足す。
   for (var i = 0; i<4; i++) {
7. まだiは4に満たないので処理を続け、1と追加で表示させる。
   console.log(i);

………

……

…と繰り返していくとiが4になりi<4の条件に合わなくなるため、処理を終了します。

つまり3までは処理してくれます。

for文は通常0から始まるように指定することが多いです。

for文を使わない場合

では上記のサンプルをfor文を使わずに書く場合はどうなるか？

以下のようになります。

少ない処理だと上記のように書いてもいいですが、例えば0歳～80歳まで1歳刻みのプルダウンメニューを作るとなるとどうでしょう？

optionタグを81個も作らないといけませんね。

「オラ」を1,000回表示させたい場合だとどうでしょう？

for文のような繰り返し処理を使わないと、気が遠くなる作業になりますね。

「continue」でループ処理中に特定の値をスキップ

for文で繰り返し処理中に、特定の値だけスキップする場合はcontinueが便利です。

結果（コンソール）

1
2
4

if文で3の時だけcontinueを使ってスキップするよう条件分岐し3だけスキップさせました。

「break」で特定の値でループ処理を中止

for文で繰り返し処理中に特定の値以降は処理を中止する場合breakが便利です。

結果（コンソール）

1
2

if文で3が出たらbleakを使って処理を中止するよう条件分岐し3以降は処理を中止させました。

continuebreakともに、同じ繰り返し処理でもeach()で使うとエラーとなるため、注意しましょう。

参考：each()で複数の要素をループ処理

配列のループ処理

lengthでカウント

配列をfor文でループ処理する際はlengthで配列の値をカウントし、条件式に指定します。

結果（コンソール）

神奈川
大阪
福岡

一番上のサンプルではi<5;と数字を条件式に入れていましたが、値の数が不特定多数な配列などでは、このような方法をよく使います。

以下のように使います。

変数.length

lengthは配列以外にも要素数や文字数のカウントにも使えます。

lengthはfor文の外で変数に格納しておく

配列をfor分でループ処理する際、上記のようにfor文の条件式内でlengthを使って数をカウントすると、1ループごとにカウントするので処理が重くなります。

以下のようにfor文の外でカウントしましょう。

あらかじめ配列をカウントし、変数に値の個数を入れることで、1ループごとにカウントする手間が省けます。

体感速度は変わらないでしょうが、重い処理となると差が出るため、クセを付けておきたいですね。

スポンサードリンク