【JavaScript】繰り返し処理each()とforEach()の使い方と相違点

更新日：2024/02/27

JavaScriptで繰り返し処理を行うとき候補となるのがjQueyのeach()と配列のforEach()です。
今回はそれぞれの使い方と、相違点について見ていきます。

each()はjQueyのメソッド

each()はjQueryで使用できるメソッドです。

jQueryのeach()は２種類あり、一つはjQueryオブジェクトに対して繰り返し処理を行います。
もう一つは任意の配列またはオブジェクトに対して繰り返し処理を行います。

jQueryオブジェクト.each()

jQueryオブジェクトのeach()メソッドは、jQueryオブジェクト内のDOM要素をコールバック関数に渡す処理を繰り返します。
コールバック関数はeach()の引数として指定します。

jQueryオブジェクト.each( ( index , element )=>{
  // element に対する処理
});)

コールバック関数は二つの引数を受け取ります。

• index: 要素のインデックスです。基本的に0から順番に加算されていきます。
• element: DOM要素です。

DOM要素に対してjQueryオブジェクトを使用する場合、DOM要素をjQueryオブジェクトに変換する必要があります。
次の使用例で確認してください。

■使用例

<div id="greeting">
  <p>おはよう</p>
  <p>こんにちは</p>
  <p>こんばんは</p>
</div>

<script>
    $(()=>{
      $( "#greeting p" ).each( (index,element) =>{
          $element = $( element ); // DOM要素をjQueryオブジェクトに変換
          console.log( `${ index }:${ $element.text() }`);
      });
    });
</script>

>> 0:おはよう
>> 1:こんにちは
>> 2:こんばんは

なお、コールバック関数はDOM要素をthis値で受け取ります。
アロー関数はthis値を受け取ることができないので、this値を使用するときは通常の関数定義に変更する必要があります。

$( "#greeting p" ).each( function(index){
    $element = $( this ); // DOM要素をjQueryオブジェクトに変換
    console.log( `${ index }:${ $element.text() }`);
});

$.each()

$.each()メソッドは、オブジェクトをコールバック関数に渡す処理を繰り返します。
※この場合のオブジェクトは、配列とjQueryオブジェクトも含んでいます。

$.each( object , ( propertName , value ) => {
  // valueに対する処理
});

$.each()メソッドは引数を二つ受け取ります。

• object: 繰り返し処理を行うオブジェクト。
• コールバック関数: 二つの引数（プロパティ名と値）を受け取る

前項のコードは、次のように$.each()メソッドで記述できます。

$.each( $( "#greeting p" ) , ( index,element )=>{
    $element = $( element );
    console.log( `${ index }:${ $element.text() }`);
});

基本的にこのメソッドは、オブジェクトのプロパティに対して繰り返し処理が目的です。

const object = {
  value:100,
  text:"abc",
  func:()=>{}
}
$.each( object , ( index,element )=>{
    console.log( `${ index }:${ element }`);
});

elementはDOM要素ではないので、$( element )での変換は必要ありません。

>> value:100
>> text:abc
>> func:()=>{}

class構文で定義したプライベートプロパティは、処理できません。

const classA = class {
  #privateProp = 1;
  value = 100;
}
$.each( new  classA , ( index,element )=>{
    console.log( `${ index }:${ element }`);
});

>> value:100

forEach()は配列のメソッド

forEach()は配列(Arrayオブジェクト)のメソッドです。
そのため、配列以外のオブジェクトでは使用できません。

利点は、コード量が多いjQueryを読み込まなくても使用できる点です。

forEach()はコールバック関数を引数として受け取ります。

配列.forEach( ( value , index , array ) =>{
  // valueに対する処理
});

コールバック関数は３つの引数を受け取ります。

• value: 配列要素の値
• index: 配列要素のインデックス
• array: 現在処理中の配列

■使用例

const array = ["a","b","c"];
array.forEach( ( value , index ) =>{
  console.log( `${ index }:${ value }` );
});

コールバック関数の３番目の引数は使用しないので、省略しています。

>> 0:a
>> 1:b
>> 2:c

多次元配列を処理するときは、次のように関数化して、再帰呼び出しをおこないます。

const array = ["a","b",["c",["d","e"],"f"],"g"];

const myForEach = ( array , prefix = "" )=>
    array.forEach( ( value , index ) =>{
        if( Array.isArray( value ) ){
          console.log( `${ prefix }${ index }:[` );
          myForEach( value , prefix + " " );
          console.log( `${ prefix } ]` );
        }
        else console.log( `${ prefix }${ index }:${ value }` );
      });
myForEach( array );

>> 0:a
>> 1:b
>> 2:[
>>  0:c
>>  1:[
>>   0:d
>>   1:e
>>   ]
>>  2:f
>>  ]
>> 3:g

forEach()については、いくつかページを作成しています。
確認してみてください。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。