Saya mencoba untuk mengulang melalui array. Saya memiliki kode berikut:

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

Sedang mencoba untuk mendapatkan semua data dari array. Bisakah seseorang menuntun saya di jalan yang benar?

(Pembaruan: Jawaban saya yang lain di sini memaparkan opsi non-jQuery jauh lebih menyeluruh. Opsi ketiga di bawah ini, jQuery.eachtidak ada di dalamnya.)

Empat opsi:

Loop umum:

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

atau di ES2015 +:

for (let i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

Keuntungan : Terus terang, tidak ada ketergantungan pada jQuery, mudah dimengerti, tidak ada masalah dengan mempertahankan makna thisdi dalam tubuh loop, tidak ada overhead panggilan fungsi yang tidak perlu (misalnya, secara teori lebih cepat, meskipun sebenarnya Anda harus memiliki begitu banyak elemen sehingga kemungkinan besar Anda akan memiliki masalah lain; detail ).

ES5 forEach:

Pada ECMAScript5, array memiliki forEachfungsi padanya yang membuatnya mudah untuk di-loop melalui array:

substr.forEach(function(item) {
    // do something with `item`
});

Tautan ke dokumen

(Catatan: Ada banyak fungsi lainnya, tidak hanya forEach; lihat jawaban yang dirujuk di atas untuk detailnya.)

Keuntungan : Deklaratif, dapat menggunakan fungsi prebuilt untuk iterator jika Anda memiliki satu berguna, jika tubuh loop Anda kompleks, pelingkupan panggilan fungsi terkadang berguna, tidak perlu untuk ivariabel dalam lingkup Anda yang berisi.

Kekurangan : Jika Anda menggunakan thiskode yang berisi dan Anda ingin menggunakan thisdalam Anda forEachcallback, Anda harus baik A) Tongkat itu dalam variabel sehingga Anda dapat menggunakannya dalam fungsi, B) Lulus sebagai argumen kedua untuk forEachjadi forEachmenetapkannya sebagai thisselama panggilan balik, atau C) Gunakan fungsi panah ES2015 + , yang ditutup this. Jika Anda tidak melakukan salah satu dari hal-hal itu, dalam panggilan balik thisakan undefined(dalam mode ketat) atau objek global ( window) dalam mode longgar. Dulu ada kerugian kedua yang forEachtidak didukung secara universal, tetapi di sini pada tahun 2018, satu-satunya browser yang akan Anda forEachtemui adalah IE8 (dan itu tidak dapat dengan benar polyfilled di sana, baik).

ES2015 + for-of:

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

Lihat jawaban yang ditautkan di bagian atas jawaban ini untuk perincian tentang cara kerjanya.

Keuntungan : Sederhana, lugas, menawarkan variabel ruang lingkup (atau konstan, di atas) untuk entri dari array.

Kekurangan : Tidak didukung dalam versi IE mana pun.

jQuery.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

( Tautan ke dokumen )

Keuntungan : Semua kelebihan yang sama dengan forEach, ditambah Anda tahu itu ada di sana karena Anda menggunakan jQuery.

Kekurangan : Jika Anda menggunakan thiskode yang berisi, Anda harus memasukkannya ke dalam variabel sehingga Anda dapat menggunakannya di dalam fungsi, karena thisberarti sesuatu yang lain di dalam fungsi.

Anda dapat menghindari thishal itu, dengan menggunakan $.proxy:

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

... atau Function#bind:

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

... atau di ES2015 ("ES6"), fungsi panah:

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

Apa yang TIDAK harus dilakukan:

Jangan gunakan for..inuntuk ini (atau jika Anda melakukannya, lakukan dengan perlindungan yang tepat). Anda akan melihat orang berkata (pada kenyataannya, secara singkat ada jawaban di sini yang mengatakan itu), tetapi for..intidak melakukan apa yang dipikirkan banyak orang (itu melakukan sesuatu yang bahkan lebih berguna!). Secara khusus, for..inloop melalui nama properti enumerable dari suatu objek (bukan indeks array). Karena array adalah objek, dan satu-satunya properti enumerable mereka secara default adalah indeks, sebagian besar tampaknya mengurutkan pekerjaan dalam penyebaran lembut. Tapi itu bukan asumsi yang aman bahwa Anda bisa menggunakannya untuk itu. Berikut ini eksplorasi: http://jsbin.com/exohi/3

Saya harus melunakkan "jangan" di atas. Jika Anda berurusan dengan array jarang (misalnya, array memiliki 15 elemen total tetapi indeks mereka bertebaran di kisaran 0 hingga 150.000 karena beberapa alasan, dan demikian lengthjuga 150.001), dan jika Anda menggunakan perlindungan yang tepat seperti hasOwnPropertydan memeriksa nama properti benar-benar numerik (lihat tautan di atas), for..inbisa menjadi cara yang masuk akal untuk menghindari banyak loop yang tidak perlu, karena hanya indeks yang dihuni yang akan disebutkan.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

iterasi array

jQuery.each(array, function(Integer index, Object value){});

pengulangan objek

jQuery.each(object, function(string propertyName, object propertyValue){});

contoh :

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

loop javascript untuk array

untuk loop

for (initialExpression; condition; incrementExpression)
  statement

contoh

var substr = [1, 2, 3, 4];

//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
  console.log("loop", substr[i])
}

//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
  console.log("reverse", substr[i])
}

//step loop
for(var i = 0; i < substr.length; i+=2) {
  console.log("step", substr[i])
}

untuk masuk

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

untuk dari

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

untuk setiap

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

Sumber daya

Loop dan iterator MDN

Tidak perlu jquery di sini, hanya satu forloop yang berfungsi:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

Opsi 1: for-loop tradisional

Dasar

for-Loop tradisional memiliki tiga komponen:

1. inisialisasi: dieksekusi sebelum blok tampilan dieksekusi pertama kali
2. kondisi: memeriksa suatu kondisi setiap kali sebelum blok loop dieksekusi, dan berhenti loop jika salah
3. afterthought: dilakukan setiap kali setelah blok loop dijalankan

Ketiga komponen ini dipisahkan satu sama lain oleh ;simbol. Konten untuk masing-masing dari ketiga komponen ini adalah opsional, yang berarti bahwa berikut ini adalah yang paling minimal for-loop mungkin:

for (;;) {
    // Do stuff
}

Tentu saja, Anda harus menyertakan if(condition === true) { break; } atau di suatu if(condition === true) { return; }tempat di dalam for-loop untuk menghentikannya.

Meskipun demikian, biasanya inisialisasi digunakan untuk mendeklarasikan indeks, kondisi ini digunakan untuk membandingkan indeks itu dengan nilai minimum atau maksimum, dan setelahnya digunakan untuk meningkatkan indeks:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Menggunakan for-loop tradtional untuk loop melalui array

Cara tradisional untuk mengulang melalui array, adalah ini:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

Atau, jika Anda lebih suka mengulang ke belakang, Anda melakukan ini:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Namun, ada banyak variasi yang mungkin, seperti misalnya. yang ini :

for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... atau yang ini ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... atau yang ini:

var key = 0, value;
for (; value = myArray[key++];){ 
    console.log(value);
}

Mana yang paling berhasil adalah masalah selera pribadi dan kasus penggunaan khusus yang Anda laksanakan.

Masing-masing variasi ini didukung oleh semua browser, termasuk yang lama!

Opsi 2: while-loop

Salah satu alternatif untuk for-loop adalah while-loop. Untuk mengulang melalui array, Anda bisa melakukan ini:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Seperti for-loops tradisional , while-Lop didukung bahkan oleh browser tertua.

Juga, setiap loop sementara dapat ditulis ulang sebagai for-loop. Sebagai contoh, while-loop di sini berperilaku sama persis seperti ini for-loop:

for(var key = 0;value = myArray[key++];){
    console.log(value);
}

Opsi 3: for...indanfor...of

Dalam JavaScript, Anda juga dapat melakukan ini:

for (i in myArray) {
    console.log(myArray[i]);
}

Ini harus digunakan dengan hati-hati, bagaimanapun, karena tidak berperilaku sama dengan tradisional for-lingkungan dalam semua kasus, dan ada efek samping potensial yang perlu dipertimbangkan. Lihat Mengapa menggunakan "untuk ... dalam" dengan iterasi array adalah ide yang buruk? untuk lebih jelasnya.

Sebagai alternatif for...in, sekarang ada juga untuk for...of. Contoh berikut menunjukkan perbedaan antara for...ofloop dan for...inloop:

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Anda juga perlu mempertimbangkan bahwa tidak ada versi Internet Explorer yang mendukung for...of( Edge 12+ tidak) dan yang for...inmemerlukan setidaknya IE10.

Opsi 4: Array.prototype.forEach()

Alternatif untuk For-loops adalah Array.prototype.forEach(), yang menggunakan sintaks berikut:

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach() didukung oleh semua browser modern, serta IE9 +.

Opsi 5: jQuery.each()

Selain empat opsi lain yang disebutkan, jQuery juga memiliki foreachvariasi sendiri .

Ini menggunakan sintaks berikut:

$.each(myArray, function(key, value) {
    console.log(value);
});

Gunakan each()fungsi jQuery.

Berikut ini sebuah contoh:

$.each(currnt_image_list.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});

Gunakan jQuery each(). Ada cara lain tetapi masing-masing dirancang untuk tujuan ini.

$.each(substr, function(index, value) { 
  alert(value); 
});

Dan jangan menaruh koma setelah nomor terakhir.

Anda dapat menggunakan for()loop:

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

Sintaks ES6 dengan fungsi panah dan interpolasi:

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

Coba ini:

$.grep(array, function(element) {

})

Cara alternatif pengulangan melalui array / string dengan efek samping

var str = '21,32,234,223';
var substr = str.split(',');

substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined

substr.every(x=> { console.log('every',x); return true}) // return true

substr.some(x=> { console.log('some',x); return false})  // return false

substr.map(x=> console.log('map',x));                    // return array
 
str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string