Foreach js для массивов и коллекций. Перебор свойств в объектах
Это работает так:
// 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 до единицы меньше длины и используете счетчик в качестве индекса. Основной цикл выглядит так:
{
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 и я -
Статья, в которой рассмотрим на примерах использование функции и метода библиотеки jQuery each .
В библиотеке jQuery имеются 2 разные сущности с названием each .
Первая (jQuery.each ) - это универсальная функция jQuery с помощью которой можно осуществить перебор элементов массива или объекта.
Вторая (each ) - это метод, который применяется к набору элементов для организации цикла по ним.
Цикл each (jQuery.each). Примеры использованияСинтаксис функции each :
// array или object - массив или объект, элементы или свойства которого необходимо перебрать // callback - функция, которая будет выполнена для каждого элемента массива или свойства объекта $.each(array или object,callback);
Работу с функцией each разберём на примерах.
Пример №1. В нём выполним переберор всех элементов массива (array).
// массив, состоящий из 3 строк var arr = ["Автомобиль","Грузовик","Автобус"]; // переберём массив arr $.each(arr,function(index,value){ // действия, которые будут выполняться для каждого элемента массива // index - это текущий индекс элемента массива (число) // value - это значение текущего элемента массива //выведем индекс и значение массива в консоль console.log("Индекс: " + index + "; Значение: " + value); }); /* Результат (в консоли): Индекс: 0; Значение: Автомобиль Индекс: 1; Значение: Грузовик Индекс: 2; Значение: Автобус */
В вышеприведённом коде функция each используется для перебора массива. Функция имеет 2 обязательных параметра . Первый параметр - это сущность (массив или объект), элементы (свойства) которой необходимо перебрать. В данном случае - это массив arr . Второй параметр - это функция обратного вызова, которая будет выполнена для каждого элемента (в данном случае) массива. Она имеет 2 параметра , которые доступны внутри неё посредством соответствующих переменных. Первый параметр - это порядковый номер элемента (отсчёт выполняется с 0). Второй параметр - это значение текущего элемента массива.
Пример №2. В этом примере осуществим перебор всех свойств объекта.
// объект smartphone, имеющий 5 свойств
var smartphone = {
"name": "LG G5 se",
"year": "2016",
"screen-size": "5.3",
"screen-resolution": "2560 x 1440",
"os" : "Android 6.0 (Marshmallow)"
};
// переберём объект smartphone
$.each(smartphone, function(key, value) {
// действия, которые будут выполняться для каждого свойства объекта
// key - текущее имя свойства массива
// value - значение текущего свойства объекта
// выведем имя свойства и его значение в консоль
console.log("Свойство: " +key + "; Значение: " + value);
});
/*
Результат (в консоли):
Свойство: name; Значение: LG G5 se
Свойство: year; Значение: 2016
Свойство: screen-size; Значение: 5.3
Свойство: screen-resolution; Значение: 2560 x 1440
Свойство: os; Значение: Android 6.0 (Marshmallow)
*/
Функция each может использоваться для перебора JavaScript объектов. Отличие её использования заключается только в том, что параметры функции обратного вызова имеют другие значения. Первый параметр хранит название свойства объекта, а второй - значение этого свойства.
Пример №3. В нём осуществим перебор более сложной структуры (рассмотрим, как использовать вложенные each ).
// объект, состоящий из 2 свойств. Каждое свойство этого объект имеет в качестве значения массив, элементами которого являются тоже объекты var articles = { "Bootstrap": [ {"id":"1", "title":"Введение"}, {"id":"2", "title":"Как установить"}, {"id":"3", "title":"Сетка"} ], "JavaScript": [ {"id":"4", "title":"Основы"}, {"id":"5", "title":"Выборка элементов"} ] }; $.each(articles,function(key,data) { console.log("Раздел: " + key); $.each(data, function(index,value) { console.log("Статья: id = " + value["id"] + "; Название = "+ value["title"]); }); }); /* Результат: Раздел: Bootstrap Статья: id = 1; Название = Введение Статья: id = 2; Название = Как установить Статья: id = 3; Название = Сетка Раздел: JavaScript Статья: id = 4; Название = Основы Статья: id = 5; Название = Выборка элементов */
Как прервать each (выйти из цикла)?Прерывание (break) цикла each осуществляется с помощью оператора return , который должен возвращать значение false .
Например, прервём выполнение цикла each после того как найдём в массиве arr число 7:
// массив, состоящий из 5 чисел var arr = ; // число, которое необходимо найти var find = 7; // переберём массив arr $.each(arr, function (index, value) { // если необходимое число найдено, то.. if (value === find) { // вывести его в консоль console.log("Ура! Число " + find + " найдено! Данное число имеет индекс: " + index); // прервать выполнение цикла return false; } else { // иначе вывести в консоль текущее число console.log("Текущее число: " + value); } }); /* Результат (в консоли): Текущее число: 5 Текущее число: 4 Ура! Число 7 найдено! Данное число имеет индекс: 2 */
Как перейти к следующей итерации (each continue)?В each прерывание выполнения текущей итерации и переход к следующей осуществляется с помощью оператора return , который должен иметь значение отличное от false .
// массив, состоящий из чисел var arr = ; // массив, который должен содержать все элементы массива arr, кроме чётных чисел var newarr = ; // переберём массив arr $.each(arr, function (index, value) { // если элемент чётный, то пропустим его if (value % 2 === 0) { // прервём выполнение текущей итерации и перейдём к следующей return; } // добавить в массив newarr значение value newarr.push(value); }); console.log("Исходный массив (arr): " + arr.join()); console.log("Результирующий массив (newarr): " + newarr.join()); /* Результат (в консоли): Исходный массив (arr): 3,5,4,9,17,19,30,35,40 Результирующий массив (newarr): 3,5,9,17,19,35 */
Перебор текущих элементов (.each)Синтаксис метода each (пременяется только к выбранным элементам):
.each(function);
// function - функция, которая будет выполнена для каждого элемента текущего объекта
Разберём, как работает метод.each на следующем примере (переберём элементы div):
// после загрузки DOM страницы выполнить $(function(){ // перебрать элементы div на странице $("div").each(function (index, element) { // index (число) - текущий индекс итерации (цикла) // данное значение является числом // начинается отсчёт с 0 и заканчивается количеству элементов в текущем наборе минус 1 // element - содержит DOM-ссылку на текущий элемент console.log("Индекс элемента div: " + index + "; id элемента = " + $(element).attr("id")); }); }); // Результат: // Индекс элемента div: 0; id элемента = id1 // Индекс элемента div: 1; id элемента = id2 // Индекс элемента div: 2; id элемента = id3
В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора $("div")). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента div). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) - DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово this , которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.
Например, выведем в консоль значение атрибута href для всех элементов а на странице:
$("a").each(function() { console.log($(this).attr("href")); });
$("a").each(function() { var link = $(this).attr("href"); if ((link.indexOf("http://") == 0) || (link.indexOf("https://") == 0)) { console.log("href ссылки = " + link); } }); // Если на странице расположены следующие ссылки: // Яндекс // Как работает JavaScript? // Bootstrap // То в консоли увидим следующий результат: // https://www.yandex.ru/ // http://getbootstrap.com/
Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс name (переберём все элементы одного класса).
Raspberry pi single-board compute Intel Galileo Gen2 19$ Pine A64 Plus // с помощью функции jQuery.each ($.each) $.each($(".name"),function(index,data) { console.log("Порядковый номер: " + index + " ; Содержимое: " +$(data).text()); }); // с помощью метода jQuery .each $(".name").each(function(index,data) { console.log("Порядковый номер: " + index + " ; Содержимое: " +$(data).text()); }); // Получим следующий ответ: // Порядковый номер: 0 ; Содержимое: Raspberry pi // Порядковый номер: 1 ; Содержимое: Intel Galileo Gen2 // Порядковый номер: 2 ; Содержимое: Pine A64 Plus
Например, разберём, как перебрать все элементы на странице.
$("*").each(function() { console.log(this); });
Например, выведем значение всех элементов input на странице.
$("input").each(function() { console.log($(this).val()); });
Например, переберём все дочерние элементы, расположенные в ul с id="myList" (each children).
- HTML
- JavaScript
Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery each .
// выбираем элементы var myList = $("ul li"); // определяем количество элементом в выборке var total = myList.length; // осуществляем перебор выбранных элементов myList.each(function(index) { if (index === total - 1) { // это последний элемент в выборке } });
- I. Перебор настоящих массивов
- Метод forEach и родственные методы
- Цикл for
- Правильное использование цикла for...in
- Цикл for...of (неявное использование итератора)
- Явное использование итератора
- II. Перебор массивоподобных объектов
- Использование способов перебора настоящих массивов
- Преобразование в настоящий массив
- Замечание по объектам среды исполнения
На данный момент есть три способа перебора элементов настоящего массива:
Кроме того, в скором времени, с появлением нового стандарта ECMAScript 6 (ES 6), ожидается еще два способа:
Если ваш проект рассчитан на поддержку возможностей стандарта 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, но перебирает элементы в обратном порядке.
Старый добрый 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