Acesso ao índice de elemento de matriz ES6 dentro do loop for-of

Podemos acessar elementos do array usando um loop for-of:

for (const j of [1, 2, 3, 4, 5]) {
  console.log(j);
}

Como posso modificar esse código para acessar também o índice atual? Quero conseguir isso usando a sintaxe for-of, nem forEach nem for-in.

Use Array.prototype.keys:

for (const index of [1, 2, 3, 4, 5].keys()) {
  console.log(index);
}

Se você deseja acessar a chave e o valor, pode usar Array.prototype.entries()com a desestruturação :

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
  console.log(index, value);
}

Array#entries retorna o índice e o valor, se você precisar de ambos:

for (let [index, value] of array.entries()) {

}

Nesse mundo de novas funções nativas chamativas, às vezes esquecemos o básico.

for (let i = 0; i < arr.length; i++) {
    console.log('index:', i, 'element:', arr[i]);
}

Limpo, eficiente e você ainda pode fazer breako loop. Bônus! Você também pode começar do final e retroceder i--!

Nota adicional: se você estiver usando muito o valor dentro do loop, convém fazer isso const value = arr[i];na parte superior do loop para obter uma referência fácil e legível.

no contexto html / js, em navegadores modernos, com outros objetos iteráveis ​​que Arrays, também poderíamos usar [Iterable] .entries ():

for(let [index, element] of document.querySelectorAll('div').entries()) {

    element.innerHTML = '#' + index

}

Em um for..ofloop, podemos conseguir isso via array.entries(). array.entriesretorna um novo objeto iterador de matriz. Um objeto iterador sabe como acessar itens de um iterável por vez, mantendo o controle de sua posição atual nessa sequência.

Quando o next()método é chamado no iterador, os pares de valores de chave são gerados. Nesses pares de valores-chave, o índice da matriz é a chave e o item da matriz é o valor.

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']

Um for..ofloop é basicamente uma construção que consome um iterável e percorre todos os elementos (usando um iterador sob o capô). Podemos combinar isso array.entries()da seguinte maneira:

array = ['a', 'b', 'c'];

for (let indexValue of array.entries()) {
  console.log(indexValue);
}


// we can use array destructuring to conveniently
// store the index and value in variables
for (let [index, value] of array.entries()) {
   console.log(index, value);
}

Você também pode lidar com o índice se precisar do índice ; ele não funcionará se você precisar da chave .

let i = 0;
for (const item of iterableItems) {
  // do something with index
  console.log(i);

  i++;
}

Para aqueles que usam objetos que não são Arrayparecidos com um array ou mesmo com array, você pode criar seu próprio iterável facilmente para continuar usando for ofcoisas como as localStorageque realmente têm apenas length:

function indexerator(length) {
    var output = new Object();
    var index = 0;
    output[Symbol.iterator] = function() {
        return {next:function() {
            return (index < length) ? {value:index++} : {done:true};
        }};
    };
    return output;
}

Em seguida, basta alimentar um número:

for (let index of indexerator(localStorage.length))
    console.log(localStorage.key(index))

es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}

Outra abordagem poderia estar usando Array.prototype.forEach()como

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, index)
})

var fruits = ["apple","pear","peach"];
for (fruit of fruits) {
    console.log(fruits.indexOf(fruit));
    //it shows the index of every fruit from fruits
}

o loop for percorre a matriz, enquanto a propriedade indexof obtém o valor do índice que corresponde à matriz. PD este método tem algumas falhas com números, então use frutas