JavaScript - myArray.forEach ve for döngüsü arasındaki farklar

Question 1

Şunları kullanmanızı öneren birçok soru gördüm:

for (var i = 0; i < myArray.length; i++){ /* ... */ }

onun yerine:

for (var i in myArray){ /* ... */ }

tutarsız yineleme nedeniyle diziler için ( buraya bakın ).

Ancak, nesne yönelimli döngüyü tercih eden bir şey bulamıyorum:

myArray.forEach(function(item, index){ /* ... */ });

Bu bana çok daha sezgisel geliyor.

Mevcut projem için, IE8 uyumluluğu önemli ve Mozilla'nın çoklu dolgusunu kullanmayı düşünüyorum , ancak bunun nasıl çalışacağından% 100 emin değilim.

Standart for döngüsü (yukarıdaki ilk örnek) ile modern tarayıcıların Array.prototype.forEach uygulaması arasında herhangi bir fark var mı?
Modern tarayıcı uygulamaları ile Mozilla'nın yukarıdakilere bağlı uygulaması arasında herhangi bir fark var mı (IE8'e özel olarak)?
Performans bir sorun değildir, sadece hangi özelliklerin yinelendiği ile tutarlılıktır.

Question 2

forDöngü ve forEachyöntem arasındaki en önemli fark , birincisi ile breakdöngüden çıkabilmenizdir. Simülasyonunu continue, sadece geçilen işlevden dönerek yapabilirsiniz forEach, ancak döngüyü tamamen durdurmanın bir yolu yoktur.

Bunun yanı sıra, ikisi etkili bir şekilde aynı işlevselliği gerçekleştirir. Diğer bir küçük fark, değişken kaldırma nedeniyle for döngüsündeki dizinin kapsamını (ve tüm içeren değişkenleri) içerir.

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { ... }

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { ... });

Bununla birlikte, bunu forEachçok daha anlamlı buluyorum - bir dizinin her bir öğesi boyunca yineleme yapma niyetinizi temsil ediyor ve size yalnızca dizine değil öğeye de bir referans sağlıyor. Genel olarak, çoğunlukla kişisel zevkinize bağlı, ancak kullanabiliyorsanız forEach, kullanmanızı tavsiye ederim.

İki versiyon arasında, özellikle performansla ilgili birkaç önemli fark daha var. Aslında, bu jsperf testininforEach gösterdiği gibi basit for döngüsü yöntemden önemli ölçüde daha iyi performans gösterir .

Böyle bir performansın sizin için gerekli olup olmadığına karar vermek size bağlıdır ve çoğu durumda, ifade gücünün hıza göre olmasını tercih ederim. Bu hız farkı, muhtemelen bu yanıtta belirtildiği gibi seyrek dizilerde çalışırken temel döngü ile yöntem arasındaki küçük anlamsal farklılıklardan kaynaklanmaktadır .

Davranışına ihtiyacınız yoksa forEachve / veya döngüden erken çıkmanız gerekiyorsa, Lo-Dash'i _.eachalternatif olarak kullanabilirsiniz , bu da tarayıcılar arası çalışacaktır. JQuery kullanıyorsanız, aynı zamanda bir benzer sağlar $.each, her varyasyonda geri arama işlevine iletilen bağımsız değişkenlerdeki farklılıkları not edin.

( forEachPolyfill'e gelince , bu rotaya gitmeyi seçerseniz, eski tarayıcılarda sorunsuz çalışmalıdır.)

Question 3

Array.forEach'den çok daha iyi performans gösterecek özel foreach işlevinizi kullanabilirsiniz.

Bunu kodunuza bir kez eklemelisiniz. Bu, Diziye yeni işlev ekleyecektir.

function foreach(fn) {
    var arr = this;
    var len = arr.length;
    for(var i=0; i<len; ++i) {
        fn(arr[i], i);
    }
}

Object.defineProperty(Array.prototype, 'customForEach', {
    enumerable: false,
    value: foreach
});

Ardından, Array.forEach gibi her yerde kullanabilirsiniz.

[1,2,3].customForEach(function(val, i){

});

Tek fark 3 kat daha hızlı. https://jsperf.com/native-arr-foreach-vs-custom-foreach

GÜNCELLEME: Yeni Chrome sürümünde .forEach () performansı iyileştirildi. Ancak çözüm, diğer tarayıcılarda ek performans sağlayabilir.

Question 4

Pek çok geliştirici (örneğin, Kyle Simpson) tarafından .forEach, dizinin bir yan etkiye sahip olacağını ve .mapsalt işlevler için kullanılacağını önermektedir . fordöngüler, bilinen sayıda döngü için genel amaçlı bir çözüm olarak veya programlama dillerinin çoğunda geniş desteği nedeniyle iletişim kurması daha kolay olduğu için uymayan diğer durumlar için iyi bir uyum sağlar.

Örneğin

/* For Loop known number of iterations */
const numberOfSeasons = 4;
for (let i = 0; i < numberOfSeasons; i++) {
  //Do Something
}

/* Pure transformation */
const arrayToBeUppercased = ['www', 'html', 'js', 'us'];
const acronyms = arrayToBeUppercased.map((el) => el.toUpperCase));

/* Impure, side-effects with .forEach */
const acronymsHolder = [];
['www', 'html', 'js', 'us'].forEach((el) => acronymsHolder.push(el.toUpperCase()));

Konvansiyon bilge, bu en iyi görünüyor, ancak topluluk yeni yineleme protokolü for indöngüleri üzerine bir sözleşmeye gerçekten karar vermedi . Genel olarak, JS topluluğunun benimsemeye açık göründüğü FP kavramlarını takip etmenin iyi bir fikir olduğunu düşünüyorum.