配列の各要素に対して処理を実行する

配列にある要素1つ1つに対して処理を実行

ArrayオブジェクトのforEachメソッドを使って、配列にある全ての要素に対して同じ処理を1つずつ実行することができます。

以下の例は要素が持つオブジェクトのプロパティを出力します。

JS コード例

let animals = [
	{
		name: "cat",
		id: 150001,
		voice: "にゃん"
	},
	{
		name: "dog",
		id: 150002,
		voice: "ワン"
	},
	{
		name: "mouse",
		id: 150003,
		voice: "チュウ"
	}
];

animals.forEach(function(e){
	console.log(e.name);
	console.log(e.id);
	console.log(e.voice);
});

// 1回目
// cat
// 150001
// にゃん

// 2回目
// dog
// 150002
// ワン

// 3回目
// mouse
// 150003
// チュウ

forEachメソッドは配列の先頭にある要素から1つずつ順番に処理を実行していきます。
上記の例では要素の値のみ変数eを使って参照していますが、引数を用意すると配列のインデックス（キー）や元の配列も処理内で参照することが可能です。

以下の例では引数をeに加えて、インデックスを渡すindexと、元の配列を渡すarrayを用意して処理の中で参照します。（引数の変数名は任意です）

JS コード例

let animals = [
	{
		name: "cat",
		id: 150001,
		voice: "にゃん"
	},
	{
		name: "dog",
		id: 150002,
		voice: "ワン"
	},
	{
		name: "mouse",
		id: 150003,
		voice: "チュウ"
	}
];

animals.forEach(function( e, index, array){
	console.log(e.name);
	console.log(index);
	console.log(array);
});

// 1回目
// cat
// 0
// (3) [{…}, {…}, {…}]
//	0: {name: "cat", id: 150001, voice: "にゃん"}
//	1: {name: "dog", id: 150002, voice: "ワン"}
//	2: {name: "mouse", id: 150003, voice: "チュウ"}

// 2回目
// dog
// 1
// (3) [{…}, {…}, {…}]

// 3回目
// mouse
// 2
// (3) [{…}, {…}, {…}]

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。