Bir dizi üzerinden döngü çalışıyorum. Takip koduna sahibim:

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

Diziden tüm verileri almaya çalışıyorum. Bazıları beni doğru yola yönlendirebilir mi?

(Güncelleme: Buradaki diğer cevabım jQuery olmayan seçenekleri çok daha ayrıntılı bir şekilde ortaya koyuyor. Aşağıdaki üçüncü seçenek jQuery.each, bunun içinde değil.)

Dört seçenek:

Genel döngü:

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

veya ES2015 + 'da:

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

Avantajları : Düz ileri, jQuery'ye bağımlılık yok, anlaşılması kolay this, döngü gövdesinin anlamını koruma ile ilgili hiçbir sorun yok, işlev çağrılarının gereksiz ek yükü yok (örneğin, teoride daha hızlı, ancak aslında O kadar çok unsurunuz var ki, olasılıklar başka problemleriniz olacaktır; ayrıntılar ).

ES5'ler forEach:

ECMAScript5'ten itibaren, dizilerin forEachüzerinde dizi arasında döngü yapmayı kolaylaştıran bir işlevi vardır:

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

Dokümanlara bağlantı

(Not: Sadece pek çok başka işlev de vardır forEach; ayrıntılar için yukarıda belirtilen yanıta bakın.)

Avantajları : Bildirici, kullanışlı bir tane varsa, yineleyici için önceden oluşturulmuş bir işlevi kullanabilir, döngü gövdeniz karmaşıksa, bir işlev çağrısının kapsamı bazen yararlıdır, ikapsama alanınızdaki bir değişkene gerek yoktur .

Dezavantajları : Eğer thisiçeren kodu kullanıyorsanız ve geri arama thisiçinde kullanmak forEachistiyorsanız, A) bir değişkene yapıştırmanız gerekir, böylece fonksiyon içinde kullanabilirsiniz, B) Bunu ikinci bir argüman olarak forEachgeçirin. forEachsetler de thisGeri arama sırasında ya da C) bir ES2015 + kullanma işlevi ok fazla kapanır, this. Eğer bu şeylerden birini yapmazsanız, geri dönüşünde yer thisolacak undefinedveya global nesne ((katı modda) windowgevşek modunda). Eskiden forEachevrensel olarak desteklenmeyen ikinci bir dezavantaj vardı , ancak burada 2018'de karşılaşacağınız tek tarayıcı forEachIE8 değil (ve düzgün bir şekilde olamaz) orada çok doldurulmuş).

ES2015 + 's for-of:

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

Bunun nasıl çalıştığına ilişkin ayrıntılar için bu cevabın üst kısmındaki bağlantıya bakın.

Avantajları : Basit, anlaşılır, diziden giriş için içerilen bir kapsam değişkeni (veya yukarıda sabit) sunar.

Dezavantajları : IE'nin hiçbir sürümünde desteklenmez.

jQuery.each:

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

( Dokümanlara bağlantı )

Avantajları : forEachjQuery kullandığınızdan beri aynı avantajları da biliyorsunuz.

Dezavantajları : Eğer thisiçeren kodda kullanıyorsanız, onu fonksiyon içinde kullanabilmeniz için bir değişkene yapıştırmanız gerekir, çünkü thisfonksiyon içinde başka bir şey ifade eder.

thisYine de, aşağıdakilerden birini kullanarak bir şeyden kaçınabilirsiniz $.proxy:

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

... veya Function#bind:

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

... veya ES2015'te ("ES6") bir ok işlevi:

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

Ne YAPILAMAZ :

Bunun için kullanmayın for..in(ya da yaparsanız, uygun önlemlerle yapın). İnsanların söylediklerini göreceksiniz (aslında, kısaca bunu söyleyen bir cevap vardı), ancak for..inbirçok insanın düşündüğünü yapmaz (daha kullanışlı bir şey yapar!). Özellikle, for..inbir nesnenin numaralandırılabilir özellik adlarında dolaşır (bir dizinin dizinlerini değil). Diziler nesneler olduğundan ve varsayılan olarak yalnızca numaralandırılabilen özellikleri dizinler olduğundan, çoğunlukla yumuşak bir dağıtımda bir tür iş gibi görünüyor. Ancak bunun için kullanabileceğiniz güvenli bir varsayım değildir. İşte bir keşif: http://jsbin.com/exohi/3

Yukarıdaki "yapma" yumuşamalı. Seyrek diziler ediyoruz uğraşan Eğer varsa (örneğin, dizi toplam 15 element vardır ama onların endeksleri nedense 150,000 aralığında 0 dört bir yanına atılan ve bu yüzden length150.001 olan), ve sen gibi uygun önlemleri kullanırsanız hasOwnPropertyve denetleme özellik adı gerçekten sayısaldır (yukarıdaki bağlantıya bakın), for..inçok sayıda gereksiz döngüden kaçınmak için mükemmel makul bir yol olabilir, çünkü yalnızca doldurulmuş dizinler numaralandırılacaktır.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

dizi yinelemesi

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

nesne yinelemesi

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

örnek :

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>

dizi için javascript döngüleri

döngü için

for (initialExpression; condition; incrementExpression)
  statement

misal

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

için

//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
}

için

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

her biri için

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

kaynaklar

MDN döngüleri ve yineleyiciler

Burada jquery gerek yok, sadece bir fordöngü çalışır:

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

Seçenek 1: Geleneksel fordöngü

Temeller

Geleneksel bir fordöngü üç bileşene sahiptir:

1. başlatma: göz bloğu ilk kez yürütülmeden önce yürütülür
2. koşul: döngü bloğu yürütülmeden önce bir koşulu kontrol eder ve yanlışsa döngüden çıkar
3. sonradan düşünülmüş: döngü bloğu yürütüldükten sonra her seferinde gerçekleştirilir

Bu üç bileşen bir ;sembol ile birbirinden ayrılır . Bu üç bileşenin her biri için içerik isteğe bağlıdır, yani aşağıdakiler mümkün olan en düşük fordöngüdür:

for (;;) {
    // Do stuff
}

Tabii ki, çalışmayı durdurmak için bu döngüye bir if(condition === true) { break; } veya bir yer eklemeniz gerekecek .if(condition === true) { return; }for

Genellikle, başlatma işlemi bir dizin bildirmek için kullanılır, koşul bu dizini minimum veya maksimum değerle karşılaştırmak için kullanılır ve sonradan gelenler dizini artırmak için kullanılır:

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

forBir dizi arasında döngü oluşturmak için bir tradtional -loop kullanma

Bir dizide döngü yapmanın geleneksel yolu şudur:

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

Veya, geriye doğru döngü yapmayı tercih ederseniz, bunu yaparsınız:

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

Bununla birlikte, örn. Bu :

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

... ya da bu ...

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

... ya da bu :

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

Hangisi daha iyi çalışıyorsa, büyük ölçüde hem kişisel zevkiniz hem de uyguladığınız özel kullanım durumu meselesidir.

Bu varyasyonların her biri, eski tarayıcılar da dahil olmak üzere tüm tarayıcılar tarafından desteklenir!

Seçenek 2: while-döngü

for--Döngüsünün bir alternatifi-- whileDöngü'dür. Bir dizi arasında döngü yapmak için şunları yapabilirsiniz:

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

Geleneksel- fordöngüler gibi, while-döngüler en eski tarayıcılar tarafından bile desteklenir.

Ayrıca, while while döngüsü bir for-loop olarak yeniden yazılabilir . Örneğin, while-loop hereabove bu for-loop ile aynı şekilde davranır :

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

Seçenek 3: for...invefor...of

JavaScript'te şunları da yapabilirsiniz:

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

Bununla birlikte, fortüm durumlarda traditonal bir döngü ile aynı şekilde davranmadığı ve göz önünde bulundurulması gereken potansiyel yan etkiler olduğu için bu dikkatle kullanılmalıdır. Bkz "in için ..." Neden kullanıyor diziye yineleme kötü bir fikir ile? daha fazla ayrıntı için.

Alternatif olarak for...in, şimdi de var for...of. Aşağıdaki örnek, bir for...ofdöngü ile döngü arasındaki farkı gösterir for...in:

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
}

Ayrıca, Internet Explorer'ın hiçbir sürümünün for...of( Edge 12+ desteklemediğini) desteklemediğini ve for...inen az IE10 gerektirdiğini düşünmeniz gerekir.

Seçenek 4: Array.prototype.forEach()

Aşağıdaki sözdizimini kullanan For-loops seçeneğine bir alternatif Array.prototype.forEach():

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

Array.prototype.forEach() IE9 + 'nın yanı sıra tüm modern tarayıcılar tarafından desteklenmektedir.

Seçenek 5: jQuery.each()

Bahsedilen diğer dört seçeneğe ek olarak, jQuery'nin de kendi foreachvaryasyonu vardı .

Aşağıdaki sözdizimini kullanır:

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

each()JQuery işlevini kullanın .

İşte bir örnek:

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

JQuery kullanın each(). Başka yollar var ama her biri bu amaç için tasarlandı.

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

Ve son sayıdan sonra virgül koymayın.

Bir for()döngü kullanabilirsiniz :

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

Ok fonksiyonu ve enterpolasyonlu ES6 sözdizimi:

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

Bunu dene:

$.grep(array, function(element) {

})

Yan etkilerle dizi / dize ile alternatif yineleme yolları

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