Dostęp do indeksu elementów tablicy ES6 wewnątrz pętli for-of

Możemy uzyskać dostęp do elementów tablicy za pomocą pętli for-of:

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

Jak mogę zmodyfikować ten kod, aby uzyskać dostęp do bieżącego indeksu? Chcę to osiągnąć przy użyciu składni for-of, ani forEach, ani for-in.

Użyj Array.prototype.keys:

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

Jeśli chcesz uzyskać dostęp zarówno do klucza, jak i do wartości, możesz użyć Array.prototype.entries()z destrukcją :

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

Array#entries zwraca indeks i wartość, jeśli potrzebujesz obu:

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

}

W tym świecie efektownych nowych natywnych funkcji czasami zapominamy o podstawach.

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

Czysty, wydajny i nadal możesz breakzapętlić. Premia! Możesz także zacząć od końca i cofnąć się oi-- !

Uwaga dodatkowa: jeśli często używasz wartości w pętli, możesz chcieć zrobić const value = arr[i];na górze pętli, aby uzyskać łatwe i czytelne odniesienie.

w kontekście html / js, w nowoczesnych przeglądarkach, z innymi obiektami iterowalnymi niż tablice moglibyśmy również użyć [Iterable] .entries ():

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

    element.innerHTML = '#' + index

}

W for..ofpętli możemy to osiągnąć poprzez array.entries(). array.entrieszwraca nowy obiekt iteratora Array. Obiekt iteratora wie, jak uzyskać dostęp do elementów z iterowalnego w tym samym czasie, jednocześnie śledząc jego bieżącą pozycję w tej sekwencji.

Po next()wywołaniu metody generowane są pary wartości iteratora. W tych parach wartości klucza indeks tablicy jest kluczem, a element tablicy jest wartością.

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

for..ofPętli jest zasadniczo konstruktem, który zużywa iterowalny i pętle przez wszystkie elementy (z zastosowaniem iteracyjnej pod wyciągiem). Możemy to połączyć array.entries()w następujący sposób:

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

Możesz także samodzielnie obsługiwać indeks, jeśli potrzebujesz indeksu , nie będzie działać, jeśli potrzebujesz klucza .

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

  i++;
}

Dla tych, którzy używają obiektów, które nie są Arrayani nawet podobne do tablicy, możesz łatwo zbudować własną iterowalność, dzięki czemu nadal możesz używać for ofdo rzeczy takich, localStoragektóre naprawdę mają tylko 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;
}

Następnie podaj numer:

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

Innym podejściem może być użycie Array.prototype.forEach()jako

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
}

pętla for przechodzi przez tablicę, a właściwość indexof przyjmuje wartość indeksu pasującego do tablicy. PD ta metoda ma pewne wady z liczbami, więc używaj owoców