配列のループ

配列にある要素の数だけループ処理

配列にある要素の数だけループする方法は以下の4種類あります。

• forEachメソッドを使う
• for文を使う
• for…of文を使う
• for…in文を使う

いずれの方法も配列の要素を先頭から1つずつ参照して、要素の数だけループする点は共通です。
以降ではそれぞれの方法を1つずつ解説していきます。

forEachメソッドでループ処理

Arrayオブジェクトが用意するforEachメソッドを使ってループ処理を行います。
メソッドの中で要素の値や位置情報を受け取って使用することができます。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

// forEachメソッドでループ
animals.forEach(function(e,i,a){
	console.log(e);
	console.log(i);
	console.log(a);
});

// 1回目のループ
// e：cat
// i：0
// a：(3) ["cat", "dog", "mouse"]

// 2回目のループ
// e：dog
// i：1
// a：(3) ["cat", "dog", "mouse"]

// 3回目のループ
// e：mouse
// i：2
// a：(3) ["cat", "dog", "mouse"]

引数はループごとに、先頭から順に要素の値、要素の添字（インデックス）、元の配列を受け取ることができます。
上の例では変数名をe、i、aとしていますが、特に決まりはなく自由な名前を使うことができます。

要素にオブジェクトを含む配列についてもforEachメソッドでループ処理を実行することができます。

JS コード例

let animals = [
	{
		name: "cat",
		id: 150001,
		age: 4
	},
	{
		name: "dog",
		id: 150002,
		age: 2
	},
	{
		name: "mouse",
		id: 150003,
		age: 1
	}
];

// パターン1：forEachメソッド
animals.forEach(function(e){
	console.log(e.name);
	console.log(e.id);
});

// 1回目のループ
// e.name：cat
// e.id：150001

// 2回目のループ
// e.name：dog
// e.id：150002

// 3回目のループ
// e.name：mouse
// e.id：150003

なお、配列の要素の添字（インデックス）に数値ではなく文字列を使っている場合については、配列の要素ではなくオブジェクトのプロパティになるためforEachメソッドはうまく動作しません。
例えば、上記の配列を以下のように変更すると何も出力されません。

JS コード例

let animals = new Array();
animals["a"] = 'cat';
animals["b"] = 'dog';
animals["c"] = 'mouse';

// forEachメソッドでループ
animals.forEach(function(e,i,a){
	console.log(e);
	console.log(i);
	console.log(a);
});

要素の添字（インデックス）を文字列にすると擬似的な連想配列のようなオブジェクトになりますが、このオブジェクトに対してループを実行したいときは後述するfor…in文を使用してください。

for文でループ処理

for文と配列の長さを取得するlengthプロパティを組み合わせてループ処理を実行することができます。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

for(let i=0; i < animals.length; i++) {
	console.log(i);
	console.log(animals[i]);
}

// 1回目のループ
// i：0
// animals[i]：cat

// 2回目のループ
// i：1
// animals[i]：dog

// 3回目のループ
// i：2
// animals[i]：mouse

変数iには配列の要素の添字（インデックス）が入り、添字（インデックス）と変数を組み合わせて値を取得します。

for…of文でループ処理

要素の添字（インデックス）は必要なく、値のみ参照できれば十分なケースで有用な方法です。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

for(let value of animals) {
	console.log(value);
}

// 1回目のループ
// cat

// 2回目のループ
// dog

// 3回目のループ
// mouse

ループの度に配列から要素を1つ取り出して、変数valueに入れて処理を実行します。
シンプルで扱いやすいループ処理です。

for…in文でループ処理

for…in文はループする度に配列から要素を1つ取り出して、添字（インデックス）を変数に入れて実行します。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

for(let index in animals) {
	console.log(index);
	console.log(animals[index]);
}

// 1回目のループ
// index：0
// animals[index]：cat

// 2回目のループ
// index：1
// animals[index]：dog

// 3回目のループ
// index：2
// animals[index]：mouse

上記の例ではループの度に配列から要素を1つ取り出して、添字（インデックス）を変数indexに入れて処理を実行します。
for…in文は連想配列にも対応することができます。

JS コード例

let animals = new Array();
animals["a"] = 'cat';
animals["b"] = 'dog';
animals["c"] = 'mouse';

for(let index in animals) {
	console.log(index);
	console.log(animals[index]);
}

// 1回目のループ
// index：a
// animals[index]：cat

// 2回目のループ
// index：b
// animals[index]：dog

// 3回目のループ
// index：c
// animals[index]：mouse

4種類のループ処理を解説してきましたが、配列の添字（インデックス）が数値のときはforEachメソッドが便利ですが、大きな違いはないため好みで選択することができます。
もし配列の添字（インデックス）が数値でない可能性がある場合に限り、4番目のfor…in文を使うようにしてください。

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

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