Dapatkan penghitung loop / indeks menggunakan untuk ... sintaks dalam JavaScript

Peringatan:

pertanyaan masih berlaku untuk for…ofloop.> Jangan gunakan for…inuntuk beralih di atas Array , gunakan untuk beralih di atas properti suatu objek. Yang mengatakan, ini

Saya mengerti bahwa for…insintaks dasar dalam JavaScript terlihat seperti ini:

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

Tapi bagaimana cara mendapatkan counter loop / indeks ?

Saya tahu saya mungkin bisa melakukan sesuatu seperti:

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

Atau bahkan yang baik:

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

Tapi saya lebih suka menggunakan for-inloop yang lebih sederhana . Saya pikir mereka terlihat lebih baik dan lebih masuk akal.

Apakah ada cara yang lebih sederhana atau lebih elegan?

Dengan Python mudah:

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

for…initerates atas nama properti, bukan nilai, dan melakukannya dalam urutan yang tidak ditentukan (ya, bahkan setelah ES6). Anda seharusnya tidak menggunakannya untuk beralih pada array. Bagi mereka, ada forEachmetode ES5 yang meneruskan nilai dan indeks ke fungsi yang Anda berikan:

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

Atau ES6 Array.prototype.entries, yang sekarang memiliki dukungan di berbagai versi browser saat ini:

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

Untuk iterables secara umum (di mana Anda akan menggunakan for…ofloop daripada a for…in), tidak ada yang built-in, namun:

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

demo

Jika Anda benar-benar bermaksud for…in- menghitung properti - Anda perlu penghitung tambahan. Object.keys(obj).forEachbisa bekerja, tetapi hanya mencakup properti sendiri ; for…intermasuk properti enumerable di mana saja di rantai prototipe.

Dalam ES6, baik untuk menggunakan for - of loop. Anda bisa mendapatkan indeks untuk seperti ini

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

Perhatikan bahwa Array.entries()mengembalikan iterator , yang memungkinkannya bekerja di for-of loop; jangan bingung dengan Object.entries () , yang mengembalikan array pasangan nilai kunci.

Bagaimana dengan ini

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

Di mana array.forEachmetode ini memiliki indexparameter yang merupakan indeks dari elemen saat ini sedang diproses dalam array.

Solusi untuk koleksi array kecil:

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

arr - ARRAY, obj - KUNCI dari elemen saat ini, i - COUNTER / INDEX

Perhatikan: Metode kunci () tidak tersedia untuk versi IE <9, Anda harus menggunakan kode Polyfill . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

For-in-loop berulang-ulang pada properti Obyek. Jangan menggunakannya untuk Array, bahkan jika kadang-kadang berfungsi.

Properti objek kemudian tidak memiliki indeks, mereka semua sama dan tidak perlu dijalankan melalui urutan yang ditentukan. Jika Anda ingin menghitung properti, Anda harus menyiapkan penghitung tambahan (seperti yang Anda lakukan pada contoh pertama).

lingkaran di atas Array:

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

loop di atas Obyek:

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

Seperti yang orang lain katakan, Anda seharusnya tidak menggunakan for..in untuk beralih ke array.

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

Jika Anda ingin sintaks yang lebih bersih, Anda bisa menggunakan forEach:

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

Jika Anda ingin menggunakan metode ini, pastikan Anda menyertakan ES5 shim untuk menambahkan dukungan untuk browser lama.

Jawaban Diberikan oleh rushUp Benar tetapi ini akan lebih nyaman

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

Inilah fungsinya eachWithIndex yang berfungsi dengan apa pun yang dapat diubah.

Anda juga bisa menulis fungsi serupa eachWithKeyyang berfungsi dengan objek menggunakan 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)

Hal yang baik dengan generator adalah bahwa mereka malas dan dapat mengambil hasil generator lain sebagai argumen.

Itu versi saya dari iterator komposit yang menghasilkan indeks dan nilai fungsi generator yang lewat dengan contoh pencarian utama (lambat):

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
}

Di atas semua jawaban yang sangat baik yang diposting semua orang, saya ingin menambahkan bahwa solusi yang paling performan adalah ES6 entries. Tampaknya kontraintuitif bagi banyak dev di sini, jadi saya membuat benchamrk perf ini .

~ 6 kali lebih cepat. Terutama karena tidak perlu: a) mengakses array lebih dari sekali dan, b) membuat indeks.