JavaScriptのfor…of構文を使用してループカウンター/インデックスを取得する

注意：

質問は依然としてfor…ofループに適用されます。> Arrayのfor…in反復には使用せず、オブジェクトのプロパティの反復に使用してください。つまり、これ

for…inJavaScript の基本的な構文が次のようになっていることを理解しています。

for (var obj in myArray) {
    // ...
}

しかし、ループカウンター/インデックスを取得するにはどうすればよいですか？

私はおそらく私が次のようなことをすることができることを知っています：

var i = 0;
for (var obj in myArray) {
    alert(i)
    i++
}

または古き良きもの：

for (var i = 0; i < myArray.length; i++) {
    var obj = myArray[i]
    alert(i)
}

しかし、私はむしろ単純なfor-inループを使用したいと思います。私は彼らがよりよく見え、より理にかなっていると思います。

よりシンプルでエレガントな方法はありますか？

Pythonでは簡単です。

for i, obj in enumerate(myArray):
    print i

for…in値ではなくプロパティ名を反復処理し、不特定の順序で反復します（はい、ES6の後でも）。配列の反復処理には使用しないでください。それらの場合forEach、値とインデックスの両方を指定した関数に渡すES5のメソッドがあります。

var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32

またはArray.prototype.entries現在のブラウザのバージョン全体でサポートされているES6 ：

for (const [i, value] of myArray.entries()) {
    console.log('%d: %s', i, value);
}

イテラブル一般（a for…ofではなくループを使用する場合for…in）の場合、組み込みのものはありません。

function* enumerate(iterable) {
    let i = 0;

    for (const x of iterable) {
        yield [i, x];
        i++;
    }
}

for (const [i, obj] of enumerate(myArray)) {
    console.log(i, obj);
}

デモ

もしあなたが実際に意味を持っているならfor…in–プロパティを列挙する–あなたは追加のカウンターが必要になるでしょう。Object.keys(obj).forEach動作する可能性がありますが、独自のプロパティのみが含まれます。for…inプロトタイプチェーンの任意の場所に列挙可能なプロパティが含まれます。

ES6では、for-ofループを使用することをお勧めします。このようにインデックスを取得できます

for (let [index, val] of array.entries()) {
        // your code goes here    
}

イテレータをArray.entries()返すことに注意してください。これにより、for-ofループで機能することができます。これをObject.entries（）と混同しないでください。、キーと値のペアの配列を返す。

これはどう

let numbers = [1,2,3,4,5]
numbers.forEach((number, index) => console.log(`${index}:${number}`))

ここで、array.forEachこの方法は有するindexアレイで処理されている現在の要素のインデックスであるパラメータ。

小さな配列コレクションのソリューション：

for (var obj in arr) {
    var i = Object.keys(arr).indexOf(obj);
}

arr -ARRAY、 obj-現在の要素のキー、 i -COUNTER / INDEX

注：メソッドkeys（）はIEバージョン<9では使用できません。Polyfillコードを使用する必要があります。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

for-in-loopsは、オブジェクトのプロパティを反復処理します。動作する場合でも、配列に使用しないでください。

その場合、オブジェクトのプロパティにはインデックスがなく、それらはすべて等しく、決まった順序で実行する必要はありません。プロパティをカウントする場合は、追加のカウンターをセットアップする必要があります（最初の例で行ったように）。

配列のループ：

var a = [];
for (var i=0; i<a.length; i++) {
    i // is the index
    a[i] // is the item
}

オブジェクトのループ：

var o = {};
for (var prop in o) {
    prop // is the property name
    o[prop] // is the property value - the item
}

他の人が言ったように、配列を反復するためにfor..inを使うべきではありません。

for ( var i = 0, len = myArray.length; i < len; i++ ) { ... }

より簡潔な構文が必要な場合は、forEachを使用できます。

myArray.forEach( function ( val, i ) { ... } );

この方法を使用する場合は、ES5シムを含めて、古いブラウザーのサポートを追加してください。

rushUpによる回答は正しいですが、これはより便利です

for (let [index, val] of array.entries() || []) {
   // your code goes here    
}

ここに関数があります eachWithIndexイテラブルでです。

eachWithKeyを使用してオブジェクトと連携する同様の関数を作成することもできfor...inます。

// example generator (returns an iterator that can only be iterated once)
function* eachFromTo(start, end) { for (let i = start; i <= end; i++) yield i }

// convers an iterable to an array (potential infinite loop)
function eachToArray(iterable) {
    const result = []
    for (const val of iterable) result.push(val)
    return result
}

// yields every value and index of an iterable (array, generator, ...)
function* eachWithIndex(iterable) {
    const shared = new Array(2)
    shared[1] = 0
    for (shared[0] of iterable) {
        yield shared
        shared[1]++
    }
}

console.log('iterate values and indexes from a generator')
for (const [val, i] of eachWithIndex(eachFromTo(10, 13))) console.log(val, i)

console.log('create an array')
const anArray = eachToArray(eachFromTo(10, 13))
console.log(anArray)

console.log('iterate values and indexes from an array')
for (const [val, i] of eachWithIndex(anArray)) console.log(val, i)

ジェネレータの良いところは、それらが遅延していて、別のジェネレータの結果を引数として取ることができるということです。

これは、インデックスと、渡されたジェネレーター関数の値を（遅い）素数検索の例で生成する複合イテレーターの私のバージョンです。

const eachWithIndex = (iterable) => {
  return {
    *[Symbol.iterator]() {
      let i = 0
      for(let val of iteratable) {
        i++
          yield [i, val]
      }
    }
  }

}

const isPrime = (n) => {
  for (i = 2; i < Math.floor(Math.sqrt(n) + 1); i++) {
    if (n % i == 0) {
      return false
    }
  }
  return true
}

let primes = {
  *[Symbol.iterator]() {
    let candidate = 2
    while (true) {
      if (isPrime(candidate)) yield candidate
        candidate++
    }
  }
}

for (const [i, prime] of eachWithIndex(primes)) {
  console.log(i, prime)
  if (i === 100) break
}

誰もが投稿した非常に良い答えに加えて、最もパフォーマンスの高いソリューションはES6だと付け加えておきentriesます。ここの多くの開発者にとっては控えめなようですので、このperf benchamrkを作成しました。

約6倍高速です。主な理由は次のとおりです。a）配列に複数回アクセスし、b）インデックスをキャストします。