Який найшвидший спосіб провести цикл через масив у JavaScript?

Я дізнався з книг, що слід писати для циклу, як це:

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

тому arr.lengthзаряд не буде обчислюватися кожен раз.

Інші кажуть, що компілятор зробить певну оптимізацію цього, тому ви можете просто написати:

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

Я просто хочу знати, який найкращий спосіб на практиці?

Після виконання цього тесту у більшості сучасних браузерів ...

http://jsben.ch/dyM52

В даний час найшвидша форма циклу (і, на мою думку, найбільш синтаксично очевидна).

стандарт для циклу з кешуванням довжини

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

}

Я б сказав, що це безумовно випадок, коли я аплодую розробникам двигуна JavaScript. Час виконання повинен бути оптимізований для ясності , а не кмітливості .

Абсолютний найшвидший спосіб пройти цикл через масив javascript:

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

Дивіться http://blogs.oracle.com/greimer/entry/best_way_to_code_a для повного порівняння

Станом на червень 2016 року , роблячи кілька тестів на найновішій версії Chrome (71% ринку браузерів у травні 2016 року та більше):

• Найшвидший цикл - це цикл for , як з довжиною кешування, так і без неї, що забезпечує дійсно подібну продуктивність. (Цикл for з кешованою довжиною іноді дає кращі результати, ніж той, без кешування, але різниця майже незначна, що означає, що двигун може бути вже оптимізований для вибору стандарту і, ймовірно, найпростішого для циклу без кешування).
• Цикл while з зменшеннями був приблизно в 1,5 рази повільніше, ніж цикл for.
• Цикл, що використовує функцію зворотного дзвінка (як стандартний дляEach), був приблизно в 10 разів повільніше, ніж цикл for.

Я вважаю, що цей потік занадто старий, і програмістів вводить в оману, думаючи, що їм потрібно кешувати довжину, або використовувати зворотні прохідні вітри з декрементами для досягнення кращої продуктивності, пишучи код, який є менш розбірливим і більш схильним до помилок, ніж простий прямий цикл. Тому я рекомендую:

• Якщо ваш додаток повторює багато предметів, або ваш код циклу знаходиться у функції, яка часто використовується, відповідь є простою для циклу:

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

• Якщо ваш додаток насправді не повторюється через багато елементів або вам просто потрібно робити невеликі ітерації тут і там, використовуючи стандартний зворотний виклик forEach або будь-яку подібну функцію з вибраної вами бібліотеки JS, може бути зрозуміліше і менш схильне до помилок, оскільки Область змінної індексу закрита, і вам не потрібно використовувати дужки, отримуючи доступ до значення масиву безпосередньо:

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

• Якщо вам дійсно потрібно подряпати кілька мілісекунд, ітерація на мільярди рядків і довжина масиву не змінюється протягом цього процесу, ви можете розглянути можливість кешування довжини у циклі. Хоча я вважаю, що це справді не потрібно:

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

Якщо замовлення не важливе, я віддаю перевагу такому стилю:

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

Він кешує довжину і набагато коротше писати. Але він буде повторюватися над масивом у зворотному порядку.

Це просто 2018 рік, тому оновлення може бути приємним ...

І я дійсно повинен не погодитися з прийнятою відповіддю . Він відкладається в різних браузерах. деякі роблять forEachшвидше, деякі for-loop, а деякі while тут є орієнтиром для всіх методів http://jsben.ch/mW36e

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

і оскільки ви можете бачити багато for-loop, як for(a = 0; ... )тоді, варто згадати, що без 'var' змінні будуть визначені глобально, і це може різко вплинути на швидкість, тому воно стане повільним.

Пристрій Даффа працює швидше в опері, але не в Firefox

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 Whileповернувся

Просто думаю логічно.

Подивись на це

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

 //do stuff

}

1. Потрібно створити принаймні 2 змінні (індекс, довжина)
2. Потрібно перевірити, чи індекс менший за довжину
3. Потрібно збільшити індекс
4. forцикл має 3 параметри

Тепер скажіть мені, чому це має бути швидше, ніж:

var length = array.length;

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

 //do stuff

}

1. Одна змінна
2. Жодних чеків
3. індекс знижується (машини віддають перевагу тому)
4. while має лише один параметр

Мене зовсім збентежило, коли Chrome 28 показав, що цикл for for швидше. Це, мабуть, має якесь бен

"Е, всі використовують цикл for, давайте зосередимося на цьому, розробляючи для хромування."

Але зараз, у 2014 році цикл while знову на хромі. це в 2 рази швидше, в інших / старших браузерах це було завжди швидше.

Нещодавно я зробив кілька нових тестів. Зараз у реальному світі цих коротких кодів нічого не вартує, і jsperf насправді не може виконати належним чином цикл while, тому що він повинен відтворити array.length, який також потребує часу.

ви не можете отримати фактичну швидкість циклу часу на jsperf.

вам потрібно створити власну власну функцію та позначити це window.performance.now()

І так ... певний шлях циклу просто не відбувається.

Справжньою проблемою є насправді маніпуляція куполом / час візуалізації / час малювання або як би ви хотіли це назвати.

Наприклад, у мене є сцена на полотні, де мені потрібно обчислити координати та зіткнення ... це робиться між 10-200 мікросекундами (не мілісекундами). насправді потрібні різні мілісекунди, щоб все вийшло. Так само, як і в DOM.

АЛЕ

Існує ще один надзвичайно ефективний спосіб використання loopу деяких випадках ... наприклад, для копіювання / клонування масиву

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

Зверніть увагу на налаштування параметрів:

1. Те саме, що в циклі while я використовую лише одну змінну
2. Потрібно перевірити, чи не перевищує показник 0;
3. Як ви бачите, цей підхід відрізняється від нормального для циклу, який використовує кожен, як і я всередині 3-го параметра, і я також зменшуюсь безпосередньо в масиві.

Це сказав, що це підтверджує, що такі машини, як

писав, що я думав зробити трохи коротше і видалити непотрібні речі, і написав цей, використовуючи той самий стиль:

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

Навіть якщо це коротше, схоже, що використання ще iодного разу сповільнює все. Це на 1/5 повільніше, ніж попередній forцикл і той while.

Примітка:; дуже важливо після того , як для looo без{}

Навіть якщо я щойно сказав вам, що jsperf - це не найкращий спосіб тестування скриптів .. я додав сюди дві петлі

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

І ось ще одна відповідь про продуктивність у javascript

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

Ця відповідь полягає в тому, щоб показати виконавські способи написання JavaScript. Тож якщо ви не можете цього прочитати, запитайте, і ви отримаєте відповідь або прочитаєте книгу про Javascript http://www.ecma-international.org/ecma-262/5.1/

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

Остання редакція тесту, яку я підготував (повторно використовуючи старіший), показує одне.

Довжина кешування не так важлива, але це не шкодить.

Кожен перший запуск тесту, зв'язаного вище (на щойно відкритій вкладці), дає найкращі результати за останні 4 фрагменти (3-й, 5-й, 7-й та 10-й у діаграмах) у Chrome, Opera та Firefox в 64-розрядному Debian Squeeze ( моє обладнання для настільних ПК) ). Подальші пробіги дають зовсім інший результат.

Висновки щодо ефективності прості:

• Перейдіть за циклом (вперед) і тестуйте, використовуючи !==замість <.
• Якщо вам не доведеться використовувати масив пізніше, тоді цикл на зменшену довжину і shift()масив- деструктивний масив також ефективний.

тл; д-р

На сьогодні (2011.10) наведений нижче зразок виглядає як найшвидший.

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

Зверніть увагу, що кешування arr.lengthтут не є вирішальним, тому ви можете просто протестувати i !== arr.lengthта продуктивність не знизиться, але ви отримаєте коротший код.

PS: Я знаю, що в фрагменті з shift()його результатом можна використовувати замість доступу до 0-го елемента, але я якось не помітив, що після повторного використання попередньої редакції (яка мала помилки під час циклів), а пізніше я не хотів втрачати вже отримані результати.

"Найкраще" як у чистому виконанні? або виконання І читабельність?

Чиста продуктивність "найкраща" - це це, що використовує кеш і оператор префікса ++ (мої дані: http://jsperf.com/caching-array-length/189 )

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

Я заперечую, що без кеш-пам'яті для циклу - найкращий баланс у часі виконання та час читання програміста. Кожен програміст, який розпочав роботу з C / C ++ / Java, не витрачатиме повідомлення, прочитавши цей

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

** Кешуйте довжину масиву всередині циклу, деякі секунди часу будуть ухилятися. Залежить від елементів у масиві, якщо в масиві є більше елементів, є велика різниця щодо Ms часу *

**

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***

**

Це, здається, найшвидший спосіб на сьогодні ...

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

Враховуйте, що це буде споживати масив, з'їдаючи його, і нічого не залишаючи ...

Це 2017 рік .

Я зробив кілька тестів.

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

Схоже, whileметод найшвидший у Chrome.

Схоже , лівий декремента ( --i) набагато швидше , ніж інші ( ++i, i--,i++ ) на Firefox.

Цей підхід є голодним в середньому. Але це повторює масив у зворотному порядку.

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

Якщо форвардний порядок важливий, використовуйте такий підхід.

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

Я завжди пишу в першому стилі.

Навіть якщо компілятор досить розумний, щоб оптимізувати його для масивів, але все-таки він розумний, якщо ми тут використовуємо DOMNodeList або якийсь складний об'єкт із розрахунковою довжиною?

Я знаю, про що йдеться про масиви, але я думаю, що це хороша практика писати всі свої петлі в одному стилі.

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

i ++ швидше, ніж ++ i, --i та i--

Крім того, ви можете зберегти останній рядок, виконуючи arr [i ++] в останній раз, коли вам потрібно отримати доступ до i (але це може бути важко налагодити).

Ви можете протестувати його тут (за допомогою інших тестів циклу): http://jsperf.com/for-vs-partpop/5

З вересня 2017 року ці тести на jsperf демонструють таку схему, яка є найбільш ефективною у Chrome 60:

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

Хтось здатний відтворити?

Я спробував деякі інші способи ітерації величезного масиву і з'ясував, що вдвічі зменшити довжину масиву, а потім ітерацію обох половин в одному циклі - це швидше. Цю різницю в продуктивності можна помітити під час обробки величезних масивів .

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++; 
  }
}

Деякі порівняння продуктивності (використовуючи timer.js) між кешованою довжиною для циклу VS за описаним вище способом.

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

Ще один тест jsperf.com: http://jsperf.com/time-reverse-vs-for-cached-length

Зворотний цикл, хоча цикл, здається, найшвидший. Проблема полягає лише в тому, що поки (--i) зупиниться на 0. Як я можу отримати доступ до масиву [0] у своєму циклі?

Основний цикл у той час як часто є найшвидшим. jsperf.com - це чудова пісочниця для перевірки таких типів понять.

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

Хоча цикл трохи швидший, ніж для циклу.

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

Використовуйте натомість цикл

Найшвидший підхід - традиційний для циклу. Ось більш повне порівняння продуктивності.

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

Найелегантніше рішення, про яке я знаю, - це використання карт.

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

Спробуйте це:

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

Швидший спосіб циклічного циклу - це використання фільтра. Метод filter () створює новий масив з усіма елементами, які проходять тест, реалізований наданою функцією.

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);

Зі свого досвіду, я завжди віддаю перевагу фільтрам, картам тощо.

Станом на 2019 рік WebWorker стає більш популярним, для великих наборів даних ми можемо використовувати WebWorker для обробки набагато швидше, повністю використовуючи багатоядерні процесори.

У нас також є Parallel.js, який значно спрощує використання WebWorker для обробки даних.