Obter contador / índice de loop usando a sintaxe for… em JavaScript

Cuidado:

a pergunta ainda se aplica aos for…ofloops.> Não use for…inpara iterar sobre uma matriz , use-o para iterar sobre as propriedades de um objeto. Dito isto, este

Entendo que a for…insintaxe básica do JavaScript se parece com isso:

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

Mas como obtenho o contador / índice de loop ?

Eu sei que provavelmente poderia fazer algo como:

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

Ou até o bom e velho:

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

Mas eu prefiro usar o for-inloop mais simples . Eu acho que eles parecem melhores e fazem mais sentido.

Existe uma maneira mais simples ou mais elegante?

No Python, é fácil:

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

for…initera sobre nomes de propriedades, não valores, e faz isso em uma ordem não especificada (sim, mesmo depois do ES6). Você não deve usá-lo para iterar sobre matrizes. Para eles, existe o forEachmétodo do ES5 que passa o valor e o índice para a função que você atribui:

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, que agora tem suporte nas versões atuais do navegador:

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

Para iterables em geral (onde você usaria um for…ofloop em vez de a for…in), no entanto, não há nada embutido:

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

demonstração

Se você realmente quis dizer for…in- enumerando propriedades - seria necessário um contador adicional. Object.keys(obj).forEachpoderia funcionar, mas inclui apenas propriedades próprias ; for…ininclui propriedades enumeráveis ​​em qualquer lugar da cadeia de protótipos.

No ES6, é bom usar o loop for - of. Você pode obter um índice como este

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

Observe que Array.entries()retorna um iterador , que é o que permite que ele funcione no loop for-of; não confunda isso com Object.entries () , que retorna uma matriz de pares de valores-chave.

Que tal agora

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

Onde array.forEacheste método possui um indexparâmetro que é o índice do elemento atual sendo processado na matriz.

Solução para pequenas coleções de matrizes:

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

arr - ARRAY, obj - CHAVE do elemento atual, i - COUNTER / INDEX

Aviso: Teclas de método () não estão disponíveis para a versão IE <9, você deve usar o código Polyfill . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Os loops de entrada iteram sobre as propriedades de um objeto. Não os use para matrizes, mesmo que elas funcionem algumas vezes.

As propriedades do objeto não têm índice, são todas iguais e não precisam ser executadas em uma ordem determinada. Se você quiser contar propriedades, precisará configurar o contador extra (como fez no seu primeiro exemplo).

loop sobre uma matriz:

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

loop sobre um objeto:

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

Como outros já disseram, você não deve usar for..in para iterar sobre uma matriz.

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

Se você deseja uma sintaxe mais limpa, pode usar o forEach:

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

Se você deseja usar esse método, inclua o calço ES5 para adicionar suporte a navegadores mais antigos.

Resposta dada por rushUp Está correto, mas isso será mais conveniente

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

Aqui está uma função eachWithIndex que funciona com qualquer coisa iterável.

Você também pode escrever uma função semelhante eachWithKeyque funcione com 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)

O bom dos geradores é que eles são preguiçosos e podem aceitar o resultado de outro gerador como argumento.

Essa é a minha versão de um iterador composto que gera um índice e o valor de qualquer função de gerador passada com um exemplo de pesquisa principal (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
}

Além das respostas muito boas que todos postaram, quero acrescentar que a solução com melhor desempenho é o ES6 entries. Parece contra- intuitivo para muitos desenvolvedores aqui, então eu criei esse perf benchamrk .

É ~ 6 vezes mais rápido. Principalmente porque não precisa: a) acessar a matriz mais de uma vez e b) converter o índice.