Obtenga un contador / índice de bucle usando para ... de sintaxis en JavaScript

Precaución:

la pregunta todavía se aplica a los for…ofbucles.> No use for…inpara iterar sobre una matriz , úsela para iterar sobre las propiedades de un objeto. Dicho esto, esto

Entiendo que la for…insintaxis básica en JavaScript se ve así:

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

Pero, ¿cómo obtengo el contador / índice de bucle ?

Sé que probablemente podría hacer algo como:

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

O incluso los buenos viejos:

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

Pero prefiero usar el for-inbucle más simple . Creo que se ven mejor y tienen más sentido.

¿Hay una manera más simple o más elegante?

En Python es fácil:

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

for…initera sobre nombres de propiedades, no valores, y lo hace en un orden no especificado (sí, incluso después de ES6). No debe usarlo para iterar sobre matrices. Para ellos, existe el forEachmétodo de ES5 que pasa tanto el valor como el índice a la función que le asigna:

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

O ES6 Array.prototype.entries, que ahora es compatible con las versiones actuales del navegador:

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

Sin embargo, para iterables en general (donde usaría un for…ofbucle en lugar de a for…in), no hay nada incorporado:

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

manifestación

Si realmente for…inquisiera decir , enumerar propiedades, necesitaría un contador adicional. Object.keys(obj).forEachpodría funcionar, pero solo incluye propiedades propias ; for…inincluye propiedades enumerables en cualquier parte de la cadena del prototipo.

En ES6, es bueno usar para - de bucle. Puede obtener un índice de esta manera

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

Tenga en cuenta que Array.entries()devuelve un iterador , que es lo que le permite trabajar en el ciclo for-of; no confunda esto con Object.entries () , que devuelve una matriz de pares clave-valor.

Qué tal esto

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

Donde array.forEacheste método tiene un indexparámetro que es el índice del elemento actual que se procesa en la matriz.

Solución para colecciones de matriz pequeña:

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

arr - ARRAY, obj - CLAVE del elemento actual, i - CONTADOR / ÍNDICE

Aviso: las teclas de método () no están disponibles para IE versión <9, debe usar el código Polyfill . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

For-in-loops itera sobre las propiedades de un objeto. No los use para matrices, incluso si a veces funcionan.

Las propiedades de los objetos no tienen índice, son todas iguales y no es necesario ejecutarlas en un orden determinado. Si desea contar las propiedades, deberá configurar el contador adicional (como lo hizo en su primer ejemplo).

bucle sobre una matriz:

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

recorrer un objeto:

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

Como otros han dicho, no deberías usar for..in para iterar sobre una matriz.

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

Si desea una sintaxis más limpia, puede usar forEach:

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

Si desea utilizar este método, asegúrese de incluir la cuña ES5 para agregar compatibilidad con navegadores más antiguos.

Respuesta dada por rushUp es correcta pero esto será más conveniente

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

Aquí hay una función eachWithIndexque funciona con cualquier cosa iterable.

También podría escribir una función similar eachWithKeyque funcione con objetos usando 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)

Lo bueno de los generadores es que son flojos y pueden tomar el resultado de otro generador como argumento.

Esa es mi versión de un iterador compuesto que produce un índice y cualquier valor pasado de la función del generador con un ejemplo de búsqueda primaria (lenta):

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
}

Además de las muy buenas respuestas que todos publicaron, quiero agregar que la solución más eficiente es el ES6 entries. Parece contradictorio para muchos desarrolladores aquí, así que creé este perf benchamrk .

Es ~ 6 veces más rápido. Principalmente porque no necesita: a) acceder a la matriz más de una vez y, b) emitir el índice.