Peringatan:
pertanyaan masih berlaku untuk
for…of
loop.> Jangan gunakanfor…in
untuk beralih di atas Array , gunakan untuk beralih di atas properti suatu objek. Yang mengatakan, ini
Saya mengerti bahwa for…in
sintaks 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-in
loop 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
javascript
for-loop
foreach
counter
hobbes3
sumber
sumber
alert(obj)
,?Jawaban:
for…in
iterates 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, adaforEach
metode ES5 yang meneruskan nilai dan indeks ke fungsi yang Anda berikan:Atau ES6
Array.prototype.entries
, yang sekarang memiliki dukungan di berbagai versi browser saat ini:Untuk iterables secara umum (di mana Anda akan menggunakan
for…of
loop daripada afor…in
), tidak ada yang built-in, namun:demo
Jika Anda benar-benar bermaksud
for…in
- menghitung properti - Anda perlu penghitung tambahan.Object.keys(obj).forEach
bisa bekerja, tetapi hanya mencakup properti sendiri ;for…in
termasuk properti enumerable di mana saja di rantai prototipe.sumber
let
s adalahvar
dengan cakupan blok.const
s tidak berubah.%d
memformat integer dan%s
memformat string. Mereka didasarkan pada printf . Sebuah spesifikasi sedang dalam proses di console.spec.whatwg.org/#formatter .Dalam ES6, baik untuk menggunakan for - of loop. Anda bisa mendapatkan indeks untuk seperti ini
Perhatikan bahwa
Array.entries()
mengembalikan iterator , yang memungkinkannya bekerja di for-of loop; jangan bingung dengan Object.entries () , yang mengembalikan array pasangan nilai kunci.sumber
entries()
adalah kembali obyek kosong:{}
. Adakah yang tahu mengapa itu terjadi? Myarray
adalah Array of Objects.Object.entries(array)
alih-aliharray.entries()
next()
metode yang akan mengembalikan entri berikutnya dalam array setiap kali dipanggil. Tidak ada data (terlihat) di dalamnya; Anda mendapatkan data di objek yang mendasarinya dengan meneleponnext()
, yang memang dilakukan di belakang layar. cc @tonygBagaimana dengan ini
Di mana
array.forEach
metode ini memilikiindex
parameter yang merupakan indeks dari elemen saat ini sedang diproses dalam array.sumber
break
tidak tersedia.Solusi untuk koleksi array kecil:
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
sumber
var i = 0;
dani++;
lebih pendek dan lebih efisien. Plus itu tidak berfungsi untuk properti yang dapat dihitung yang bukan properti miliknya.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:
loop di atas Obyek:
sumber
(var i=0; i<a.length; i++)
sebagai sumber daya yang terbuang. Gunakan(var i=0, var len = a.length; i<len; i++)
var i=0; i<a.length; i++)
merupakan pola loop standar yang dioptimalkan oleh setiap mesin javascript yang layak pula.var i=0; i<a.length; i++
ini praktik terbaik.Seperti yang orang lain katakan, Anda seharusnya tidak menggunakan for..in untuk beralih ke array.
Jika Anda ingin sintaks yang lebih bersih, Anda bisa menggunakan forEach:
Jika Anda ingin menggunakan metode ini, pastikan Anda menyertakan ES5 shim untuk menambahkan dukungan untuk browser lama.
sumber
Jawaban Diberikan oleh rushUp Benar tetapi ini akan lebih nyaman
sumber
Inilah fungsinya
eachWithIndex
yang berfungsi dengan apa pun yang dapat diubah.Anda juga bisa menulis fungsi serupa
eachWithKey
yang berfungsi dengan objek menggunakanfor...in
.Hal yang baik dengan generator adalah bahwa mereka malas dan dapat mengambil hasil generator lain sebagai argumen.
sumber
Itu versi saya dari iterator komposit yang menghasilkan indeks dan nilai fungsi generator yang lewat dengan contoh pencarian utama (lambat):
sumber
eachWithIndex[Symbol.iterator]
bukan hanya fungsieachWithIndex
?eachWithIndex
tidak memenuhi antarmuka iterable, yang merupakan inti dariSymbol.iterator
.eachWithIndex
untuk menerima iterable dan mengembalikan iterable komposit tertutup.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.
sumber