Это работает так:
// REQUIRES ECMASCRIPT 2015+ var s, myStringArray = ["Hello", "World"]; for (s of myStringArray) { // ... do something with s ... }
Или, что еще лучше, поскольку ECMAScript 2015 также предоставляет переменные в области блока с помощью let и const:
// REQUIRES ECMASCRIPT 2015+ const myStringArray = ["Hello", "World"]; for (const s of myStringArray) { // ... do something with s ... } // s is no longer defined here
Примечание о разреженных массивах: массив в JavaScript может фактически не хранить столько элементов, сколько указано в его length ; это сообщаемое число просто на единицу больше, чем самый высокий индекс, при котором хранится значение. Если массив содержит меньше элементов, чем указано в его длине, он называется разреженным. Например, вполне законно иметь массив с элементами только по индексам 3, 12 и 247; length такого массива указана как 248, хотя на самом деле он хранит только 3 значения. Если вы попытаетесь получить доступ к элементу по любому другому индексу, у массива появится undefined значение. Поэтому, когда вы хотите "перебрать" массив, у вас есть вопрос, на который нужно ответить: хотите ли вы перебрать весь диапазон, указанный его длиной, и обработать undefined для любых пропущенных элементов, или вы хотите обработать только элементы на самом деле подарок? Существует множество приложений для обоих подходов; это зависит только от того, для чего вы используете массив.
Если вы перебираете массив с помощью for .. of , тело цикла выполняется по length , а переменная управления циклом устанавливается undefined для любых элементов, которые на самом деле отсутствуют в массиве. В зависимости от деталей вашего кода "делать что-то", такое поведение может быть тем, что вы хотите, но если это не то, что вы хотите, вам следует использовать другой подход.
Конечно, некоторые разработчики не имеют иного выбора, кроме как использовать другой подход в любом случае, потому что по какой - то причине они ориентации версию JavaScript, который еще не поддерживается for ... of .
Пока ваша реализация JavaScript совместима с предыдущей версией спецификации ECMAScript (которая, например, исключает версии Internet Explorer до 9), вы можете использовать метод итератора Array#forEach вместо цикла. В этом случае вы передаете функцию, которая будет вызываться для каждого элемента в массиве:
Var myStringArray = [ "Hello", "World" ]; myStringArray.forEach(function(s) { // ... do something with s ... });
В отличие от for ... of , .forEach вызывает функцию только для элементов, которые на самом деле содержат значения. Если передать наш гипотетический массив с тремя элементами и длиной 248, он будет вызывать функцию только три раза, а не 248 раз. Он также различает отсутствующие элементы и элементы, которые на самом деле установлены как undefined ; для последнего он по-прежнему будет вызывать функцию, передавая в качестве аргумента undefined значение. Если это, как вы хотите обрабатывать разреженные массивы, .forEach может быть путь, даже если ваш переводчик поддерживает for ... of .
Последний вариант, который работает во всех версиях JavaScript, - это явный цикл подсчета . Вы просто считаете от 0 до единицы меньше длины и используете счетчик в качестве индекса. Основной цикл выглядит так:
- HTML
- JavaScript
Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery each .
// выбираем элементы var myList = $("ul li"); // определяем количество элементом в выборке var total = myList.length; // осуществляем перебор выбранных элементов myList.each(function(index) { if (index === total - 1) { // это последний элемент в выборке } });
The forEach() method executes a provided function once for each array element.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax arr .forEach(callback(currentValue [, index [, array]]) [, thisArg ]); Parameters callback Function to execute on each element, taking three arguments: currentValue The current element being processed in the array. index Optional The index of the current element being processed in the array. array Optional The array forEach() was called upon. thisArg Optional Value to use as this when executing callback . Return value DescriptionforEach() calls a provided callback function once for each element in an array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized (i.e. on sparse arrays, ).
callback is invoked with three arguments:
If a thisArg parameter is provided to forEach() , it will be used as callback"s this value. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function .
The range of elements processed by forEach() is set before the first invocation of callback . Elements which are appended to the array after the call to forEach() begins will not be visited by callback . If existing elements of the array are changed or deleted, their value as passed to callback will be the value at the time forEach() visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using shift()) during the iteration, later elements will be skipped - see example below .
forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.
forEach() does not mutate the array on which it is called (although callback , if invoked, may do so).
There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.
Early termination may be accomplished with:
Array methods: every() , some() , find() , and findIndex() test the array elements with a predicate returning a truthy value to determine if further iteration is required.
Examples No operation for uninitialized values (sparse arrays) const arraySparse = ; let numCallbackRuns = 0; arraySparse.forEach(function(element){ console.log(element); numCallbackRuns++; }); console.log("numCallbackRuns: ", numCallbackRuns); // 1 // 3 // 7 // numCallbackRuns: 3 // comment: as you can see the missing value between 3 and 7 didn"t invoke callback function. Converting a for loop to forEach const items = ["item1", "item2", "item3"]; const copy = ; // before for (let i=0; i { if (Array.isArray(i)) { result.push(...flatten(i)) } else { result.push(i) } }) return result } // Usage const problem = , 8, 9]] flatten(problem) // Specifications| ECMAScript Latest Draft (ECMA-262) |
Draft | |
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of "Array.prototype.forEach" in that specification. |
Standard | |
| ECMAScript 5.1 (ECMA-262) The definition of "Array.prototype.forEach" in that specification. |
Standard | Initial definition. Implemented in JavaScript 1.6. |
The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile Server | ||||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js | ||||||||||||
| Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes | nodejs Full support Yes |
22 ответа
После выполнения этого теста с большинством современных браузеров...
В настоящее время самая быстрая форма цикла (и, на мой взгляд, наиболее синтаксически очевидная).
стандарт для цикла с кэшированием по длине
For (var i = 0, len = myArray.length; i < len; i++) { }
Я бы сказал, что это определенно случай, когда я приветствую разработчиков движка JavaScript. Время выполнения должно быть оптимизировано для ясности , а не для удобства.
По состоянию на июнь 2016 года , несколько тестов в последнем Chrome (71% рынка браузеров в мае 2016 года и увеличение):
- Самый быстрый цикл - это цикл цикла , как с длиной кеширования, так и без него, что обеспечивает очень похожую производительность. (Цикл for с кэшированной длиной иногда дает лучшие результаты, чем тот, который не кэшируется, но разница почти незначительна, а это значит, что движок может быть оптимизирован в пользу стандартного и, возможно, самого простого цикла без кэширования).
- Цикл while с декрементами был примерно в 1,5 раза медленнее, чем цикл for.
- Цикл с использованием функции обратного вызова (например, standard forEach) был примерно в 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. Хотя я думаю, что в наши дни это действительно не нужно:
For (var i = 0, len = arr.length; i < len; i++) { // Do stuff with arr[i] }
Это просто 2018, так что обновление может быть хорошим...
И я действительно должен не согласиться с принятым ответом . Это зависит от разных браузеров. некоторые делают forEach быстрее, некоторые for-loop , а некоторые while тестируют все методы http://jsben.ch/mW36e
Arr.forEach(a => { // ... }
и так как вы можете увидеть множество циклов for(a = 0;...) например, for(a = 0;...) то стоит упомянуть, что без переменных "var" будет определяться глобально, и это может существенно повлиять на скорость, поэтому она будет медленной.
var arr = arr = new Array(11111111).fill(255);
var benches =
[ [ "empty", () => < 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..in (only 3.3%)", () => {
var ar = arr.slice(0,arr.length/33);
for(const a in ar) {
var b = a + 1;
}
}]
, ["Duff device", () => {
var i = 0;
var r = arr.length % 8;
var n = (arr.length - r) / 8;
if (r > 0) do {
var b = arr + 1;
}
while (--r);
if (n > 0) do {
var b = arr[i] + 1;
var c = arr + 1;
var d = arr + 1;
var e = arr + 1;
var f = arr + 1;
var g = arr + 1;
var h = arr + 1;
var k = arr + 1;
i = --n >>> 3;
}
while (n);
}]
, ["Duff device negative", () => {
var r = arr.length % 8;
var n = (arr.length-r) / 8; ///Math.floor(arr.length / 8);
var i = arr.length ; // -1;
while(r){
var b = arr[--i] + 1;
--r;
}
while(n){
var b = arr[i] + 1;
var c = arr + 1;
var d = arr + 1;
var e = arr + 1;
var f = arr + 1;
var g = arr + 1;
var h = arr + 1;
var j = arr + 1;
i = --n >>> 3;
}
}]];
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
}).sort((a,b) => a-b);
var max = times;
times = times.map(a => {a = (a/max)*100; return a; });
var template = (title, time, n) =>
"" +
"${title} " +
" ${Number(time.toFixed(3))}msec" +
"";
var strRes = times.map(t => template(...t)).join("\n") +
"
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; } }
2014 While назад
Подумайте логично.
Посмотрите на это
For(var index = 0 , length = array.length ; index < length ; index++) { //do stuff }
- Необходимо создать не менее 2 переменных (индекс, длина)
- Необходимо проверить, меньше ли указатель длины
- Необходимо увеличить индекс
- цикл for имеет 3 параметра
Теперь скажите мне, почему это должно быть быстрее, чем:
Var length = array.length; while(--length) { //or length-- //do stuff }
- Одна переменная
- Нет проверок
- индекс уменьшается (машины предпочитают это)
- While имеет только один параметр
Я был полностью сбит с толку, когда Chrome 28 показал, что цикл for работает быстрее, чем время. Это должно быть как-то вроде
"Ну, каждый использует цикл for, пусть фокусируется на этом, когда для хром ".
Но теперь, в 2014 году, цикл while возвращается на хром. он в 2 раза быстрее, в других/старых браузерах он всегда был быстрее.
В последнее время я сделал несколько новых тестов. Теперь в реальном мире envoirement эти короткие коды ничего не стоят, и jsperf не может фактически правильно выполнить цикл while, потому что ему нужно воссоздать array.length, что также требует времени.
НЕ МОЖЕТ получить фактическую скорость цикла while на jsperf.
вам нужно создать свою собственную функцию и проверить, что с помощью window.performance.now()
И да... нет никакого способа, чтобы цикл while был быстрее.
Реальная проблема - это фактическое манипулирование/время воспроизведения/ время рисования или, тем не менее, вы хотите называть его.
Например, у меня есть сцена canvas, где мне нужно вычислить координаты и коллизии... это делается между 10-200 MicroSeconds (не миллисекундами). он фактически принимает различные миллисекунды, чтобы сделать все. Так же, как в DOM.
В некоторых случаях существует еще один суперэффективный способ использования loop ... например, для копирования/клонирования массива
For(var i = array.length ; i > 0 ; arrayCopy[ --i ] = array[ i ] // doing stuff);
Обратите внимание на настройку параметров:
- То же, что и в цикле while. Я использую только одну переменную
- Необходимо проверить, больше ли индекс больше 0;
- Как вы можете видеть, этот подход отличается от обычного для цикла, который каждый использует, поскольку я делаю материал внутри 3-го параметра, а также уменьшаю непосредственно внутри массива.
Сказано, что это подтверждает, что машины, такие как
писал, что я думал, чтобы сделать его немного короче и удалить некоторые бесполезные вещи и написал этот, используя тот же стиль:
For(var i = array.length ; i-- ; arrayCopy[ i ] = array[ i ] // doing stuff);
Даже если это короче, похоже, что использование i еще раз замедляет все. Это на 1/5 медленнее предыдущего цикла for и While .
Примечание: ; очень важно после того, как для looo без {}
Даже если я только что сказал вам, что jsperf - это не лучший способ протестировать скрипты. Я добавил здесь 2 цикла.
И вот еще один ответ о производительности в javascript
Этот ответ должен показать исполнительные способы написания javascript. Поэтому, если вы не можете прочитать это, спросите, и вы получите ответ или прочитаете книгу о javascript http://www.ecma-international.org/ecma-262/5.1/
Последняя ревизия теста, которую я подготовил (путем повторного использования более старого), показывает одну вещь.
Длина кэширования не так важна, но это не вредит.
Каждый первый запуск теста, связанного выше (на недавно открывшейся вкладке), дает наилучшие результаты для последних 4 фрагментов (3-й, 5-й, 7-й и 10-й в диаграммах) в Chrome, Opera и Firefox на моем 64-битном Debian Squeeze (мое настольное оборудование). Последующие прогоны дают совсем другой результат.
Выводы по производительности просты:
- Перейдите в цикл for (вперед) и проверьте с помощью!== вместо < .
- Если вам не нужно повторно использовать массив позже, тогда также эффективен цикл с уменьшенной длиной и деструктивным массивом shift() -ing.
В настоящее время (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/С++/Java, не будет тратить мс, чтобы прочитать этот
For(var i=0; i < arr.length; i++){ // blah blah }
** кешируйте длину массива внутри цикла, некоторые секунды времени будут ускользать. Зависит от элементов в массиве, если в массиве есть больше элементов, существует большая разница относительно Ms времени *
SArr; //Array; for(var i = 0 ; 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 и я -
Программы и игры
