Acceso al índice del elemento de matriz ES6 dentro del ciclo for-of

Podemos acceder a los elementos de la matriz utilizando un bucle for-of:

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

¿Cómo puedo modificar este código para acceder también al índice actual? Quiero lograr esto usando la sintaxis for-of, ni forEach ni for-in.

Uso Array.prototype.keys:

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

Si desea acceder tanto a la clave como al valor, puede usarlo Array.prototype.entries()con la desestructuración :

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

Array#entries devuelve el índice y el valor, si necesita ambos:

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

}

En este mundo de nuevas y llamativas funciones nativas, a veces olvidamos lo básico.

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

Limpio, eficiente, y aún puedes seguir breakel ciclo. ¡Prima! ¡También puedes comenzar desde el final e ir hacia atrás con i--!

Nota adicional: si está utilizando mucho el valor dentro del ciclo, es posible que desee hacerlo const value = arr[i];en la parte superior del ciclo para obtener una referencia fácil y legible.

en el contexto html / js, en los navegadores modernos, con otros objetos iterables que las matrices, también podríamos usar [Iterable] .entries ():

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

    element.innerHTML = '#' + index

}

En un for..ofbucle podemos lograr esto a través de array.entries(). array.entriesdevuelve un nuevo objeto iterador de matriz. Un objeto iterador sabe cómo acceder a los elementos de uno iterable en ese momento, mientras realiza un seguimiento de su posición actual dentro de esa secuencia.

Cuando next()se llama al método en el iterador, se generan pares de valores clave. En estos pares de valores clave, el índice de matriz es la clave y el elemento de matriz es el valor.

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

UNA for..of bucle es básicamente una construcción que consume un iterable y recorre todos los elementos (usando un iterador debajo del capó). Podemos combinar esto array.entries()de la siguiente manera:

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

También puede manejar el índice usted mismo si necesita el índice , no funcionará si necesita la clave .

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

  i++;
}

Para aquellos que usan objetos que no son como una Arraymatriz, incluso pueden crear su propio iterable fácilmente para que aún puedan usarlo for ofpara cosas como las localStorageque realmente solo tienen un 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;
}

Luego solo dale un 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);
}

Otro enfoque podría 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
}

el bucle for atraviesa la matriz, mientras que la propiedad indexof toma el valor del índice que coincide con la matriz. PD: este método tiene algunos defectos con los números, así que usa frutas