基礎からのJavaScript⑤ ～forEachを用いたループ処理～

今回は、タイトルの通り、forEach文を用いたループ処理を紹介したいと思います。

１. forEach文とは

forEach文で行うことのできる処理は、配列数分のループ処理です。
ループ処理の例として、for文を用いて比較してみます。

for文を用いた配列のループ処理の場合、

for (var i = 0; i < array.length; i++){ // array:配列変数
　処理内容
}

もしくは、

for (var i in array){ // array:配列変数
　処理内容
}

のように書きます。

for()内の

var i = 0; i < array.length; i++
var i in array

は同じものだと認識してもらって問題ないと思います。
上の方で説明すると、1ずつ増えていくiが配列の長さ（array.length）よりも小さい間、ループ処理が行われる、というイメージですね。

これをforEach文に書き換えると…

array.forEach( // array:配列変数
コールバック関数による処理
)

コールバック関数とは何ぞやという感じですが、functionを用いた処理と認識しておけばよいでしょう。（具体的には、次の見出しで説明します。）

２. forEach文の使い方

それでは、実際にforEach文を用いた処理を見ていきましょう。

今回は、配列内に3つの要素（だいふく, やま, かわ）が入っており、これらをループ処理によりログ出力する処理を行いたいと思います。

まずは、配列に要素を定義します。

var noteArray = ['daifuku', 'yama', 'kawa'];

次にforEach文の登場です。

noteArray.forEach( function( item ) {
  console.log( item ); 
});

---------------------------------------------------
出力結果：
daifuku
yama
kawa

forEach文中に処理内容を含むfunction関数が入っていますね。function()内のitemには、配列noteArrayの要素が0番目から順番に1つずつ入ります。

function関数内の処理の流れとしては、上記の場合だと、noteArray[0]の'daifuku'を出力、noteArray[1]の'yama'を出力、noteArray[2]の'kawa'を出力。という流れになります。

３. forEach文での処理をfor文に書き換える

最後に、2. で説明したforEach文での処理をfor文に書き換えてみます。

①for文

for(var i = 0; i < noteArray.length; i++){
   console.log(noteArray[i]);
}

②for-in文

for(var i in noteArray){
   console.log(noteArray[i]);
}

著者：かわ