.NET開発者のためのブログメディア
JavaScriptでのforEach文の使い方をご紹介！
- SE
- JavaScriptではforEach文をどのような場合に使用するのですか。
- PM
- forEach文は配列の要素を繰り返し処理する場合などに使用します。
目次
JavaScriptでのforEachの使い方とは？
今回は、JavaScriptでのforEach文の使い方について説明します。配列の要素を繰り返し処理する場合などに、forEach文を使用します。
for文とは違った特徴があり、用途に応じて使い分ける必要があります。
ここでは、以下の内容で説明します。
・基本的な使い方
・ラムダ式
・オブジェクトの要素を取得
・コールバック関数
・第2引数
・breakやcontinueは使用不可
JavaScriptでのforEach文の使い方に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptにおける、forEach文の使い方を紹介します。
forEach文は以下のように使用します。
|
1 |
配列.forEach( コールバック関数 ) |
それでは実際のソースコードを見てみましょう。
|
1 2 3 4 |
var items = [ “item1”, “item2”, “item3” ]; items.forEach( function( item ) { console.log( item ); }); |
実行結果は以下のようになります。
|
1 2 3 |
item1 item2 item3 |
このように、配列の全要素を取得できます。
forEach文では、要素の途中から繰り返し処理をしたり、要素の途中まで繰り返し処理をすることはできません。必ず全要素に対して処理しますので、そうしたくない場合は、for文を使用してください。
|
1 2 3 4 5 |
var items = [ “item1”, “item2”, “item3” ]; // 2つめの要素以降を処理する for( var i = 1; i < items.length; i++) { console.log( items[i] ); } |
実行結果は以下のようになります。
|
1 2 |
item2 item3 |
forEach文でも、コールバック関数のindexを使用すれば上記の処理は可能です。
この方法については後述します。
ラムダ式
JavaScriptでは、forEach文をラムダ式で記述できます。
実際のソースコードを見てみましょう。
|
1 2 |
var items = [ “item1”, “item2”, “item3” ]; items.forEach( item => console.log( item ) ); |
実行結果は以下のようになります。
|
1 2 3 |
item1 item2 item3 |
ラムダ式で記述することで、すっきりとしたソースコードになります。
ラムダ式で繰り返し処理の中で複数行実行するには、以下のように”{}”で囲みます。
|
1 2 3 4 5 |
var items = [ “item1”, “item2”, “item3” ]; items.forEach( item => { console.log( “item is” ); console.log( item ); }); |
実行結果は以下のようになります。
|
1 2 3 4 5 6 |
item is item1 item is item2 item is item3 |
このようにJavaScriptでは、forEach文をラムダ式で記述できます。
オブジェクトの要素を取得
JavaScriptでは、オブジェクトに対して全要素を取得できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 |
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 );
});
実行結果は以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
name: taro age: 10 gender: male name: hanako age: 20 gender: female name: jiro age: 40 gender: male name: kyoko age: 25 gender: female |
このように、JavaScriptではオブジェクトに対して全要素を取得できます。
コールバック関数
JavaScriptのforEach文では、コールバック関数で3つの引数を使用できます。
|
1 2 3 4 5 6 |
// value：配列のデータ値 // index：配列のインデックス // array：現在処理している配列 配列.forEach( function( value, index, array ) { // 繰り返し処理 }); |
コールバック関数の引数（value, index）を使ったソースコードを見てみましょう。
|
1 2 3 4 |
var items = [ “item1”, “item2”, “item3” ]; items.forEach( function( value, index ) { if( index > 0 ) console.log( value ); }); |
実行結果は以下のようになります。
|
1 2 |
item2 item3 |
2つ目以降の要素を取得していることが分かります。
コールバック関数の引数（value, index, array）を使ったソースコードを見てみましょう。
|
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 );
実行結果は以下のようになります。
|
1 2 |
[ 'item1', 'item2', 'item3' ] [ 'item1', 'item2item2', 'item3item3' ] |
このように、JavaScriptのforEach文では、コールバック関数で3つの引数を使用できます。
第2引数
JavaScriptでは、forEach文に第2引数を指定できます。
以下のように記述します。
|
1 |
配列.forEach( コールバック関数, オブジェクト ) |
forEach文に第2引数にオブジェクトを指定したソースコードを見てみましょう。
|
1 2 3 4 5 |
var items = [ “item1”, “item2”, “item3” ]; items.forEach( function( value, index ) { // この「this」は、「items」を参照する console.log( this[index] ); }, items ) |
実行結果は以下のようになります。
|
1 2 3 |
item1 item2 item3 |
このようにJavaScriptでは、forEach文に第2引数を指定できます。
breakやcontinueは使用不可
JavaScriptのforEach文では、繰り返し処理を終了するbreakや、繰り返し処理をスキップするcontinueは使用できません。
記述すると、実行時エラーになります。
実際のソースコードを見てみましょう。
|
1 2 3 4 |
var items = [ “item1”, “item2”, “item3” ]; items.forEach( function( value, index ) { 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文を使用してください。
ぜひご自身でソースコードを書いて、理解を深めてみてください。
