Javascript перебор элементов в ассоциативном массиве. JQuery - Перебор массива, объекта и элементов. Длина кэширования не так важна, но это не вредит
- Перевод
- I. Перебор настоящих массивов
- Метод forEach и родственные методы
- Цикл for
- Правильное использование цикла for...in
- Цикл for...of (неявное использование итератора)
- Явное использование итератора
- Использование способов перебора настоящих массивов
- Преобразование в настоящий массив
- Замечание по объектам среды исполнения
Пример использования:
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, но перебирает элементы в обратном порядке.
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 подобные игры с оптимизацией обычно ничего не значат.
Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , 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 аргумента.
Давайте детальнее разберём, как он работает.
Поток вычислений получается такой:
В виде таблицы, где каждая строка –- вызов функции на очередном элементе массива:
| первый вызов | 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 = вам надо проверить есть ли в массиве отрицательные числа и вывести результат на экран.
Ну и в заключении небольшое видео по методам для перебора массива в цикле.
Это работает так:
// 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) { // это последний элемент в выборке } });
