JavaScriptでのforEach文の使い方をご紹介！
- システム
エンジニア - JavaScriptではforEach文をどのような場合に使用するのですか。
- プロジェクト
マネージャー - 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
7
8
9
10
11
12
13
|
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
3
4
5
6
7
8
9
10
|
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
3
4
5
6
|
if( index == 1 ) break;
^^^^^
SyntaxError: Illegal break statement
（中略）
|
このように、JavaScriptのforEach文では、繰り返し処理を終了するbreakや、繰り返し処理をスキップするcontinueは使用できません。
この場合はfor文を使用してください。
- システム
エンジニア - JavaScriptのforEach文では、繰り返し処理を終了するbreakや繰り返し処理をスキップするcontinueは使用できないのですね。
- プロジェクト
マネージャー - その通りです。breakやcontinueする場合はfor文を使用します。
JavaScriptでのforEachの使い方について理解しよう
いかがでしたでしょうか。JavaScriptでのforEach文の使い方について説明しました。
配列の要素を繰り返し処理する場合などに、forEach文を使用します。for文とは違った特徴があり、用途に応じて使い分ける必要があります。
注意してほしい点としては、breakやcontinueは使用できません。この場合はfor文を使用してください。
ぜひご自身でソースコードを書いて、理解を深めてみてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
JavaScript新着案件New Job
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)
関連記事Related Posts
-
jQueryのparentメソッドとは？parentメソッドの使用方法を紹介
jQueryでのparentメソッドの使い方とは？ 今回は、jQueryでのparentメソッドの使い方について説明します。parentメソッドを使用すれば、親要素を取得できます。 基本的な使い方から、引数の使い方につい […]
-
jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？
jQueryでのaddClassメソッドの使い方とは？ 今回は、jQueryでのaddClassメソッドの使い方について説明します。 addClassメソッドを使用すると、classを追加することができます。addCla […]
-
jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは
HTML要素であるidの特徴3つ CSSやJavaScriptで装飾するために必要であるHTMLの要素のidは、大きく分けて3つの性質を持っています。その性質や似た性質を持っているclassとの使い分けについて紹介してい […]
-
jQueryでremove()を使った要素の削除方法5選！その他の方法も解説
jQueryでのremoveメソッドの使い方とは？ 今回は、jQueryでのremoveメソッドの使い方について説明します。 removeメソッドを使用すると、要素の削除ができます。 ここでは、 ・指定の要素を削除 ・i […]
-
JavaScriptのonloadについて解説します
JavaScriptのonloadとは？ JavaScriptのonloadは、Windowsインターフェイスのメソッドです。 具体的には以下のような使い方をします。 [crayon-6335e92d42e3565934 […]
