Во многих (в большинстве) языках программирования массив и объект - это разные сущности, с разными характеристиками. В JavaScript объект и массив - это, по сути, одно и то же. 

Точнее, не так, объекты в JavaScript сочетают в себе два важных функционала. Первый – это ассоциативный массив: структура, пригодная для хранения любых данных. Второй – языковые возможности для объектно-ориентированного программирования. Массив – разновидность объекта, которая предназначена для хранения пронумерованных значений и предлагает дополнительные методы для удобного манипулирования такой коллекцией.

В данной статье рассмотрим основные варианты перебора элементов массивов (ассоциативных и обычных, пронумерованных).

Для наглядности, пронумерованный массив имеет вид простого перечисления элементов. При этом, каждому элементу автоматически будет присвоен индекс (начиная с нуля):

var arr = ["Яблоко", "Апельсин", "Груша"];

Для ассоциативного массива, ключи указывает разработчик:

var grades = [];
grades['Sam'] = 90;
grades['Joe'] = 85;
grades['Sue'] = 94;
grades['Beth'] = 82;

Перебирающие методы

Для перебора элементов пронумерованных массивов существует несколько вариантов:

forEach

Метод «arr.forEach(callback[, thisArg])» используется для перебора массива. Данный метод каждого элемента массива вызывает функцию callback.

Этой функции он передаёт три параметра callback(item, i, arr):

• item – очередной элемент массива.
• i – его номер.
• arr – массив, который перебирается.

Например:

var arr = ["Яблоко", "Апельсин", "Груша"];
arr.forEach(function(item, i, arr) {
  console.log( i + ": " + item + " (массив:" + arr + ")" );
});

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

filter

Метод «arr.filter(callback[, thisArg])» используется для фильтрации массива через функцию. Данный метод создаёт новый массив, в который войдут только те элементы arr, для которых вызов callback(item, i, arr) возвратит true.

Например:

var arr = [1, -1, 2, -2, 3];
var positiveArr = arr.filter(function(number) {
  return number > 0;
});
console.log( positiveArr ); // 1,2,3

map

Метод «arr.map(callback[, thisArg])» используется для трансформации массива. Будет создан новый массив, который будет состоять из результатов вызова callback(item, i, arr) для каждого элемента arr.

var names = ['HTML', 'CSS', 'JavaScript'];
var nameLengths = names.map(function(name) {
  return name.length;
});
// получили массив с длинами
console.log( nameLengths ); // 4,3,10

every/some

Эти методы используются для проверки массива:

• Метод «arr.every(callback[, thisArg])» возвращает true, если вызов callback вернёт true для каждого элемента arr.
• Метод «arr.some(callback[, thisArg])» возвращает true, если вызов callback вернёт true для какого-нибудь элемента arr.

Например:

var arr = [1, -1, 2, -2, 3];
function isPositive(number) {
  return number > 0;
}
alert( arr.every(isPositive) ); // false, не все положительные
alert( arr.some(isPositive) ); // true, есть хоть одно положительное

reduce/reduceRight

Метод «arr.reduce(callback[, initialValue])» используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата. Это один из самых сложных методов для работы с массивами. C его помощью можно в несколько строк решить задачу, которая иначе потребовала бы в разы больше места и времени.

Данный метод используется для вычисления на основе массива какого-либо единого значения, иначе говорят «для свёртки массива». Он применяет функцию callback по очереди к каждому элементу массива слева направо, сохраняя при этом промежуточный результат.

Аргументы функции callback(previousValue, currentItem, index, arr):

• previousValue – последний результат вызова функции, он же «промежуточный результат».
• currentItem – текущий элемент массива, элементы перебираются по очереди слева-направо.
• index – номер текущего элемента.
• arr – обрабатываемый массив.

Кроме callback, методу можно передать «начальное значение» – аргумент initialValue. Если он есть, то на первом вызове значение previousValue будет равно initialValue, а если у reduce нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.

Например, в качестве «свёртки» мы хотим получить сумму всех элементов массива.

var arr = [1, 2, 3, 4, 5]
// для каждого элемента массива запустить функцию,
// промежуточный результат передавать первым аргументом далее
var result = arr.reduce(function(sum, current) {
  return sum + current;
}, 0);
alert( result ); // 15

При первом запуске sum – исходное значение, с которого начинаются вычисления, равно нулю (второй аргумент reduce). Сначала анонимная функция вызывается с этим начальным значением и первым элементом массива, результат запоминается и передаётся в следующий вызов, уже со вторым аргументом массива, затем новое значение участвует в вычислениях с третьим аргументом и так далее.

Метод arr.reduceRight работает аналогично, но идёт по массиву справа-налево.

Перебор элементов в ассоциативном массив

Ассоциативные массивы действуют немного иначе, чем индексные. Прежде всего, длина массива в этом примере будет равна 0. Как же узнать, какие элементы находятся в массиве? Единственный способ сделать это – использовать цикл “for - in”:

for(student in grades){

 alert("Оценка " + student + "будет: " + grades[student]);

}

Синтаксис цикла for-in следующий: for(item in object){ }. Цикл пройдет через все элементы в объекте, и элемент будет именем элемента. В данном случае элементом является “Sam ", затем “ Joe ", “ Sue " и "Beth".