JavaScript | for ofで配列のインデックス番号も取得する方法

2021-11-27JavaScript 配列,JavaScript

JavaScriptのループ処理のひとつ、for of文で値と一緒に要素のインデックス番号も取得する方法を紹介しています。

for ofで配列のインデックス番号も取得する

配列をentries()メゾッドにて指定する事で値と一緒にindex番号も取得する事が可能になります。

entries()メソッドは、配列内の各要素に対するキーと値のペアを含む新しいArrayイテレーターオブジェクトを返します。
参考：Array.prototype.entries() – JavaScript | MDN

let array = ['apple', 'banana', 'pine'];

for (const [index, value] of array.entries()) {
	console.log(index, value);
}

// 0 'apple'
// 1 'banana'
// 2 'pine'

また、オブジェクト型（連想配列）で同様にキー名を取得したい場合にはObject.entries()が利用可能です。

関連：JavaScript | for ofでオブジェクトのキー名も取得する方法 | ONE NOTES

let obj = {'apple': 100, 'banana': 150, 'pine' : 200};
for (const [key, value] of Object.entries(obj)) {
	console.log(key, value);
}

// apple 100
// banana 150
// pine 200

forEach()を使った方法

同じようにインデックスと値を取得シたい場合、forEach()メゾッドを使った方法も一般的かと思います。

let array = ['apple', 'banana', 'pine'];

array.forEach((value, index) => {
	console.log(index, value);
});

// 0 'apple'
// 1 'banana'
// 2 'pine'