JavaScriptでのforEach文の使い方をご紹介！

.NET開発者のためのブログメディア

SE: JavaScriptではforEach文をどのような場合に使用するのですか。

PM: forEach文は配列の要素を繰り返し処理する場合などに使用します。

JavaScriptでのforEachの使い方とは？

今回は、JavaScriptでのforEach文の使い方について説明します。配列の要素を繰り返し処理する場合などに、forEach文を使用します。

for文とは違った特徴があり、用途に応じて使い分ける必要があります。

ここでは、以下の内容で説明します。
・基本的な使い方
・ラムダ式
・オブジェクトの要素を取得
・コールバック関数
・第2引数
・breakやcontinueは使用不可

JavaScriptでのforEach文の使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptにおける、forEach文の使い方を紹介します。

forEach文は以下のように使用します。

 配列.forEach( コールバック関数 )

1	配列.forEach( コールバック関数 )

それでは実際のソースコードを見てみましょう。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 items.forEach( function( item ) {
  console.log( item ); 
 });

var items = [ ""item1"", ""item2"", ""item3"" ];

items.forEach( function( item ) {

console.log( item );

});

実行結果は以下のようになります。

 item1
 item2
 item3

item1

item2

item3

このように、配列の全要素を取得できます。

forEach文では、要素の途中から繰り返し処理をしたり、要素の途中まで繰り返し処理をすることはできません。必ず全要素に対して処理しますので、そうしたくない場合は、for文を使用してください。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 // 2つめの要素以降を処理する
 for( var i = 1; i < items.length; i++) {
  console.log( items[i] );
 }

var items = [ ""item1"", ""item2"", ""item3"" ];

// 2つめの要素以降を処理する

for( var i = 1; i < items.length; i++) {

console.log( items[i] );

}

実行結果は以下のようになります。

 item2
 item3

1 2	item2 item3

forEach文でも、コールバック関数のindexを使用すれば上記の処理は可能です。
この方法については後述します。

ラムダ式

JavaScriptでは、forEach文をラムダ式で記述できます。

実際のソースコードを見てみましょう。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 items.forEach( item => console.log( item ) );

1 2	var items = [ ""item1"", ""item2"", ""item3"" ]; items.forEach( item => console.log( item ) );

実行結果は以下のようになります。

 item1
 item2
 item3

item1

item2

item3

ラムダ式で記述することで、すっきりとしたソースコードになります。

ラムダ式で繰り返し処理の中で複数行実行するには、以下のように””{}””で囲みます。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 items.forEach( item => {
  console.log( ""item is"" );
  console.log( item );
 });

var items = [ ""item1"", ""item2"", ""item3"" ];

items.forEach( item => {

console.log( ""item is"" );

console.log( item );

});

実行結果は以下のようになります。

 item is
 item1
 item is
 item2
 item is
 item3

item is

item1

item is

item2

item is

item3

このようにJavaScriptでは、forEach文をラムダ式で記述できます。

オブジェクトの要素を取得

JavaScriptでは、オブジェクトに対して全要素を取得できます。

実際のソースコードを見てみましょう。

 var person = [
  { name: 'taro', age: 10, gender: 'male' },
  { name: 'hanako', age: 20, gender: 'female' },
  { name: 'jiro', age: 40, gender: 'male' },
  { name: 'kyoko', age: 25, gender: 'female' },
 ];

var person = [

{ name: 'taro', age: 10, gender: 'male' },

{ name: 'hanako', age: 20, gender: 'female' },

{ name: 'jiro', age: 40, gender: 'male' },

{ name: 'kyoko', age: 25, gender: 'female' },

];

person.forEach( function( value ) {
console.log( “”name: “” + value.name );
console.log( “”age: “” + value.age );
console.log( “”gender: “” + value.gender );
});

実行結果は以下のようになります。

 name: taro
 age: 10
 gender: male
 name: hanako
 age: 20
 gender: female
 name: jiro
 age: 40
 gender: male
 name: kyoko
 age: 25
 gender: female

age: 10

gender: male

age: 20

gender: female

age: 40

gender: male

age: 25

gender: female

このように、JavaScriptではオブジェクトに対して全要素を取得できます。

コールバック関数

JavaScriptのforEach文では、コールバック関数で3つの引数を使用できます。

 // value：配列のデータ値
 // index：配列のインデックス
 // array：現在処理している配列
 配列.forEach( function( value, index, array ) {
  // 繰り返し処理
 });

// value：配列のデータ値

// index：配列のインデックス

// array：現在処理している配列

配列.forEach( function( value, index, array ) {

// 繰り返し処理

});

コールバック関数の引数（value, index）を使ったソースコードを見てみましょう。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 items.forEach( function( value, index ) {
  if( index > 0 ) console.log( value );
 });

var items = [ ""item1"", ""item2"", ""item3"" ];

items.forEach( function( value, index ) {

if( index > 0 ) console.log( value );

});

実行結果は以下のようになります。

 item2
 item3

1 2	item2 item3

2つ目以降の要素を取得していることが分かります。

コールバック関数の引数（value, index, array）を使ったソースコードを見てみましょう。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 console.log( items );

1 2	var items = [ ""item1"", ""item2"", ""item3"" ]; console.log( items );

items.forEach( function( value, index, array ) {
if( index > 0 ) array[ index ] = value + value;
});

console.log( items );

実行結果は以下のようになります。

 [ 'item1', 'item2', 'item3' ]
 [ 'item1', 'item2item2', 'item3item3' ]

1 2	[ 'item1', 'item2', 'item3' ] [ 'item1', 'item2item2', 'item3item3' ]

このように、JavaScriptのforEach文では、コールバック関数で3つの引数を使用できます。

第2引数

JavaScriptでは、forEach文に第2引数を指定できます。
以下のように記述します。

 配列.forEach( コールバック関数, オブジェクト )

1	配列.forEach( コールバック関数, オブジェクト )

forEach文に第2引数にオブジェクトを指定したソースコードを見てみましょう。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 items.forEach( function( value, index ) {
  // この「this」は、「items」を参照する
  console.log( this[index] );
 }, items )

var items = [ ""item1"", ""item2"", ""item3"" ];

items.forEach( function( value, index ) {

// この「this」は、「items」を参照する

console.log( this[index] );

}, items )

実行結果は以下のようになります。

 item1
 item2
 item3

item1

item2

item3

このようにJavaScriptでは、forEach文に第2引数を指定できます。

breakやcontinueは使用不可

JavaScriptのforEach文では、繰り返し処理を終了するbreakや、繰り返し処理をスキップするcontinueは使用できません。

記述すると、実行時エラーになります。

実際のソースコードを見てみましょう。

 var items = [ ""item1"", ""item2"", ""item3"" ];
 items.forEach( function( value, index ) {
  if( index == 1 ) break;
 });

var items = [ ""item1"", ""item2"", ""item3"" ];

items.forEach( function( value, index ) {

if( index == 1 ) break;

});

実行結果は以下のようになります。

  if( index == 1 ) break;
  ^^^^^

1 2	if( index == 1 ) break; ^^^^^

SyntaxError: Illegal break statement
（中略）

このように、JavaScriptのforEach文では、繰り返し処理を終了するbreakや、繰り返し処理をスキップするcontinueは使用できません。

この場合はfor文を使用してください。

SE: JavaScriptのforEach文では、繰り返し処理を終了するbreakや繰り返し処理をスキップするcontinueは使用できないのですね。

PM: その通りです。breakやcontinueする場合はfor文を使用します。

JavaScriptでのforEachの使い方について理解しよう

いかがでしたでしょうか。JavaScriptでのforEach文の使い方について説明しました。

配列の要素を繰り返し処理する場合などに、forEach文を使用します。for文とは違った特徴があり、用途に応じて使い分ける必要があります。

注意してほしい点としては、breakやcontinueは使用できません。この場合はfor文を使用してください。

ぜひご自身でソースコードを書いて、理解を深めてみてください。

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）