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

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

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

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

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

 

for文の基本

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

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

結果(コンソール)

0
1
2
3

03まで表示されました。

 

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

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

for文の基本構文

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

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

for文の動作

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

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

 

………

……

…と繰り返していくとi4になり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ループごとにカウントする手間が省けます。

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

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*