JQuery - Перебор массива, объекта и элементов. Массивы: перебирающие методы Метод forEach и родственные методы

• Перевод

• I. Перебор настоящих массивов
• Метод forEach и родственные методы
• Цикл for
• Правильное использование цикла for...in
• Цикл for...of (неявное использование итератора)
• Явное использование итератора
• Использование способов перебора настоящих массивов
• Преобразование в настоящий массив
• Замечание по объектам среды исполнения

I. Перебор настоящих массивов На данный момент есть три способа перебора элементов настоящего массива:

метод Array.prototype.forEach ;

классический цикл for ;

«правильно» построенный цикл for...in .

Кроме того, в скором времени, с появлением нового стандарта ECMAScript 6 (ES 6), ожидается еще два способа:

цикл for...of (неявное использование итератора);

явное использование итератора.

1. Метод forEach и родственные методы Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений - метод forEach .

Пример использования:
var a = ["a", "b", "c"]; a.forEach(function(entry) { console.log(entry); });
В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.

К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов.

Если вас беспокоят возможные затраты на вызов колбека для каждого элемента, не волнуйтесь и прочитайте это .

ForEach предназначен для перебора всех элементов массива, но кроме него ES5 предлагает еще несколько полезных методов для перебора всех или некоторых элементов плюс выполнения при этом каких-либо действий с ними:

• every - возвращает true , если для каждого элемента массива колбек возвращает значение приводимое к true .
• some - возвращает true , если хотя бы для одного элемента массива колбек возвращает значение приводимое к true .
• filter - создает новый массив, включающий те элементы исходного массива, для которых колбек возвращает true .
• map - создает новый массив, состоящий из значений возращаемых колбеком.
• reduce - сводит массив к единственному значению, применяя колбек по очереди к каждому элементу массива, начиная с первого (может быть полезен для вычисления суммы элементов массива и других итоговых функций).
• reduceRight - работает аналогично reduce, но перебирает элементы в обратном порядке.

2. Цикл forСтарый добрый for рулит :

Var a = ["a", "b", "c"]; var index; for (index = 0; index < a.length; ++index) { console.log(a); }
Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index < len; ++index) { console.log(a); }
Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.

Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) { console.log(a); }
Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.

3. Правильное использование цикла for...in Если вам посоветуют использовать цикл for...in , помните, что перебор массивов - не то, для чего он предназначен . Вопреки распространенному заблуждению цикл for...in перебирает не индексы массива, а перечислимые свойства объекта.

Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , for...in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:

// a - разреженный массив var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) { if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key

• HTML
• JavaScript

$("ul#myList").children().each(function(){ console.log($(this).text()); }); // Результат: // HTML // CSS // JavaScript

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery each .

// выбираем элементы var myList = $("ul li"); // определяем количество элементом в выборке var total = myList.length; // осуществляем перебор выбранных элементов myList.each(function(index) { if (index === total - 1) { // это последний элемент в выборке } });

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 и я -

• Перевод

• I. Перебор настоящих массивов
• Метод forEach и родственные методы
• Цикл for
• Правильное использование цикла for...in
• Цикл for...of (неявное использование итератора)
• Явное использование итератора
• Использование способов перебора настоящих массивов
• Преобразование в настоящий массив
• Замечание по объектам среды исполнения

I. Перебор настоящих массивов На данный момент есть три способа перебора элементов настоящего массива:

метод Array.prototype.forEach ;

классический цикл for ;

«правильно» построенный цикл for...in .

Кроме того, в скором времени, с появлением нового стандарта ECMAScript 6 (ES 6), ожидается еще два способа:

цикл for...of (неявное использование итератора);

явное использование итератора.

1. Метод forEach и родственные методы Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений - метод forEach .

Пример использования:
var a = ["a", "b", "c"]; a.forEach(function(entry) { console.log(entry); });
В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.

К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов.

Если вас беспокоят возможные затраты на вызов колбека для каждого элемента, не волнуйтесь и прочитайте это .

ForEach предназначен для перебора всех элементов массива, но кроме него ES5 предлагает еще несколько полезных методов для перебора всех или некоторых элементов плюс выполнения при этом каких-либо действий с ними:

• every - возвращает true , если для каждого элемента массива колбек возвращает значение приводимое к true .
• some - возвращает true , если хотя бы для одного элемента массива колбек возвращает значение приводимое к true .
• filter - создает новый массив, включающий те элементы исходного массива, для которых колбек возвращает true .
• map - создает новый массив, состоящий из значений возращаемых колбеком.
• reduce - сводит массив к единственному значению, применяя колбек по очереди к каждому элементу массива, начиная с первого (может быть полезен для вычисления суммы элементов массива и других итоговых функций).
• reduceRight - работает аналогично reduce, но перебирает элементы в обратном порядке.

2. Цикл forСтарый добрый for рулит :

Var a = ["a", "b", "c"]; var index; for (index = 0; index < a.length; ++index) { console.log(a); }
Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index < len; ++index) { console.log(a); }
Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.

Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) { console.log(a); }
Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.

3. Правильное использование цикла for...in Если вам посоветуют использовать цикл for...in , помните, что перебор массивов - не то, для чего он предназначен . Вопреки распространенному заблуждению цикл for...in перебирает не индексы массива, а перечислимые свойства объекта.

Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , for...in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:

// a - разреженный массив var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) { if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key 0; } if(mas.every(isPositiv)) { document.write("Массив содержит только положительные числа"); } else{ document.write("В массиве есть хотя бы одно отрицательное число "); } if(mas.some(isPositiv)) { document.write("В массиве есть хотя бы одно положительное число"); } else { document.write("В массиве нет положительных чисел"); }

Рассмотрим пример у нас есть массив с положительными и отрицательными числами и нам надо проверить его на наличие хотя бы одного отрицательного числа. Для этого используем методы every и some. Создаем функцию, которая будет возвращать положительные числа и затем ее передаем в метод every поскольку данный метод возвращает логический результат, то и используется он в условных операторах . Метод every в нашем примере вернет false потому что в массиве есть отрицательные числа, а вот метод some вернет true, потому что в массиве есть хотя бы одно положительное число.

reduce/reduceRight

Если вам нужно перебрать массив – вы можете использовать использовать forEach, for или for..of.

Если вам нужно перебрать массив и возвратить данные для каждого элемента – вы используете map.

Методы arr.reduce и arr.reduceRight похожи на методы выше, но они чуточку сложнее. Они используются для вычисления какого-нибудь одного значения на основе всего массива.

Синтаксис:

Let value = arr.reduce(function(previousValue, item, index, array) { // ... }, );

Функция применяется по очереди ко всем элементам массива и «переносит» свой результат на следующий вызов.

Аргументы:

• previousValue – результат предыдущего вызова этой функции, равен initial при первом вызове (если передан initial),
• item – очередной элемент массива,
• index – его индекс,
• array – сам массив.

При вызове функции результат её вызова на предыдущем элементе массива передаётся как первый аргумент.

Звучит сложновато, но всё становится проще, если думать о первом аргументе как «аккумулирующем» результат предыдущих вызовов функции. По окончании он становится результатом reduce.

Этот метод проще всего понять как всегда на примере.

Тут мы получим сумму всех элементов массива всего одной строкой:

Let arr = ; let result = arr.reduce((sum, current) => sum + current, 0); alert(result); // 15

Здесь мы использовали наиболее распространённый вариант reduce, который использует только 2 аргумента.

Давайте детальнее разберём, как он работает.

При первом запуске sum равен initial (последний аргумент reduce), то есть 0, а current – первый элемент массива, равнй 1. Таким образом, результат функции равен 1.

При втором запуске sum = 1, и к нему мы добавляем второй элемент массива (2).

При третьем запуске sum = 3, к которому мы добавляем следующий элемент, и так далее…

Поток вычислений получается такой:

В виде таблицы, где каждая строка –- вызов функции на очередном элементе массива:

sum current result

первый вызов		1	1
второй вызов	1	2	3
третий вызов	3	3	6
четвёртый вызов	6	4	10
пятый вызов	10	5	15

Здесь отчётливо видно, как результат предыдущего вызова передаётся в первый аргумент следующего.

Мы также можем опустить начальное значение:

Let arr = ; // убрано начальное значение (нет 0 в конце) let result = arr.reduce((sum, current) => sum + current); alert(result); // 15

Результат – точно такой же! Это потому, что при отсутствии initial в качестве 1-го значения берётся первый элемент массива, а перебор стартует со второго.

Таблица вычислений будет такая же за вычетом первой строки.

Но такое использование требует крайней осторожности. Если массив пуст, то вызов reduce без начального значения выдаст ошибку.

Вот пример:

Let arr = ; // Error: Reduce of empty array with no initial value // если бы существовало начальное значение, reduce вернул бы его для пустого массива. arr.reduce((sum, current) => sum + current);

Итоги

Итак подведем итоги мы рассмотрели различные методы для работы с массивами в цикле у всех этих методов есть одно общее это то что всем им надо передавать функцию в качестве аргумента.

• forEach – для перебора массива в цикле.
• filter – для осуществления фильтрации массива. Возвращает новый отфильтрованный массив
• every/some – для проверки массива на предмет присутствия отдельных элементов.
• map – для преобразования массива в массив. Возвращает исходный преобразованный массив.
• reduce/reduceRight — вычисляет одно значение из всего массива, вызывая функцию для каждого элемента и передавая промежуточный результат между вызовами. Можно использовать для подсчета суммы элементов массива.

Задания Получите новый массив

Пусть дан массив var mas = [«HTML», «CSS», «JavaScript», «Pascal»] вам надо с помощью метода map получить новый массив который будет содержать длины каждого элемента исходного массива.

Отфильтруйте массив

Есть массив var mas = вам надо, используя метод filter получить массив, который содержит только положительные числа.

Проверить массив

Есть массив var mas = вам надо проверить есть ли в массиве отрицательные числа и вывести результат на экран.

Ну и в заключении небольшое видео по методам для перебора массива в цикле.