<p>opera, safari, firefox и chrome теперь все совместно используют набор улучшенных методов array для оптимизации многих распространенных циклов.</p><p>вам могут не понадобиться все из них, но они могут быть очень полезными, или были бы, если бы каждый браузер поддерживал их.</p><p>mozilla labs опубликовала алгоритмы, которые они и <a href="http://en.wikipedia.org/wiki/webkit">webkit</a> оба используют, чтобы вы могли добавить их самостоятельно.</p><p><strong>filter</strong> возвращает массив элементов, которые удовлетворяют некоторому условию или тесту.</p><p><strong>every</strong> возвращает true, если каждый член массива проходит тест.</p><p><strong>some</strong> возвращает true, если любой прошел тест.</p><p><strong>foreach</strong> запускает функцию для каждого члена массива и ничего не возвращает.</p><p><strong>map</strong> аналогичен foreach, но возвращает массив результатов операции для каждого элемента.</p><p>все эти методы берут функцию для своего первого аргумента и имеют необязательный второй аргумент, который является объектом, область которого вы хотите наложить на члены массива, когда они перебирают функцию.</p><p>игнорируйте это, пока вам это не нужно.</p><p><strong>indexof</strong> и <strong>lastindexof</strong> находят подходящую позицию первого или последнего элемента, которая точно соответствует его аргументу.</p><pre><code>(function(){ var p, ap= array.prototype, p2={ filter: function(fun, scope){ var l= this.length, a= [], i= 0, val; if(typeof fun== 'function'){ while(i< l){ if(i in this){ val= this[i]; if(fun.call(scope, val, i, this)){ a[a.length]= val; } } ++i; } } return a; }, every: function(fun, scope){ var l= this.length, i= 0; if(typeof fun== 'function'){ while(i<l){ if(i in this && !fun.call(scope, this[i], i, this)) return false; ++i; } return true; } return null; }, foreach: function(fun, scope){ var l= this.length, i= 0; if(typeof fun== 'function'){ while(i< l){ if(i in this){ fun.call(scope, this[i], i, this); } ++i; } } return this; }, indexof: function(what, i){ i= i || 0; var l= this.length; while(i< l){ if(this[i]=== what) return i; ++i; } return -1; }, lastindexof: function(what, i){ var l= this.length; i= i || l-1; if(isnan(i) || i>= l) i= l-1; else if(i< 0) i += l; while(i> -1){ if(this[i]=== what) return i; --i; } return -1; }, map: function(fun, scope){ var l= this.length, a= array(this.length), i= 0, val; if(typeof fun== 'function'){ while(i< l){ if(i in this){ a[i]= fun.call(scope, this[i], i, this); } ++i; } return a; } }, some: function(fun, scope){ var i= 0, l= this.length; if(typeof fun== 'function'){ while(i<l){ if(i in this && fun.call(scope, this[i], i, this)) return true; ++i; } return false; } } } for(p in p2){ if(!ap[p]) ap[p]= p2[p]; } return true; })(); </code></pre>

<p>если вам нужен краткий способ написать быстрый цикл <em>и</em>, вы можете выполнить итерацию в обратном порядке:</p><pre><code>for (var i=myarray.length;i--;){ var item=myarray[i]; } </code></pre><p>это дает преимущество кэширования длины (аналогично <code>for (var i=0, len=myarray.length; i<len; ++i)</code> и в отличие от <code>for (var i=0; i<myarray.length; ++i)</code>) при меньшем наборе символов.</p><p>даже в некоторых случаях вы должны выполнять итерацию в обратном порядке, например, при выполнении итерации по <a href="https://developer.mozilla.org/en/dom/nodelist#a\_.22live.22\_collection">live nodelist</a> , где вы планируете удалять элементы из dom во время итерации.</p>

<p>я бы настоятельно рекомендовал использовать библиотеку <a href="http://documentcloud.github.com/underscore">underscore.js</a> . он предоставляет вам различные функции, которые вы можете использовать для перебора массивов/коллекций.</p><p>например:</p><pre><code>\_.each([1, 2, 3], function(num){ alert(num); }); => alerts each number in turn... </code></pre>

<p>цикл массива:</p><pre><code>for(var i = 0; i < things.length; i++){ var thing = things[i]; console.log(thing); } </code></pre><p>объектный цикл:</p><pre><code>for(var prop in obj){ var propvalue = obj[prop]; console.log(propvalue); } </code></pre>

<p>если кого-то интересует производительность нескольких механизмов, доступных для итераций array я подготовил следующие тесты jsperf:</p><p> <a href="https://jsperf.com/fastest-array-iterator">https://jsperf.com/fastest-array-iterator</a> </p><p> <a href="https://i.stack.imgur.com/uoj9f.jpg"> <img src="https://i.stack.imgur.com/uoj9f.jpg" alt="performamce results"> </a> </p><h2>результаты :</h2><p>традиционный итератор <code>for()</code>, безусловно, является самым быстрым методом, особенно при использовании с кэшированной длиной <strong>array</strong>.</p><pre><code>let arr = [1,2,3,4,5]; for(let i=0, size=arr.length; i<size; i++){ // do something } </code></pre><p>методы <code>array.prototype.foreach()</code> и <code>array.prototype.map()</code> являются самыми медленными приближениями, вероятно, вследствие издержек вызова функции <strong></strong> </p>

<h2>самый элегантный и быстрый способ</h2><pre><code>var arr = [1, 2, 3, 1023, 1024]; for (var value; value = arr.pop();) { value + 1 } </code></pre><p> <a href="http://jsperf.com/native-loop-performance/8">http://jsperf.com/native-loop-performance/8</a> </p><hr><h2>отредактировано (потому что я был неправ)</h2><hr><p>сравнение методов для циклического прохождения массива из 100000 элементов и выполнения минимальной операции с новым значением каждый раз.</p><ul> <li> <a href="http://jsben.ch/#/bqhed">http://jsben.ch/#/bqhed</a> </li> </ul><p><strong>подготовка:</strong></p><pre><code><script src="//code.jquery.com/jquery-2.1.0.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script> benchmark.prototype.setup = function() { // fake function with minimal action on the value var tmp = 0; var process = function(value) { tmp = value; // hold a reference to the variable (prevent engine optimisation?) }; // declare the test array var arr = []; for (var i = 0; i < 100000; i++) arr[i] = i; }; </script> </code></pre><p><strong>тесты:</strong></p><pre><code><a href="http://jsperf.com/native-loop-performance/16" title="http://jsperf.com/native-loop-performance/16" ><img src="http://i.imgur.com/ytro68e.png" title="hosted by imgur.com" /></a> </code></pre>

<p>оптимизированный подход заключается в кэшировании длины массива и использовании одного шаблона var, инициализирующего все переменные одним ключевым словом var.</p><pre><code>var i, max, mystringarray = ["hello","world"]; for (i = 0, max = mystringarray.length; i < max; i++) { alert(mystringarray[i]); //do something } </code></pre><p>если порядок итераций не имеет значения, чем вы должны попробовать обратный цикл, он будет самым быстрым, так как он уменьшит нагрузку на тестирование условий и уменьшение будет в одном выражении:</p><pre><code>var i,mystringarray = ["item1","item2"]; for (i = mystringarray.length; i--) { alert(mystringarray[i]); } </code></pre><p>или лучше и чище использовать цикл while:</p><pre><code>var mystringarray = ["item1","item2"],i = mystringarray.length; while(i--) { // do something with fruits[i] } </code></pre>

<p>краткий ответ: да. вы можете сделать с этим:</p><pre><code>var myarray = ["element1", "element2", "element3", "element4"]; for (i = 0; i < myarray.length; i++) { console.log(myarray[i]); } </code></pre><p>в консоли браузера вы можете увидеть что-то вроде «element1», «element2» и т.д. напечатано.</p>

<p>например, я использовал в консоли firefox:</p><pre><code>[].foreach.call(document.getelementsbytagname('pre'), function(e){ console.log(e); }) </code></pre>

<pre><code>var x = [4, 5, 6]; for (i = 0, j = x[i]; i < x.length; j = x[++i]) { console.log(i,j); } </code></pre><p>намного чище ...</p>

<p>если вы хотите использовать jquery, в его документации есть пример nice:</p><pre><code> $.each([ 52, 97 ], function( index, value ) { alert( index + ": " + value ); }); 

это не на 100% идентично, но похоже:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"> var mystringarray = ['hello', 'world']; // array uses [] not {} for (var i in mystringarray) { console.log(i + ' -> ' + mystringarray[i]); // i is the index/key, not the item }   

простое решение в одну строку<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override">arr = ["table", "chair"]; // solution arr.map((e) => { console.log(e); return e; });   

конечно, это неэффективно, и многие презирают его, но это один из самых близких к упомянутому:var mystringarray = ["hello","world"]; mystringarray.foreach(function(f){ // do something }) 

похоже, что перечислены все варианты, кроме foreach by <a href="https://lodash.com/docs/4.17.4">lodash :_.foreach([1, 2], (value) => { console.log(value); }); 

ну как на счет этого:for (var key in mystringarray) { console.log(mystringarray[key]); } 

var mystringarray = ["hello", "world"]; mystringarray.foreach(function(val, index){ console.log(val, index); }) 

лучше использовать последовательный цикл for:for (var i = 0; i < mystringarray.length; i++) { // do something } 

резюме:при переборе массива мы часто хотим достичь одной из следующих целей: создайте новый массив, оставьте исходный без изменений: используйте map() выполните действие с/над каждым элементом массива и, возможно, измените массив: используйте for..of, foreach() или обычный цикл for примеры:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override">const arr1 = [1, 2, 3]; const arr2 = arr1.map(el => el  2); // with map we create a new arr2, arr1 is left untouched console.log(arr2, arr1); // regular for loop for (let i = 0; i < arr1.length; i++) { console.log(arr1[i]); } console.log('n'); // for of loop for (let el of arr1) { console.log(el); } console.log('n'); // foreach() arr1.foreach(el => { console.log(el) })   какой использовать?в большинстве случаев это не так важно. однако есть некоторые случаи, когда один тип итерации может быть более подходящим для ваших нужд: если вы хотите манипулировать массивом, но оставить старый массив нетронутым (например, функциональное программирование), вы можете лучше всего использовать map() для итерации. если вам не нужно возвращать новый массив, не используйте map(). map() имеет самую низкую производительность среди всех циклических методов. когда производительность играет роль, когда вам нужно перебрать очень много, обычный цикл for: for(let i=0; i < arr.length; i++) {}часто (может отличаться из-за различий в движке js) лучшая производительность, потому что это самая итеративная форма итерации. 

var obj = ["one","two","three"]; for(x in obj){ console.log(obj[x]); } 

зацикливание массива рекурсивно const data = ['one', 'two', 'three'] const loop = (items, index=0) => { if (items.length === index) { return; } console.log(items[index], index) loop(items, index+=1) } loop(data) 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override">var array = ['hai', 'hello', 'how', 'are', 'you'] $(document).ready(function () { $('#clickbutton').click(function () { for (var i = 0; i < array.length; i++) { alert(array[i]) } }) })</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <input id="clickbutton" value="click me" type="button"/> <div id="show"></div></code></pre> </div> </div> </p>