Récupère le compteur / index de boucle en utilisant for… de la syntaxe en JavaScript

Mise en garde:

question s'applique toujours aux for…ofboucles.> Ne pas utiliser for…inpour itérer sur un tableau , utilisez-le pour itérer sur les propriétés d'un objet. Cela dit, ce

Je comprends que la for…insyntaxe de base en JavaScript ressemble à ceci:

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

Mais comment obtenir le compteur / index de boucle ?

Je sais que je pourrais probablement faire quelque chose comme:

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

Ou même le bon vieux:

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

Mais je préfère utiliser la for-inboucle plus simple . Je pense qu'ils sont plus beaux et plus sensés.

Existe-t-il une manière plus simple ou plus élégante?

En Python, c'est simple:

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

for…initère sur les noms de propriété, pas sur les valeurs, et le fait dans un ordre non spécifié (oui, même après ES6). Vous ne devez pas l'utiliser pour parcourir les tableaux. Pour eux, il y a la forEachméthode ES5 qui transmet à la fois la valeur et l'index à la fonction que vous lui donnez:

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

Ou ES6 Array.prototype.entries, qui prend désormais en charge les versions de navigateur actuelles:

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

Pour les itérables en général (où vous utiliseriez une for…ofboucle plutôt qu'une for…in), il n'y a cependant rien de intégré:

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);
}

démo

Si vous vouliez réellement for…in- énumérer les propriétés - vous auriez besoin d'un compteur supplémentaire. Object.keys(obj).forEachpourrait fonctionner, mais il ne comprend que ses propres propriétés; for…ininclut des propriétés énumérables n'importe où sur la chaîne du prototype.

Dans ES6, il est bon d'utiliser la boucle for-of. Vous pouvez obtenir un index pour comme ceci

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

Notez que Array.entries()retourne un itérateur , ce qui lui permet de fonctionner dans la boucle for-of; ne confondez pas cela avec Object.entries () , qui retourne un tableau de paires clé-valeur.

Que dis-tu de ça

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

Où array.forEachcette méthode a un indexparamètre qui est l'index de l'élément en cours de traitement dans le tableau.

Solution pour les collections de petites baies:

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

arr - ARRAY, obj - KEY of current element, i - COUNTER / INDEX

Remarque: les clés de méthode () ne sont pas disponibles pour IE version <9, vous devez utiliser le code Polyfill . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Les boucles en boucle parcourent les propriétés d'un objet. Ne les utilisez pas pour les tableaux, même s'ils fonctionnent parfois.

Les propriétés des objets n'ont alors pas d'index, elles sont toutes égales et n'ont pas besoin d'être parcourues dans un ordre déterminé. Si vous souhaitez compter les propriétés, vous devrez configurer le compteur supplémentaire (comme vous l'avez fait dans votre premier exemple).

boucle sur un tableau:

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

boucle sur un objet:

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

Comme d'autres l'ont dit, vous ne devriez pas utiliser for..in pour parcourir un tableau.

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

Si vous voulez une syntaxe plus propre, vous pouvez utiliser forEach:

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

Si vous souhaitez utiliser cette méthode, assurez-vous d'inclure le module d'interface ES5 pour ajouter la prise en charge des anciens navigateurs.

La réponse donnée par rushUp est correcte mais ce sera plus pratique

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

Voici une fonction eachWithIndex qui fonctionne avec tout ce qui est itérable.

Vous pouvez également écrire une fonction similaire eachWithKeyqui fonctionne avec des objets utilisant 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)

La bonne chose avec les générateurs est qu'ils sont paresseux et peuvent prendre comme argument le résultat d'un autre générateur.

C'est ma version d'un itérateur composite qui produit un index et la valeur de toute fonction de générateur passée avec un exemple de recherche principale (lente):

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
}

En plus des très bonnes réponses que tout le monde a postées, je veux ajouter que la solution la plus performante est l'ES6 entries. Cela semble contre-intuitif pour de nombreux développeurs ici, alors j'ai créé ce benchamrk de perf .

C'est ~ 6 fois plus rapide. Principalement parce qu'il n'est pas nécessaire: a) d'accéder au tableau plus d'une fois et, b) de lancer l'index.