Pobierz licznik / indeks pętli za pomocą… składni w JavaScript

Uwaga:

pytanie nadal dotyczy for…ofpętli.> Nie używaj for…indo iteracji po tablicy , użyj go do iteracji po właściwościach obiektu. To powiedziawszy to

Rozumiem, że podstawowa for…inskładnia w JavaScript wygląda następująco:

for (var obj in myArray) {
    // ...
}

Ale jak uzyskać licznik / indeks pętli ?

Wiem, że prawdopodobnie mógłbym zrobić coś takiego:

var i = 0;
for (var obj in myArray) {
    alert(i)
    i++
}

Lub nawet stary dobry:

for (var i = 0; i < myArray.length; i++) {
    var obj = myArray[i]
    alert(i)
}

Wolałbym jednak użyć prostszej for-inpętli. Myślę, że wyglądają lepiej i mają więcej sensu.

Czy istnieje prostszy lub bardziej elegancki sposób?

W Pythonie jest to łatwe:

for i, obj in enumerate(myArray):
    print i

for…initeruje nazwy właściwości, a nie wartości, i robi to w nieokreślonej kolejności (tak, nawet po ES6). Nie należy go używać do iteracji po tablicach. Dla nich istnieje forEachmetoda ES5, która przekazuje zarówno wartość, jak i indeks do funkcji, którą dajesz:

var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32

Lub ES6 Array.prototype.entries, który ma teraz obsługę we wszystkich wersjach przeglądarki:

for (const [i, value] of myArray.entries()) {
    console.log('%d: %s', i, value);
}

Jednak w przypadku iteracji (gdzie for…ofzamiast pętli użyłbyś pętli for…in), nie ma nic wbudowanego:

function* enumerate(iterable) {
    let i = 0;

    for (const x of iterable) {
        yield [i, x];
        i++;
    }
}

for (const [i, obj] of enumerate(myArray)) {
    console.log(i, obj);
}

próbny

Jeśli naprawdę miałeś na myśli for…in- wyliczanie właściwości - potrzebujesz dodatkowego licznika. Object.keys(obj).forEachmoże działać, ale obejmuje tylko własne właściwości; for…inzawiera wyliczalne właściwości w dowolnym miejscu łańcucha prototypu.

W ES6 dobrze jest używać pętli -. Możesz uzyskać indeks dla tego typu

for (let [index, val] of array.entries()) {
        // your code goes here    
}

Zauważ, że Array.entries()zwraca iterator , który pozwala mu pracować w pętli for-of; nie myl tego z Object.entries () , która zwraca tablicę par klucz-wartość.

Co powiesz na to

let numbers = [1,2,3,4,5]
numbers.forEach((number, index) => console.log(`${index}:${number}`))

Gdzie array.forEachta metoda ma indexparametr będący indeksem bieżącego elementu przetwarzanego w tablicy.

Rozwiązanie dla małych kolekcji tablic:

for (var obj in arr) {
    var i = Object.keys(arr).indexOf(obj);
}

arr - ARRAY, obj - KLUCZ bieżącego elementu, i - LICZNIK / INDEKS

Uwaga: Metoda keys () nie jest dostępna dla wersji IE <9, powinieneś użyć kodu Polyfill . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Pętle dla pętli iterują właściwości obiektu. Nie używaj ich do tablic, nawet jeśli czasami działają.

Właściwości obiektu nie mają wówczas indeksu, wszystkie są równe i nie trzeba ich przeglądać w określonej kolejności. Jeśli chcesz policzyć właściwości, będziesz musiał ustawić dodatkowy licznik (tak jak w pierwszym przykładzie).

zapętlić tablicę:

var a = [];
for (var i=0; i<a.length; i++) {
    i // is the index
    a[i] // is the item
}

zapętlić obiekt:

var o = {};
for (var prop in o) {
    prop // is the property name
    o[prop] // is the property value - the item
}

Jak powiedzieli inni, nie powinieneś używać for..in do iteracji po tablicy.

for ( var i = 0, len = myArray.length; i < len; i++ ) { ... }

Jeśli chcesz czystszej składni, możesz użyć forEach:

myArray.forEach( function ( val, i ) { ... } );

Jeśli chcesz skorzystać z tej metody, upewnij się, że dołączasz podkładkę ES5, aby dodać obsługę starszych przeglądarek.

Odpowiedź udzielona przez rushUp jest poprawna, ale będzie to wygodniejsze

for (let [index, val] of array.entries() || []) {
   // your code goes here    
}

Oto funkcja, eachWithIndexktóra działa ze wszystkim, co można powtórzyć.

Możesz także napisać podobną funkcję eachWithKey która działa z użyciem objets for...in.

// example generator (returns an iterator that can only be iterated once)
function* eachFromTo(start, end) { for (let i = start; i <= end; i++) yield i }

// convers an iterable to an array (potential infinite loop)
function eachToArray(iterable) {
    const result = []
    for (const val of iterable) result.push(val)
    return result
}

// yields every value and index of an iterable (array, generator, ...)
function* eachWithIndex(iterable) {
    const shared = new Array(2)
    shared[1] = 0
    for (shared[0] of iterable) {
        yield shared
        shared[1]++
    }
}

console.log('iterate values and indexes from a generator')
for (const [val, i] of eachWithIndex(eachFromTo(10, 13))) console.log(val, i)

console.log('create an array')
const anArray = eachToArray(eachFromTo(10, 13))
console.log(anArray)

console.log('iterate values and indexes from an array')
for (const [val, i] of eachWithIndex(anArray)) console.log(val, i)

Zaletą generatorów jest to, że są leniwi i mogą brać argument innego generatora jako argument.

To jest moja wersja iteratora złożonego, która daje indeks i wartość przekazanej funkcji generatora z przykładem (wolnego) wyszukiwania pierwszego:

const eachWithIndex = (iterable) => {
  return {
    *[Symbol.iterator]() {
      let i = 0
      for(let val of iteratable) {
        i++
          yield [i, val]
      }
    }
  }

}

const isPrime = (n) => {
  for (i = 2; i < Math.floor(Math.sqrt(n) + 1); i++) {
    if (n % i == 0) {
      return false
    }
  }
  return true
}

let primes = {
  *[Symbol.iterator]() {
    let candidate = 2
    while (true) {
      if (isPrime(candidate)) yield candidate
        candidate++
    }
  }
}

for (const [i, prime] of eachWithIndex(primes)) {
  console.log(i, prime)
  if (i === 100) break
}

Oprócz bardzo dobrych odpowiedzi, które wszyscy napisali, chcę dodać, że najbardziej wydajnym rozwiązaniem jest ES6 entries. Wydaje się, że dla wielu deweloperów jest to kontrowersyjne , więc stworzyłem ten doskonały benchmark .

Jest ~ 6 razy szybszy. Głównie dlatego, że nie musi: a) uzyskiwać dostępu do tablicy więcej niż raz i b) rzutować indeks.