JavaScriptでforEachメソッドを使用する方法

TOP
コラム
JavaScriptでforEach

JavaScriptのforEachメソッドとは？

JavaScriptにはforEachメソッドというものがあります。

JavaScriptには配列というものがあり、forEachメソッドは配列に格納されたデータを繰り返し処理により一度で処理を行いたい時に使用します。

ここではJavaScriptのforEachメソッドについて説明します。

forEachメソッドの使用方法

forEachメソッドの基本構文

let 配列名 = [配列データ];
配列名.forEach(コールバック関数){
	//処理内容
}

コールバック関数にはvalue、index、arrayの3つの値を指定できます。

valueは配列データの値、indexは配列のインデックス番号、arrayは現在処理している配列となります。

forEachメソッドの注意点

forEachメソッドは繰り返し処理を中断するbreakやcontinueは使用出来ません。

使用してもエラーとなってしまいます。

JavaScriptにはfor文という繰り返し処理を行えるものがあります。

繰り返し処理中に中断を行いたい場合はfor文を使用します。

コールバック関数にvalueを指定し値を取得する

サンプルコード

'use strict'

let array = [
 
    {place: 'Tokyo', name: '東京'},
    {place: 'Osaka', name: '大阪'},
    {place: 'Sendai', name: '仙台'},
    {place: 'Nagoya', name: '名古屋'},
 
];

array.forEach(function(value) {
 
    console.log(value.place);
    console.log(value.name);
 
});

実行結果

Tokyo
東京
Osaka
大阪
Sendai
仙台
Nagoya
名古屋

このサンプルコードはforEachメソッドを使用しオブジェクト構造の中身をJavaScriptのコンソール上に表示しています。

console.log(value.place)はplaceの値を、 console.log(value.name)はnameの値を表示します。

配列がオブジェクト構造でなかった場合はconsole.log(value)で配列の中の値をJavaScriptのコンソール上に表示させることができます。

コールバック関数にvalue,indexの2つを措定して使用する

サンプルコード

'use strict'

let array = [ 1, 2, 3, 4, 5, 6, 7, 8 ];
 
array.forEach(function(value,index) {
  
    if(index>3) console.log(value);
 
});

実行結果

5
6
7
8

このサンプルコードではif(index>3)と条件式に指定することでインデックス番号の4からの値をconsole.log(value)で繰り返し出力しています。

そのためJavaScriptのコンソール上に実行結果が表示されます。

コールバック関数にvalue,index,arrayの3つを措定して使用する

サンプルコード

'use strict'

let array = [ 1, 2, 3, 4, 5, 6, 7, 8 ];
 
array.forEach(function(value,index,array) {
  
    if(index>3) array[index] = 5;
 
});

console.log(array);

実行結果

[1, 2, 3, 4, 5, 5, 5, 5]

コールバック関数の引数「array」は、現在処理している配列の元データが格納されており、元のarrayとindexを合わせることで値の変更ができます。

if(index>3) array[index] = 5;とすることでインデックス番号の4からの値を全て5にしています。

そのためJavaScriptのコンソール上に実行結果が表示されます。

forEachメソッドの第2引数を指定する

let 配列名 = [配列データ];
配列名.forEach(コールバック関数,オブジェクト){
	//処理内容
}

上記のように第2引数にオブジェクトを指定することができます。

処理内容内でオブジェクト内にアクセスするにはthisを使用します。

サンプルコード

'use strict'

let list = {
 
    '東京': 'Tokyo',
    '大阪': 'Osaka',
    '仙台': 'Sendai',
    '名古屋': 'Nagoya'
}
 
let array = ['東京','大阪','仙台','名古屋'];

array.forEach(function(value) {
 
   console.log(value + 'のローマ字表記は'+ this[value] +'です');
 
},list);

実行結果

東京のローマ字表記はTokyoです
大阪のローマ字表記はOsakaです
仙台のローマ字表記はSendaiです
名古屋のローマ字表記はNagoyaです

サンプルコードのforEachの第2引数にはオブジェクトであるlistを指定しています。

処理内容内でthisを使用することでオブジェクトであるlistを参照することが可能となります。

console.log(value + 'のローマ字表記は'+ this[value] +'です')このコードのvalueは配列であるarrayの値を取得します。

this[value]はlistの値を取得します。

そのためJavaScriptのコンソール上に実行結果が表示されます。

ラムダ式

forEachメソッドはアロー関数を使用するラムダ式で記述することができます。

配列名.forEach(変数名 => 処理内容)

サンプルコード

'use strict'

let array = ['東京', '大阪', '名古屋'];

array.forEach(value => console.log(value));

実行結果

東京
大阪
名古屋

このコードのvalueは配列の中身の1つという意味です。

また、このコードではvalueという変数名にしていますが、変数名はどんなものでも大丈夫です。

2行以上の処理を記述するには｛｝で囲います。

配列名.forEach(変数名 => {
//処理内容1
//処理内容2
});

まとめ

JavaScriptのforEachメソッドについて説明しました。

forEachメソッドは配列を繰り返し処理するものです。

また繰り返し処理するものでfor文がありますが、少し違うところもありますので注意が必要です。