JavaScript'te bir dizi arasında geçiş yapmanın en hızlı yolu nedir?

Kitaplardan döngü için böyle yazman gerektiğini öğrendim ：

for(var i=0, len=arr.length; i < len; i++){
    // blah blah
}

böylece arr.lengthher seferinde hesaplanmayacaktır.

Diğerleri, derleyicinin buna bir miktar optimizasyon yapacağını söyler, böylece şunları yazabilirsiniz:

for(var i=0; i < arr.length; i++){
    // blah blah
}

Sadece pratikte hangisinin en iyi yol olduğunu bilmek istiyorum?

Bu testi en modern tarayıcılarla yaptıktan sonra ...

http://jsben.ch/dyM52

Şu anda , en hızlı döngü şekli (ve bence en sözdizimsel olarak açık).

uzunluk önbellekli döngü için standart

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

}

Bunun kesinlikle JavaScript motoru geliştiricilerini alkışladığım bir durum olduğunu söyleyebilirim. Bir çalışma zamanı akıllılık için değil , netlik için optimize edilmelidir .

Bir javascript dizisinde döngü yapmanın en hızlı yolu:

var len = arr.length;
while (len--) {
    // blah blah
}

Tam karşılaştırma için http://blogs.oracle.com/greimer/entry/best_way_to_code_a adresine bakın.

Haziran 2016 itibariyle, en son Chrome'da bazı testler yapma (Mayıs 2016'da tarayıcı pazarının% 71'i ve artma):

• En hızlı döngü, gerçekten benzer performans sağlayan önbellek uzunluğu olan ve olmayan bir for döngüsüdür . (Önbelleğe alınmış uzunluğa sahip for döngüsü bazen önbelleğe alma olmadankinden daha iyi sonuçlar verir, ancak fark neredeyse önemsizdir, bu da motorun zaten standart ve en önbelleksiz döngü için en uygun olanına göre optimize edilmiş olabileceği anlamına gelir).
• Azaltılmış while döngüsü, for döngüsünün yaklaşık 1,5 katı kadar yavaştı.
• Geri arama işlevi (standart forEach gibi) kullanan bir döngü, for döngüsünden yaklaşık 10 kat daha yavaştır.

Bu iş parçacığının çok eski olduğuna ve programcıların uzunluğunu önbelleğe almaları veya daha iyi performans elde etmek için azalmalarıyla ters çaprazlama kullanmaları gerektiğini düşünmek için yanıltıcı olduğuna inanıyorum. Bu nedenle, şunu tavsiye ederim:

• Uygulamanız çok sayıda öğeyi yineliyorsa veya döngü kodunuz sık kullanılan bir işlevin içindeyse, yanıt için basit bir çözümdür:

  for (var i = 0; i < arr.length; i++) {
    // Do stuff with arr[i] or i
  }

• Uygulamanız gerçekten çok sayıda öğe arasında yineleme yapmıyorsa veya burada ve orada küçük yinelemeler yapmanız gerekiyorsa, standart forEach geri aramasını veya seçtiğiniz JS kitaplığınızdan benzer bir işlevi kullanmak daha anlaşılabilir ve hatalara daha az eğilimli olabilir. dizin değişkeni kapsamı kapalıdır ve dizi değerine doğrudan erişerek köşeli ayraç kullanmanıza gerek yoktur:

  arr.forEach(function(value, index) {
    // Do stuff with value or index
  });

• Milyarlarca satır boyunca yineleme yaparken gerçekten birkaç milisaniye çizmeniz gerekiyorsa ve dizinizin uzunluğu süreç boyunca değişmiyorsa, for döngünüzdeki uzunluğu önbelleğe almayı düşünebilirsiniz. Bugünlerde bunun gerçekten gerekli olmadığını düşünmeme rağmen:

  for (var i = 0, len = arr.length; i < len; i++) {
    // Do stuff with arr[i]
  }

Sipariş önemli değilse, bu stili tercih ederim:

for(var i = array.length; i--; )

Uzunluğu önbelleğe alır ve yazmak çok daha kısadır. Ancak dizi üzerinde ters sırayla yinelenir.

Sadece 2018, bu yüzden bir güncelleme güzel olabilir ...

Ve kabul edilen cevaba gerçekten katılmıyorum . Farklı tarayıcılarda kaybolur. bazıları forEachdaha hızlı, bazıları for-loopve bazıları while burada tüm yöntem için bir kriter http://jsben.ch/mW36e

arr.forEach( a => {
  // ...
}

ve for-loop'u bir sürü görebildiğiniz için for(a = 0; ... ), 'var' değişkenleri olmadan küresel olarak tanımlanacağını ve bunun hızı önemli ölçüde etkileyebileceğini ve yavaşlayacağını belirtmek gerekir.

Duff'ın cihazı operada daha hızlı çalışıyor ancak firefox'ta çalışmıyor

var arr = arr = new Array(11111111).fill(255);
var benches =     
[ [ "empty", () => {
  for(var a = 0, l = arr.length; a < l; a++);
}]
, ["for-loop", () => {
  for(var a = 0, l = arr.length; a < l; ++a)
    var b = arr[a] + 1;
}]
, ["for-loop++", () => {
  for(var a = 0, l = arr.length; a < l; a++)
    var b = arr[a] + 1;
}]
, ["for-loop - arr.length", () => {
  for(var a = 0; a < arr.length; ++a )
    var b = arr[a] + 1;
}]
, ["reverse for-loop", () => {
  for(var a = arr.length - 1; a >= 0; --a )
    var b = arr[a] + 1;
}]
,["while-loop", () => {
  var a = 0, l = arr.length;
  while( a < l ) {
    var b = arr[a] + 1;
    ++a;
  }
}]
, ["reverse-do-while-loop", () => {
  var a = arr.length - 1; // CAREFUL
  do {
    var b = arr[a] + 1;
  } while(a--);   
}]
, ["forEach", () => {
  arr.forEach( a => {
    var b = a + 1;
  });
}]
, ["for const..in (only 3.3%)", () => {
  var ar = arr.slice(0,arr.length/33);
  for( const a in ar ) {
    var b = a + 1;
  }
}]
, ["for let..in (only 3.3%)", () => {
  var ar = arr.slice(0,arr.length/33);
  for( let a in ar ) {
    var b = a + 1;
  }
}]
, ["for var..in (only 3.3%)", () => {
  var ar = arr.slice(0,arr.length/33);
  for( var a in ar ) {
    var b = a + 1;
  }
}]
, ["Duff's device", () => {
  var len = arr.length;
  var i, n = len % 8 - 1;

  if (n > 0) {
    do {
      var b = arr[len-n] + 1;
    } while (--n); // n must be greater than 0 here
  }
  n = (len * 0.125) ^ 0;
  if (n > 0) { 
    do {
      i = --n <<3;
      var b = arr[i] + 1;
      var c = arr[i+1] + 1;
      var d = arr[i+2] + 1;
      var e = arr[i+3] + 1;
      var f = arr[i+4] + 1;
      var g = arr[i+5] + 1;
      var h = arr[i+6] + 1;
      var k = arr[i+7] + 1;
    }
    while (n); // n must be greater than 0 here also
  }
}]];
function bench(title, f) {
  var t0 = performance.now();
  var res = f();
  return performance.now() - t0; // console.log(`${title} took ${t1-t0} msec`);
}
var globalVarTime = bench( "for-loop without 'var'", () => {
  // Here if you forget to put 'var' so variables'll be global
  for(a = 0, l = arr.length; a < l; ++a)
     var b = arr[a] + 1;
});
var times = benches.map( function(a) {
                      arr = new Array(11111111).fill(255);
                      return [a[0], bench(...a)]
                     }).sort( (a,b) => a[1]-b[1] );
var max = times[times.length-1][1];
times = times.map( a => {a[2] = (a[1]/max)*100; return a; } );
var template = (title, time, n) =>
  `<div>` +
    `<span>${title} &nbsp;</span>` +
    `<span style="width:${3+n/2}%">&nbsp;${Number(time.toFixed(3))}msec</span>` +
  `</div>`;

var strRes = times.map( t => template(...t) ).join("\n") + 
            `<br><br>for-loop without 'var' ${globalVarTime} msec.`;
var $container = document.getElementById("container");
$container.innerHTML = strRes;

body { color:#fff; background:#333; font-family:helvetica; }
body > div > div {  clear:both   }
body > div > div > span {
  float:left;
  width:43%;
  margin:3px 0;
  text-align:right;
}
body > div > div > span:nth-child(2) {
  text-align:left;
  background:darkorange;
  animation:showup .37s .111s;
  -webkit-animation:showup .37s .111s;
}
@keyframes showup { from { width:0; } }
@-webkit-keyframes showup { from { width:0; } }

<div id="container"> </div>

2014 Whilegeri döndü

Sadece mantıklı düşünün.

Şuna bak

for( var index = 0 , length = array.length ; index < length ; index++ ) {

 //do stuff

}

1. En az 2 değişken (dizin, uzunluk) oluşturmanız gerekir
2. Dizinin uzunluktan küçük olup olmadığını kontrol etmeniz gerekiyor
3. Dizini artırmanız gerekiyor
4. forDöngü 3 parametre vardır

Şimdi bana bunun neden daha hızlı olması gerektiğini söyleyin:

var length = array.length;

while( --length ) { //or length--

 //do stuff

}

1. Bir değişken
2. Kontrol yok
3. endeks azalır (Makineler bunu tercih eder)
4. while sadece bir parametresi var

Chrome 28 for döngüsünün zamandan daha hızlı olduğunu gösterdiğinde tamamen kafam karıştı. Bu bir çeşit

"Ah, herkes for döngüsünü kullanıyor, krom için geliştirirken buna odaklanalım."

Ama şimdi, 2014 yılında while döngüsü krom üzerinde. 2 kat daha hızlı, diğer / eski tarayıcılarda her zaman daha hızlıydı.

Son zamanlarda yeni testler yaptım. Şimdi gerçek dünya ortamında bu kısa kodlar hiçbir şeye değmez ve jsperf aslında while döngüsünü düzgün çalıştıramaz, çünkü aynı zamanda zaman alan array.length'i yeniden oluşturmanız gerekir.

jsperf üzerinde bir while döngüsünün gerçek hızını elde edemezsiniz.

kendi özel işlevinizi oluşturmanız ve window.performance.now()

Ve evet ... while döngüsünün daha hızlı olmasının bir yolu yok.

Asıl sorun aslında dom manipülasyonu / oluşturma zamanı / çizim zamanıdır ya da istediğiniz gibi.

Örneğin ben koordinatları ve çarpışmaları hesaplamak için gereken bir tuval sahne var ... Bu 10-200 MicroSeconds (milisaniye değil) arasında yapılır. aslında her şeyi işlemek için milisaniye sürer. DOM'daki gibi.

FAKAT

loopBazı durumlarda for özelliğini kullanmanın başka bir süper performans yolu var ... örneğin bir diziyi kopyalamak / klonlamak için

for(
 var i = array.length ;
 i > 0 ;
 arrayCopy[ --i ] = array[ i ] // doing stuff
);

Parametrelerin ayarına dikkat edin:

1. While döngüsünde olduğu gibi sadece bir değişken kullanıyorum
2. Dizinin 0'dan büyük olup olmadığını kontrol etmeniz gerekir;
3. Gördüğünüz gibi ben 3th parametre içinde şeyler yapmak ve ben de doğrudan dizi içinde azaltmak gibi herkesin kullandığı döngü için normal vs vs farklıdır.

Dedi ki, bu makineleri -

biraz daha kısa yapmak ve bazı işe yaramaz şeyler kaldırmak ve aynı tarzı kullanarak bu yazmayı düşünüyordum yazma:

for(
 var i = array.length ;
 i-- ;
 arrayCopy[ i ] = array[ i ] // doing stuff
);

Daha kısa olsa bile, ibir kez daha kullanmak her şeyi yavaşlatır. Önceki fordöngüden ve 1 / 1'den daha yavaş while.

Not:; olmadan looo için sonra çok önemlidir{}

Ben sadece jsperf komut dosyalarını test etmek için en iyi yolu olmadığını söyledi bile .. ben bu 2 döngü burada ekledi

http://jsperf.com/caching-array-length/40

Ve burada javascript'teki performans hakkında başka bir cevap

https://stackoverflow.com/a/21353032/2450730

Bu cevap, javascript yazmanın etkili yollarını göstermektir. Eğer okuyamıyorsanız, sorun ve javascript http://www.ecma-international.org/ecma-262/5.1/

http://jsperf.com/caching-array-length/60

Hazırladığım testin en son revizyonu (eskisini tekrar kullanarak) bir şey gösteriyor.

Önbellek uzunluğu o kadar önemli değildir, ancak zarar vermez.

Yukarıda bağlanan testin her ilk çalıştırması (yeni açılan sekmede) Debian Squeeze 64-bit'imdeki ( masaüstü donanımım ) Chrome, Opera ve Firefox'ta son 4 snippet (grafiklerde 3., 5., 7. ve 10.) en iyi sonuçları verir ). Sonraki çalışmalar oldukça farklı sonuç verir.

Performans açısından sonuçlar basit:

• Döngü (ileri) ile gidin ve !==yerine kullanarak test edin <.
• Diziyi daha sonra yeniden kullanmak zorunda shift()kalmazsanız , azaltılmış uzunluktaki ve yıkıcı -ing dizisindeki döngü de etkilidir.

tl; Dr.

Günümüzde (2011.10) aşağıdaki desen en hızlı olanı gibi görünüyor.

for (var i = 0, len = arr.length; i !== len; i++) {
    ...
}

arr.lengthBurada önbelleğe almanın çok önemli olmadığını unutmayın, bu yüzden sadece test edebilirsiniz i !== arr.lengthve performans düşmez, ancak daha kısa kod alırsınız.

Not: Snippet'te shift()sonucuyla birlikte 0. elemente erişmek yerine kullanılabileceğini biliyorum , ancak bir şekilde önceki revizyonu (döngüler sırasında yanlış olan) yeniden kullandıktan sonra ve daha sonra zaten elde edilen sonuçları kaybetmek istemediğimi göz ardı ettim.

Saf performansta olduğu gibi "en iyi"? veya performans VE okunabilirlik?

Bir önbellek ve ++ önek operatörü kullanan saf performans "en iyi" (verilerim: http://jsperf.com/caching-array-length/189 )

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

Önbelleksiz for-loop'un yürütme süresi ve programcı okuma süresinde en iyi denge olduğunu iddia ediyorum. C / C ++ / Java ile başlayan her programcı, bunu okumak zorunda olan bir ms'yi boşa harcamaz

for(var i=0; i < arr.length; i++){
  // blah blah
}

** döngü uzunluğu döngü içinde önbellek, birkaç saniye kaçınılması. Dizideki öğelere bağlı olarak dizide daha fazla öğe varsa Ms zamanına göre büyük bir fark vardır *

**

sArr; //Array[158];

for(var i = 0 ; i <sArr.length ; i++) {
 callArray(sArr[i]); //function call
}

***end: 6.875ms***

**

**

sArr; //Array[158];
for(var i = 0,len = sArr.length ; i < len ; i++) {
  callArray(sArr[i]); //function call
}

***end: 1.354ms***

**

Bu şimdiye kadarki en hızlı yol gibi görünüyor ...

var el;
while (el = arr.shift()) {
  el *= 2;
}

Bunun diziyi tüketeceğini, yiyeceğini ve hiçbir şey bırakmayacağını göz önünde bulundurun ...

2017 yılı .

Bazı testler yaptım.

https://jsperf.com/fastest-way-to-iterate-through-an-array/

whileYöntem, Chrome'da en hızlı yöntem gibi görünüyor .

Sol eksiltme gibi görünüyor ( --i) çok daha hızlı diğerlerinden (daha ++i, i--, i++Firefox'ta).

Bu yaklaşım ortalama bir açlıktır. Ancak diziyi ters sırayla yineler.

let i = array.length;
while (--i >= 0) {
    doSomething(array[i]);
}

İlerleme sırası önemliyse, bu yaklaşımı kullanın.

let ii = array.length;
let i = 0;
while (i < ii) {
    doSomething(array[i]);
    ++i;
}

Her zaman ilk stilde yazıyorum.

Bir derleyici diziler için optimize etmek için yeterince akıllı olsa da, burada DOMNodeList veya hesaplanmış uzunluğa sahip karmaşık bir nesne kullanıyorsanız hala akıllı mı?

Dizilerle ilgili sorunun ne olduğunu biliyorum, ancak bence tüm döngülerinizi tek bir stilde yazmak iyi bir uygulamadır.

var arr = []; // The array
var i = 0;
while (i < arr.length) {
    // Do something with arr[i]
    i++;
}

i ++, ++ i, --i ve i-- 'den daha hızlıdır

Ayrıca, i'ye erişmeniz gereken son kez arr [i ++] yaparak son satırı kaydedebilirsiniz (ancak bu hata ayıklamak zor olabilir).

Burada test edebilirsiniz (diğer döngü testleriyle): http://jsperf.com/for-vs-whilepop/5

Eylül 2017 itibarı ile bu jsperf testleri , Chrome 60'da en iyi performans gösteren aşağıdaki modeli göstermektedir:

function foo(x) {
 x;
};
arr.forEach(foo);

Herkes üreyebilir mi?

Büyük bir dizi yinelemek için başka yollar denedim ve dizi uzunluğu yarıya indirmek ve sonra tek bir döngüde her iki yarısı yineleme daha hızlı olduğunu öğrendim. Bu performans farkı, büyük diziler işlenirken görülebilir .

var firstHalfLen =0;
var secondHalfLen = 0;
var count2=0;
var searchterm = "face";
var halfLen = arrayLength/2;
if(arrayLength%2==halfLen)
{
   firstHalfLen = Math.ceil(halfLen);
   secondHalfLen=Math.floor(halfLen);
}
else
{
   firstHalfLen=halfLen;
   secondHalfLen=halfLen;
}
for(var firstHalfCOunter=0,secondHalfCounter = arrayLength-secondHalfLen;
    firstHalfCOunter < firstHalfLen;
    firstHalfCOunter++)
{
  if(mainArray[firstHalfCOunter].search(new RegExp(searchterm, "i"))> -1)
  {
    count2+=1;
  }
  if(secondHalfCounter < arrayLength)
  {
    if(mainArray[secondHalfCounter].search(new RegExp(searchterm, "i"))> -1)
    {
        count2+=1;
    }
    secondHalfCounter++; 
  }
}

Yukarıdaki yöntem için döngü VS önbelleğe alınmış uzunluğu arasında bazı performans karşılaştırması (timer.js kullanarak).

http://jsfiddle.net/tejzpr/bbLgzxgo/

Başka bir jsperf.com testi: http://jsperf.com/while-reverse-vs-for-cached-length

Ters while döngüsü en hızlı gibi görünüyor. Tek sorun (--i) 0'da duracaktır. Döngümdeki [0] dizisine nasıl erişebilirim?

Temel bir while döngüsü genellikle en hızlısıdır. jsperf.com bu tür kavramları test etmek için harika bir korumadır.

https://jsperf.com/fastest-array-loops-in-javascript/24

İlmek döngü için biraz daha hızlı.

var len = arr.length;
while (len--) {
    // blah blah
}

Bunun yerine while döngüsü kullan

En hızlı yaklaşım döngü için gelenekseldir. İşte daha kapsamlı bir performans karşılaştırması.

https://gists.cwidanage.com/2019/11/how-to-iterate-over-javascript-arrays.html

Bildiğim en şık çözüm harita kullanmak.

var arr = [1,2,3];
arr.map(function(input){console.log(input);});

Bunu dene:

var myarray =[],
i = myarray.lenght;
while(i--){
// do somthing
}

Bir dizide döngü yapmanın en hızlı yolu filtreyi kullanmaktır. Filter () yöntemi, sağlanan işlev tarafından uygulanan sınamayı geçen tüm öğeleri içeren yeni bir dizi oluşturur.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const words = ['Floccinaucinihilipilification', 'limit', 'elite', 'Hippopotomonstrosesquipedaliophobia', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(new Date(), result);

Deneyimlerime göre, her zaman filtreleri, haritayı vb. Tercih ederim.

2019 itibariyle WebWorker daha popüler olmuştur, büyük veri kümeleri için WebWorker'ı çok çekirdekli işlemcilerden tam olarak yararlanarak çok daha hızlı işlemek için kullanabiliriz.

WebWorker'ın veri işleme için kullanımını daha kolay hale getiren Parallel.js de var .