Zugriff auf den ES6-Array-Elementindex innerhalb der for-of-Schleife

Wir können mit einer for-of-Schleife auf Array-Elemente zugreifen:

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

Wie kann ich diesen Code ändern, um auch auf den aktuellen Index zuzugreifen? Ich möchte dies mit der For-of-Syntax erreichen, weder mit forEach noch mit for-in.

Verwendung Array.prototype.keys:

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

Wenn Sie zugreifen möchten sowohl den Schlüssel und den Wert, können Sie Array.prototype.entries()mit Destrukturierung :

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

Array#entries Gibt den Index und den Wert zurück, wenn Sie beide benötigen:

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

}

In dieser Welt auffälliger neuer nativer Funktionen vergessen wir manchmal die Grundlagen.

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

Sauber, effizient und Sie können immer noch breakdie Schleife. Bonus! Sie können auch am Ende beginnen und rückwärts gehen mit i--!

Zusätzlicher Hinweis: Wenn Sie den Wert häufig in der Schleife verwenden, möchten Sie möglicherweise const value = arr[i];oben in der Schleife eine einfache, lesbare Referenz erstellen.

Im HTML / JS-Kontext können wir in modernen Browsern mit anderen iterierbaren Objekten als Arrays auch [Iterable] .entries () verwenden:

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

    element.innerHTML = '#' + index

}

In einer for..ofSchleife können wir dies über erreichen array.entries(). array.entriesGibt ein neues Array-Iteratorobjekt zurück. Ein Iteratorobjekt kann von einem iterierbaren Objekt aus auf Elemente zugreifen, während es seine aktuelle Position innerhalb dieser Sequenz verfolgt.

Beim next()Aufruf der Methode werden auf dem Iterator Schlüsselwertpaare generiert. In diesen Schlüsselwertpaaren ist der Array- Index der Schlüssel und das Array-Element der Wert.

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

Eine for..ofSchleife ist im Grunde ein Konstrukt, das eine Iterierbarkeit verbraucht und alle Elemente durchläuft (unter Verwendung eines Iterators unter der Haube). Wir können dies array.entries()folgendermaßen kombinieren :

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

Sie können den Index auch selbst bearbeiten, wenn Sie den Index benötigen . Wenn Sie den Schlüssel benötigen, funktioniert er nicht .

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

  i++;
}

Für diejenigen, die Objekte verwenden, die nicht Arrayoder sogar Array-ähnlich sind, können Sie einfach Ihre eigene iterierbare erstellen, sodass Sie sie weiterhin for offür Dinge verwenden können, localStoragedie wirklich nur Folgendes haben 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;
}

Dann füttere es einfach mit einer Nummer:

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

Ein anderer Ansatz könnte Array.prototype.forEach()as verwenden

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
}

Die for-Schleife durchläuft das Array, während die indexof-Eigenschaft den Wert des Index annimmt, der mit dem Array übereinstimmt. PD Diese Methode hat einige Fehler mit Zahlen, also verwenden Sie Früchte