JavaScript - 配列のループ中に key（index）を取得する文やメソッド

JavaScript のfor 文や while 文で配列をループする場合、 カウンタを用いてkey(index) を管理する必要があります。

ここでは、自分でカウンタを管理する必要がなく、 key(index)を取得できる for in 文や forEach()、map() について 説明します。

for in 文

for in 文は、オブジェクトのプロパティを巡回します。

配列もオブジェクトの一種ですから使用できます。

下は、for in 文を使ったループのサンプルコードです。

「i」をプログラム中で増減させる必要がありません。

var arr = ["a", "b", "c"];

for (var i in arr){
	console.log(arr[i]);
}

// 実行結果
a
b
c

注意点として、for in 文は繰り返しの順序が実行環境に依存し、 順番に要素が取得できるとは限りません。

ですから、インデックス順に配列をループさせたい場合は 使わない方がいいでしょう。

forEach() メソッド

次のコードは forEach() メソッドを使ったループのサンプルコードです。

ここでも、インデックス「i」をプログラム中で増減させる必要がありません。

var arr = [1, 2, 3, 4, 5];

arr.forEach(function(v, i, a){
	a[i] = v * 2;   // 2倍
});

console.log(arr); // Array [ 2, 4, 6, 8, 10 ]

関連記事: foreach() を使った配列のループ

map() メソッド

次のコードは map() メソッドを使ったループのサンプルコードです。

ここでも、インデックス「i」をプログラム中で増減させる必要がありません。

var arr = [1, 2, 3, 4, 5];

arr.map(function(v, i){
	console.log(i);
	return v * 2;   // 2倍
});

console.log(arr);

// 実行結果
0
1
2
3
4
Array [ 1, 2, 3, 4, 5 ]

関連記事: map() を使った配列のループ

まとめ

★ for in 文、forEach()、map()などの文やメソッドを使用すると、 プログラム中にカウンタを増減させることなく、key(index)を取得できます。

★ 但し、for in 文は配列の順序が保証されていません。