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

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

 
SE
JavaScriptではforEach文をどのような場合に使用するのですか。
PM
forEach文は配列の要素を繰り返し処理する場合などに使用します。

JavaScriptでのforEachの使い方とは?


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

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

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

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

基本的な使い方

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

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

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

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

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

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

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

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

ラムダ式

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

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

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

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

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

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

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

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

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

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

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

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

コールバック関数

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

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

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

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

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

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

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

第2引数

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

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

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

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

breakやcontinueは使用不可

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

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

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

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

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

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

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

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

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

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

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

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


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

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

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags