Schleifenzähler/Index mit for of-Syntax in JavaScript abrufen

Question

Vorsicht!

Frage gilt weiterhin für for…of Schleifen.> Nicht verwenden for…in zur Iteration über eine Array verwenden, um zu iterieren über die Eigenschaften eines Objekts. Das heißt, dies

---

Ich verstehe, dass die grundlegenden for…in Syntax in JavaScript sieht wie folgt aus:

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

Aber wie bekomme ich die Schleife Zähler/Index ?

Ich weiß, dass ich wahrscheinlich etwas Ähnliches tun könnte:

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

Oder sogar die gute alte:

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

Aber ich würde lieber die einfachere for-in Schleife. Ich finde, sie sehen besser aus und machen mehr Sinn.

Gibt es einen einfacheren oder eleganteren Weg?

---

In Python ist das ganz einfach:

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

Answer 1

Wie andere gesagt haben, sollten Sie nicht for..in verwenden, um über ein Array zu iterieren.

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

Wenn Sie eine sauberere Syntax wünschen, können Sie forEach verwenden:

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

Wenn Sie diese Methode verwenden möchten, stellen Sie sicher, dass Sie das ES5-Shim einbinden, um die Unterstützung für ältere Browser hinzuzufügen.

Answer 2

Die von rushUp gegebene Antwort ist richtig, aber dies ist bequemer

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

Answer 3

Hier ist eine Funktion eachWithIndex die mit allen iterierbaren Elementen funktioniert.

Sie könnten auch eine ähnliche Funktion schreiben eachWithKey die mit Objekten arbeitet, die 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)

Das Gute an Generatoren ist, dass sie träge sind und das Ergebnis eines anderen Generators als Argument nehmen können.

Answer 4

Das ist meine Version eines zusammengesetzten Iterators, der einen Index und den Wert einer beliebigen übergebenen Generatorfunktion mit einem Beispiel für eine (langsame) Primzahlsuche liefert:

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
}

Answer 5

Zusätzlich zu den sehr guten Antworten, die jeder gepostet hat, möchte ich hinzufügen, dass die leistungsfähigste Lösung die ES6 entries . Es scheint kontraintuitiv für viele Entwickler hier, so dass ich erstellt diese Perf-Benchamrk .

Es ist ~6 mal schneller. Vor allem, weil nicht brauchen, um: a) Zugriff auf das Array mehr als einmal und, b) Cast der Index.