for...of文のインデックス取得

JavaScriptのfor...of文におけるループカウンタ/インデックスの取得

for...of文は、イテラブルオブジェクト（配列、セット、マップなど）の要素を順番に処理するために使用されます。しかし、この文法自体には、ループカウンタやインデックスを直接取得する機能はありません。

インデックスを取得する方法

独自変数をインクリメントする
最も一般的な方法は、ループの外で変数を初期化し、ループ内でインクリメントすることです。

const array = [1, 2, 3];
let index = 0;

for (const element of array) {
  console.log(index, element);
  index++;
}

Array.prototype.entries()を使用する
配列の場合、entries()メソッドを使用して、要素とインデックスをペアにしたイテレーターを取得できます。

const array = [1, 2, 3];

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

ループカウンタを取得する方法

ループカウンタは、通常、インデックスと同一です。そのため、上記の方法を使用してインデックスを取得すれば、ループカウンタも取得できます。

注意

• for...in文は、オブジェクトのプロパティを処理するために使用されます。ループカウンタやインデックスが必要な場合は、for...in文ではなく、for...of文を使用してください。
• for...of文は、イテラブルオブジェクトの要素を処理するためのものです。ループカウンタやインデックスが必要な場合は、上記の方法を使用して取得する必要があります。

独自変数をインクリメントする

const array = [1, 2, 3];
let index = 0;

for (const element of array) {
  console.log(index, element);
  index++;
}

• 説明
  
  • index変数を初期化して0に設定します。
  • for...of文で配列の要素を処理するたびに、index変数をインクリメントします。
  • console.log()でインデックスと要素を出力します。

Array.prototype.entries()を使用する

const array = [1, 2, 3];

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

• 説明
  
  • entries()メソッドを使用して、配列の要素とインデックスをペアにしたイテレーターを取得します。
  • for...of文でイテレーターの要素を処理し、デストラクチャリングを使用してインデックスと要素を抽出します。

しかし、特定の状況では、以下のような代替方法も考慮することができます。

Array.prototype.forEach()を使用する

配列の場合、forEach()メソッドを使用して、要素とインデックスをコールバック関数に渡すことができます。

const array = [1, 2, 3];

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

forループを使用する

forループは、ループカウンタを直接制御できるため、インデックスを取得する必要がある場合に便利です。

const array = [1, 2, 3];

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

whileループを使用する

const array = [1, 2, 3];
let i = 0;

while (i < array.length) {
  console.log(i, array[i]);
  i++;
}