Accesso all'indice dell'elemento dell'array ES6 all'interno del ciclo for-of

Possiamo accedere agli elementi dell'array usando un ciclo for-of:

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

Come posso modificare questo codice per accedere anche all'indice corrente? Voglio ottenere questo usando la sintassi for-of, né forEach né for-in.

Utilizzare Array.prototype.keys:

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

Se si desidera accedere sia alla chiave che al valore, è possibile utilizzare Array.prototype.entries()con destrutturazione :

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

Array#entries restituisce l'indice e il valore, se sono necessari entrambi:

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

}

In questo mondo di appariscenti nuove funzioni native, a volte dimentichiamo le basi.

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

Pulito, efficiente e puoi ancora fare breakil giro. Bonus! Puoi anche iniziare dalla fine e tornare indietro con i--!

Nota aggiuntiva: se si utilizza molto il valore all'interno del ciclo, si consiglia di farlo const value = arr[i];nella parte superiore del ciclo per un riferimento facile e leggibile.

nel contesto html / js, sui browser moderni, con altri oggetti iterabili oltre agli array potremmo anche usare [Iterable] .entries ():

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

    element.innerHTML = '#' + index

}

In un for..ofciclo possiamo raggiungere questo tramite array.entries(). array.entriesrestituisce un nuovo oggetto iteratore di array. Un oggetto iteratore sa come accedere agli oggetti da uno iterabile alla volta, tenendo traccia della sua posizione corrente all'interno di quella sequenza.

Quando il next()metodo viene chiamato, vengono generate le coppie di valori chiave dell'iteratore. In queste coppie di valori chiave l' indice dell'array è la chiave e l'elemento dell'array è il valore.

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

Un for..ofloop è fondamentalmente un costrutto che consuma un iterabile e scorre attraverso tutti gli elementi (usando un iteratore sotto il cofano). Possiamo combinarlo con array.entries()nel modo seguente:

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

Puoi anche gestire tu stesso l'indice se hai bisogno dell'indice , non funzionerà se ti serve la chiave .

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

  i++;
}

Per coloro che usano oggetti che non sono Arrayo addirittura simili a array, puoi creare facilmente il tuo iterabile in modo da poterlo ancora usare for ofper cose come quelle localStorageche hanno solo 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;
}

Quindi basta dargli un numero:

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

Un altro approccio potrebbe essere usare Array.prototype.forEach()come

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
}

il ciclo for attraversa l'array, mentre la proprietà indexof assume il valore dell'indice che corrisponde all'array. PD questo metodo ha alcuni difetti con i numeri, quindi usa la frutta