İçin JavaScript… in vs for

Sizce ilmekler için ve ilmekler arasında büyük bir fark var mı? Ne tür bir "for" kullanmayı tercih edersiniz ve neden?

Diyelim ki bir dizi ilişkisel dizimiz var:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Böylece yineleyebiliriz:

for (var i = 0; i < myArray.length; i++)

Ve:

for (var i in myArray)

Çok büyük bir fark görmüyorum. Performans sorunu var mı?

Seçim hangi deyimin en iyi anlaşıldığına dayanmalıdır.

Bir dizi aşağıdakiler kullanılarak yinelenir:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

İlişkilendirilebilir dizi olarak kullanılan bir nesne aşağıdakiler kullanılarak yinelenir:

for (var key in o)
  //do stuff with o[key]

Toprak paramparça nedenleriniz olmadığı sürece, belirlenmiş kullanım şekline sadık kalın.

Douglas Crockford , ifadeyi kullanmamak için JavaScript: İyi Parçalar'ı (sayfa 24) önermektedir for in.

Bir for innesnedeki özellik adlarının üzerine döngü yapmak için kullanılırsa , sonuçlar sıralanmaz. Daha da kötüsü: Beklenmedik sonuçlar alabilirsiniz; prototip zincirinden miras alınan üyeleri ve yöntemlerin adını içerir.

Özellikleri hariç her şey ile filtrelenebilir .hasOwnProperty. Bu kod örneği, muhtemelen başlangıçta istediğinizi yapar:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - jQuery Kullanıcıları

jQuery'nin each(callback)yöntemi for( ; ; )varsayılan olarak döngü kullanır ve for( in ) yalnızca uzunluk ise kullanılır undefined.

Bu nedenle, bu işlevi kullanırken doğru sırayı almanın güvenli olduğunu söyleyebilirim.

Örnek :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

Bunu kullanmanın dezavantajı, bazı UI olmayan mantık yapıyorsanız, işlevlerinizin diğer çerçevelere daha az taşınabilir olacağıdır. each()Fonksiyon muhtemelen en iyi jQuery seçicileri ile kullanım için ayrılmıştır ve for( ; ; )aksi tavsiye edilebilir.

ne tür bir döngü kullandığınıza ve hangi tarayıcıya bağlı olarak performans farklılıkları vardır.

Örneğin:

for (var i = myArray.length-1; i >= 0; i--)

bazı tarayıcılarda neredeyse iki kat daha hızlıdır:

for (var i = 0; i < myArray.length; i++)

Ancak dizileriniz BÜYÜK veya sürekli döngü yapmadıkça hepsi yeterince hızlıdır. Dizi döngüsünün projenizdeki bir darboğaz olduğundan (veya bu konudaki herhangi bir projeden) ciddi olarak şüpheliyim

Yerel Array.forEach yönteminin artık yaygın olarak desteklendiğini unutmayın .

2012 için cevap güncellendiTüm önemli tarayıcıların güncel sürümü - Chrome, Firefox, IE9, Safari ve Opera ES5'in yerel dizisini desteklemektedir. ForEach.

IE8'i yerel olarak desteklemek için bir nedeniniz yoksa (uygun bir JS ortamı sağlayacak bu kullanıcılara ES5-shim veya Chrome çerçevesinin sağlanabileceğini unutmayın), dilin uygun sözdizimini kullanmak daha temizdir:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

Array.forEach () için tüm belgeler MDN adresindedir.

Dizi seyrek olduğunda ikisi aynı değildir.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Prototip zincirini atlamak için forEach kullanma

@ Nailer'ın yukarıdaki cevabına hızlı bir ek olarak sadece forEach ile Object.keys kullanmak, hasOwnProperty kullanmak zorunda kalmadan prototip zinciri üzerinde yineleme yapmaktan kaçınabileceğiniz anlamına gelir.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

İkincisi, yineleme yöntemini ihtiyacınıza göre seçmeniz gerektiğine inanıyorum. Ben aslında seni öneririm hiç yerli döngü Arrayile for inyapısı. Çok daha yavaş ve Chase Seibert'in şimdiye kadar işaret ettiği gibi Prototip çerçevesiyle uyumlu değil.

JavaScript ile çalışıyorsanız mutlaka göz atmanız gereken farklı döngü stilleri üzerinde mükemmel bir kıyaslama vardır . Erken optimizasyonlar yapmayın, ancak bu şeyleri başınızın arkasında bir yerde tutmalısınız.

for inBir nesnenin tüm özelliklerini almak için kullanırım , bu da özellikle komut dosyalarınızda hata ayıklama yaparken kullanışlıdır. Örneğin, bilmediğim bir nesneyi keşfettiğimde bu çizginin kullanışlı olmasını seviyorum:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Tüm nesnenin içeriğini (yöntem gövdeleriyle birlikte) Firebug günlüğüme döker. Çok kullanışlı.

İşte yaptığım bir şey.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

bunu nasıl kullanacağınız bu
diziler ve nesneler üzerinde çalışacaktır (HTML öğelerinin bir listesi gibi)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Bunu yeni yaptım, bu yüzden önerilere açığım :)

Öğelere nasıl başvurmak istediğime bağlı olarak farklı yöntemler kullanırdım.

Sadece geçerli öğeyi istiyorsanız foreach kullanın.

Göreli karşılaştırmalar yapmak için bir dizinleyiciye ihtiyacınız varsa kullanın. (Yani bu önceki / sonraki öğeyle nasıl karşılaştırılır?)

Performans farkı hiç fark etmedim. Endişelenmeden önce bir performans sorunu yaşamayı beklerdim.

İle (myArray içinde var i) için , nesneleri üzerinde döngü de olabilir ben anahtar adını içerecek ve üzeri özelliğine erişebilir [i] myArray . Doğrudan nesne prototipleri yöntemleri eklerseniz jQuery veya prototip gibi herhangi bir dış çerçeve kullanırsanız Ek olarak, nesnenin eklemiş olacak herhangi yöntemleri, yani çok döngü içinde yer alacak, ya da, bir noktada i işaret eder bu yöntemler.

Dikkat et!

Birden fazla komut dosyası etiketiniz varsa ve örneğin etiket niteliklerinde bir bilgi arıyorsanız, basit bir dizi değil, bir HTMLCollection nesnesi olduğu için .length özelliğini for döngüsüyle kullanmanız gerekir.

https://developer.mozilla.org/en/DOM/HTMLCollection

Foreach ifadesini (listenizdeki var i) için kullanırsanız, çoğu tarayıcıda HTMLCollection öğesinin özelliklerini ve yöntemlerini döndürür!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

GetElementsByTagName bir NodeList döndürse bile, çoğu tarayıcı bir HTMLCollection döndürüyor: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Çünkü Dizilerdeki döngüler Prototip ile uyumlu değildir. Gelecekte bu kütüphaneyi kullanmanız gerekebileceğini düşünüyorsanız, döngülere bağlı kalmak mantıklı olacaktır.

http://www.prototypejs.org/api/array

Nesneleri, prototip ve dizileri kullanarak "her biri için" sorunları gördüm

benim anlayış, her biri için nesnelerin özellikleri ve DEĞİL diziler içindir

Kodunuzu gerçekten hızlandırmak istiyorsanız, buna ne dersiniz?

for( var i=0,j=null; j=array[i++]; foo(j) );

for ifadesinin içinde while mantığına sahip olmak ve daha az gereksizdir. Ayrıca firefox'ta Array.forEach ve Array.filter var

Jsperf'e göre daha kısa ve en iyi kod

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Paralellikten yararlanmak için Array (). ForEach döngüsünü kullanın

(;;) için içindir Diziler : [20,55,33]

For..in için Nesneleri : {x: 20, y: 55: z: 33}

Dikkatli ol!!! Mac OS'de Chrome 22.0 kullanıyorum ve her sözdizimi için sorun yaşıyorum.

Bu bir tarayıcı sorunu, javascript sorunu veya kodda bazı hata olup olmadığını bilmiyorum, ama ÇOK garip. Nesnenin dışında mükemmel çalışır.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

İkisi arasında önemli bir fark vardır. For-in, bir nesnenin özellikleri üzerinde yinelenir, bu nedenle vaka bir dizi olduğunda yalnızca öğeleri üzerinde değil aynı zamanda sahip olduğu "kaldır" işlevi üzerinde de yinelenir.

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

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

For-in'i bir ile kullanabilirsiniz if(myArray.hasOwnProperty(i)). Yine de, diziler üzerinde yineleme yaparken her zaman bundan kaçınmayı ve sadece for (;;) ifadesini kullanmayı tercih ederim.

Her ikisi de çok benzer olsa da küçük bir fark var:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

bu durumda çıktı:

DÖNGÜ İÇİN STANDART:

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

bu durumda çıktı:

FOR-IN DÖNGÜ:

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

For in ifadesi, bir nesnenin tüm özelliklerinin adlarında döngü oluşturmayı sağlar. Ne yazık ki, prototip zincirinden miras kalan tüm üyeler arasında da dolaşıyor. Bu, veri üyelerine ilgi duyulduğunda yöntem işlevlerini sunmanın kötü yan etkisine sahiptir.