Массивы. Все способы перебора массива в JavaScript

Массивы — это один из самых часто используемых видов переменных, которые позволяют хранить множество последовательных значений в “одном месте”. Однако когда речь идёт о JavaScript-е, то тут есть куда капнуть.

В этой статье мы рассмотрим тройку малоизвестных техник, которые можно применить при работе с массивами.

1. Добавление пользовательских свойств к массивам

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

Вообще говоря, множество вещей с которыми мы сталкиваемся в JavaScript-е представляет собой объекты. Справедливо будет отметить, что в языке так же присутствую и “примитивные” типы данных, но их значения так или иначе используются в свойствах внутри объектов.

2. Доступ к элементам массива в рамках цикла

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

В ECMAScript6 был представлен способ прокрутки массива без использования индексов, а через новый цикл for…of .

Цикл for...of предназначен для прохода по элементам массива, не затрагивая при этом индекс элемента.

Var ary = ["orange","apple","lychee"]; for (let item of ary){ console.log(item); } // "orange", "apple", "lychee" Для сравнения: вывод индексов элементов в цикле for. var ary = ["orange","apple","lychee"]; for (var item = 0; item < ary.length; item++){ console.log(item); } // 0, 1, 2

3. Количество элементов — не размерность массива

Когда речь идёт о размерности массива, то обычно мы думаем, что подразумевается количество хранящихся в нём элементов. На деле это не совсем так — свойство length рассчитывается в зависимости от максимального индекса элемента.

Свойство length очень неоднозначно. Чтобы в этом убедиться достаточно взглянуть на следующие манипуляции:

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

В последнем примере было достаточно поставить элемент на пятую позицию, в результате чего длина массива стала равна 6. Если вы думаете, что индексы от 0 до 4 создадутся автоматически, то будете неправы. Это можно проверить, используя оператор in .

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false

В данном случае будет справедливо назвать массив ary "разрежённым".

Так же мы можем манипулировать свойством length для того чтобы обрезать массивы. В примере, представленном ниже, демонстрируется “потеря” элемента под индексом 5, путём уменьшения значения свойства length массива ary .

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // undefined

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

Перед началом, хочу отметить, что данный текст является логическим продолжением похожего поста — , поэтому переходите по ссылочке и читайте 🙂

Добавление пользовательских свойств в массивы

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

Фактически, почти все, с чем мы имеем дело в JavaScript, является объектом . По сути есть два типа данных в JavaScript – примитивы и объекты , но примитивы всегда оборачиваются внутри объектов.

Цикл через элементы массива

После прочтения этого подзаголовка вы вероятно, подумали – «Ничего нового – это я уже знаю» и вы будете отчасти правы, ведь любой, даже новичок сможет пройти циклом по элементам массива, но на самом деле это все довольно абстрактно и цикл пройдет по индексам массива.

Поскольку индексы массива состоят только из неотрицательных целых чисел, в цикле мы «итерируем» целое значение, как правило, начиная с нуля и заканчивая числом, которое означает размер массива, а затем используем «итерированное» значение для доступа к элементу массива с заданным индексом.

Однако, в ECMAScript6 , есть способ с помощью которого можно пробежаться по значениям массива не задумываясь об индексах и сделать это можно с помощью for…of цикла.

В массиве for…of цикл будет перебирать элементы массива в порядке индексов, другими словами вам больше не нужно будет заботиться об итерации по индексам и получении существующего значения массива по заданному индексу . Цикл for…of идеально подойдет, если вы хотите просто циклично тупо вывести элементы массива и начать работать с ними. Например:

JavaScript

var arr = ["яблоко","банан","апельсин"]; for (let item of arr){ console.log(item); } // "яблоко","банан","апельсин"

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

JavaScript

var arr = ["яблоко","банан","апельсин"]; for (var item = 0; item < arr.length; item++){ console.log(item); } // 0, 1, 2

Число элементов не показывает истинный размер массива

Как правило, когда мы говорим о размере массива, мы думаем, что это – либо число имеющее значение, которое массив содержит, или размер, который мы дали массиву вручную. Однако, в действительности размер массива зависит от самого большого существующего индекса в нем.

Length — (я знаю, что это вообще называется длина, но я очень привык называть — размер, поэтому заранее простите если кого-то ввел в заблуждение) — очень гибкое свойство. Фиксировали ли вы уже размер массива заранее или нет, если вы продолжаете добавлять значения к массиву , его размер соответственно продолжает увеличиваться. Например:

JavaScript

var arr = ; arr.length = 3; console.log(arr.length); // 3 arr = "abcd"; console.log(arr.length); // 6

var arr = ;

arr . length = 3 ;

// 3

arr [ 5 ] = "abcd" ;

console . log (arr . length ) ;

// 6

В примере выше, вы видите, что я дал массиву только одно значение по индексу 5, и его размер стал 6. Теперь, если вы думаете, что, добавляя значение по индексу 5, массив создал индексы от 0 до 4 автоматически, тогда вы глубоко ошибаетесь. Нет действительно никаких существующих индексов от 0 до 4 в этом массиве. Вы можете проверить это используя in оператор.

JavaScript

var arr = ; arr.length = 3; console.log(arr.length); // 3 arr = "abcd"; console.log(arr.length); // 6 console.log(0 in arr); // false

var arr = ;

arr . length = 3 ;

console . log (arr . length ) ;

// 3

arr [ 5 ] = "abcd" ;

console . log (arr . length ) ;

JavaScript спроектирован на основе простой парадигмы. В основе концепции лежат простые объекты. Объект - это набор свойств, и каждое свойство состоит из имени и значения, ассоциированного с этим именем. Значением свойства может быть функция, которую можно назвать методом объекта. В дополнение к встроенным в браузер объектам, вы можете определить свои собственные объекты. Эта глава описывает как пользоваться объектами, свойствами, функциями и методами, а также как создавать свои собственные объекты.

Обзор объектов

Объекты в JavaScript, как и во многих других языках программирования, похожи на объекты реальной жизни. Концепцию объектов JavaScript легче понять, проводя паралелли с реально существующими в жизни объектами.

В JavaScript объект - это самостоятельная единица, имеющая свойства и определенный тип. Сравним, например, с чашкой. У чашки есть цвет, форма, вес, материал, из которого она сделана, и т.д. Точно так же, объекты JavaScript имеют свойства, которые определяют их характеристики.

Объекты и свойства

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

ObjectName.propertyName

Как и все переменные JavaScript, имя объекта (которое тоже может быть переменной) и имя свойства являются чуствительными к регистру. Вы можете определить свойство указав его значение. Например, давайте создадим объект myCar и определим его свойства make , model , и year следующим образом:

Var myCar = new Object(); myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969;

Неопределенные свойства объекта являются undefined (а не null).

MyCar. color; // undefined

Свойства объектов JavaScript также могут быть доступны или заданы с использованием скобочной записи (более подробно см. ). Объекты иногда называются ассоциативными массивами , поскольку каждое свойство связано со строковым значением, которое можно использовать для доступа к нему. Так, например, вы можете получить доступ к свойствам объекта myCar следующим образом:

MyCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["year"] = 1969;

Имена свойств объекта могут быть строками JavaScript, или тем, что может быть сконвертировано в строку, включая пустую строку. Как бы то ни было, доступ к любому имени свойства, которое содержит невалидный JavaScript идентификатор (например, имя свойства содержит в себе пробел и тире или начинается с цифры), может быть получен с использованием квадратных скобок. Этот способ записи также полезен, когда имена свойств должны быть динамически определены (когда имя свойства не определено до момента исполнения). Примеры далее:

Var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Dot syntax"; myObj["date created"] = "String with space"; myObj = "String value"; myObj = "Random Number"; myObj = "Object"; myObj[""] = "Even an empty string"; console.log(myObj);

Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведенном выше коде, когда ключ obj добавляется в myObj , JavaScript вызывает метод obj.toString () и использует эту результирующую строку в качестве нового ключа.

Вы также можете получить доступ к свойствам, используя значение строки, которое хранится в переменной:

Var propertyName = "make"; myCar = "Ford"; propertyName = "model"; myCar = "Mustang";

Вы можете пользоваться квадратными скобками в конструкции for...in чтобы выполнить итерацию всех свойств объекта, для которых она разрешена. Чтобы показать как это работает, следующая функция показывает все свойства объекта, когда вы передаете в нее сам объект и его имя как аргументы функции:

Function showProps(obj, objName) { var result = ""; for (var i in obj) { if (obj.hasOwnProperty(i)) { result += objName + "." + i + " = " + obj[i] + "\n"; } } return result; }

Так что если вызвать эту функцию вот так showProps(myCar, "myCar"), то получим результат:

MyCar.make = Ford myCar.model = Mustang myCar.year = 1969

Перечисление всех свойств объекта

Использование функции конструктора

Другой способ создать объект в два шага описан ниже:

Определите тип объекта, написав функцию-конструктор. Название такой функции, как правило, начинается с заглавной буквы.
Создайте экземпляр объекта с помощью ключевого слова new .

Чтобы определить тип объекта создайте функцию, которая определяет тип объекта, его имя, свойства и методы. Например предположим, что вы хотите создать тип объекта для описания машин. Вы хотите, чтобы объект этого типа назывался car , и вы хотите, чтобы у него были свойства make, model, и year. Чтобы сделать это, напишите следующую функцию:

Function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }

Заметьте, что используется this чтобы присвоить значения (переданные как аргументы функции) свойствам объекта.

Теперь вы можете создать объект, называемый mycar , следующим образом:

Var mycar = new Car("Eagle", "Talon TSi", 1993);

Эта инструкция создает объект типа Car с ссылкой mycar и присваивает определенные значения его свойствам. Значением mycar.make станет строка "Eagle", mycar.year - это целое число 1993, и так далее.

Вы можете создать столько объектов car, сколько нужно, просто вызывая new . Например:

Var kenscar = new Car("Nissan", "300ZX", 1992); var vpgscar = new Car("Mazda", "Miata", 1990);

Объект может иметь свойство, которое будет другим объектом. Например, далее определяется объект типа Person следующим образом:

Function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; }

и затем создать два новых экземпляра объектов Person как показано далее:

Var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");

Затем, вы можете переписать определение car и включить в него свойство owner , которому назначить объект person следующим образом:

Function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; }

Затем, чтобы создать экземпляры новых объектов, выполните следующие инструкции:

Var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);

Заметьте, что вместо того, чтобы передавать строку, литерал или целое число при создании новых объектов, в выражениях выше передаются объекты rand и ken как аргумент функции. Теперь, если вам нужно узнать имя владельца car2, это можно сделать следующим образом:

Car2.owner

Заметьте, что в любое время вы можете добавить новое свойство ранее созданному объекту. Например, выражение

Car1.color = "black";

добавляет свойство color к car1, и устанавливаего его значение равным "black." Как бы там ни было, это не влияет на любые другие объекты. Чтобы добавить новое свойство всем объектам одного типа, вы должны добавить свойство в определение типа объекта car .

Использование метода Object.create

Объекты также можно создавать с помощью метода Object.create . Этот метод очень удобен, так как позволяет вам указывать объект прототип для нового вашего объекта без определения функции конструктора.

// список свойств и методов для Animal var Animal = { type: "Invertebrates", // Значение type по умолчанию displayType: function() { // Метод отображающий тип объекта Animal console.log(this.type); } }; // Создаем объект Animal var animal1 = Object.create(Animal); animal1.displayType(); // Выведет:Invertebrates // Создаем объект Animal и присваиваем ему type = Fishes var fish = Object.create(Animal); fish.type = "Fishes"; fish.displayType(); // Выведет:Fishes

Наследование

Все объекты в JavaScript наследуются как минимум от другого объекта. Объект, от которого произошло наследование называется прототипом, и унаследованные свойства могут быть найдены в объекте prototype конструктора.

Индексы свойств объекта

В JavaScript 1.0 вы можете сослаться на свойства объекта либо по его имени, либо по его порядковому индексу. В JavaScript 1.1 и позже, если вы изначально определили свойство по имени, вы всегда должны ссылаться на него по его имени, и если вы изначально определили свойство по индексу, то должны ссылаться на него по его индексу.

Это ограничение налагается когда вы создаете объект и его свойства с помощью функции конструктора (как мы это делали ранее с типом Car ) и когда вы определяете индивидуальные свойства явно (например, myCar.color = "red"). Если вы изначально определили свойство объекта через индекс, например myCar = "25 mpg" , то впоследствии сослаться на это свойство можно только так myCar .

Исключение из правил - объекты, отображаемые из HTML, например массив forms . Вы всегда можете сослаться на объекты в этих массивах или используя их индекс (который основывается на порядке появления в HTML документе), или по их именам (если таковые были определены). Например, если второй html-тег

в документе имеет значение аттрибута NAME равное "myForm", вы можете сослаться на эту форму вот так: document.forms или document.forms["myForm"] или document.myForm .

Определение свойств для типа объекта

Вы можете добавить свойство к ранее определенному типу объекта воспользовавшись специальным свойством prototype . Через prototype создается свойство, единое для всех объектов данного типа, а не одного экземпляра этого типа объекта. Следующий код демонстрирует это, добавляя свойство color ко всем объектам типа car , а затем присваивая значение свойству color объекта car1 .

Car.prototype.color = null; car1.color = "black";

В коде ниже показано, как с помощью геттера и сеттера можно расширить прототип объекта Date и добавить ему свойство year, которое будет работать у всех экземпляров класса Date . Этот код использует существующие методы класса Date - getFullYear и setFullYear для работы геттера и сеттера.

Определение геттера и сеттера для свойства year:

Var d = Date.prototype; Object.defineProperty(d, "year", { get: function() { return this.getFullYear(); }, set: function(y) { this.setFullYear(y); } });

Использование свойства year заданного геттером и сеттером:

Var now = new Date(); console.log(now.year); // 2000 now.year = 2001; // 987617605170 console.log(now); // Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001

В принципе, геттеры и сеттеры могут быть либо:

Когда определение геттера и сеттера использует , все что вам нужно, это дополнить геттер префиксом get а сеттер префиксом set . При этом, метод геттера не должен ожидать каких либо параметров, в то время как метод сеттера принимает один единственный параметр (новое значение для присвоения свойству). Например:

Var o = { a: 7, get b() { return this.a + 1; }, set c(x) { this.a = x / 2; } };

Геттеры и сеттеры, могут быть добавлены существующему объекту в любой момент, при помощи метода Object.defineProperties . Первый параметр этого метода - объект, которому вы хотите присвоить геттер и сеттер. Второй параметр - это объект, имена свойств которого будут соответствовать именам создаваемых свойств, а значения - объекты определяющие геттер и сеттер создаваемых свойств. В следующем примере создаются в точности такие же геттер и сеттер, как и в примере выше:

Var o = { a: 0 }; Object.defineProperties(o, { "b": { get: function() { return this.a + 1; } }, "c": { set: function(x) { this.a = x / 2; } } }); o.c = 10; // Запускает сеттер, который присваивает 10 / 2 (5) свойству "a" console.log(o.b); // Запускает геттер, который возвращает a + 1 (тоесть 6)

То, какую из двух форм использовать для определения свойств, зависит от вашего стиля программирования и стоящей перед вами задачи. Если вы уже используете инициализатор объекта для определения прототипа, то, скорее всего, в большинстве случаев, вы воспользуетесь первой формой. Она более компактна и естественна. Однако, не редко, вторая форма является единственно возможной, в случаях, когда вы работаете с существующим объектом без доступа к его определению. Вторая форма наилучшим образом отражает динамическую природу JavaScript - но может сделать код сложным для чтения и понимания.

Удаление свойств

Вы можете удалить свойство используя оператор delete . Следующий код показывает как удалить свойство.

//Creates a new object, myobj, with two properties, a and b. var myobj = new Object; myobj.a = 5; myobj.b = 12; //Removes the a property, leaving myobj with only the b property. delete myobj.a;

Вы также можете воспользоваться delete чтобы удалить глобальную переменную, если ключевое слово var не было использовано при ее объявлении:

G = 17; delete g;

Для детального изучения читайте .
Для изучения классов ECMAScript 2015 (новый способ определения объектов), читайте главу .

Перевод

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

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 <= 4294967294) { console.log(a); } }
В данном примере на каждой итерации цикла выполняется две проверки:

то, что массив имеет собственное свойство с именем key (не наследованное из его прототипа).
то, что key - строка, содержащая десятичную запись целого числа, значение которого меньше 4294967294 . Откуда берется последнее число? Из определения индекса массива в ES5, из которого следует, что наибольший индекс, который может иметь элемент в массиве: (2^32 - 2) = 4294967294 .

Конечно, такие проверки отнимут лишнее время при выполнении цикла. Но в случае разреженного массива этот способ более эффективен, чем цикл for , поскольку в этом случае перебираются только те элементы, которые явно определены в массиве. Так, в примере выше будет выполнено всего 3 итерации (для индексов 0, 10 и 10000) - против 10001 в цикле for .

Чтобы не писать такой громоздкий код проверок каждый раз, когда требуется перебор массива, можно оформить его в виде отдельной функции:

Function arrayHasOwnIndex(array, key) { return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key <= 4294967294; }
Тогда тело цикла из примера значительно сократится:

For (key in a) { if (arrayHasOwnIndex(a, key)) { console.log(a); } }
Рассмотренный выше код проверок является универсальным, подходящим для всех случаев. Но вместо него можно использовать более короткую версию, хотя формально и не совсем правильную, но, тем не менее, подходящую для большинства случаев:

For (key in a) { if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) { console.log(a); } }

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

ES6, пока все еще пребывающий в статусе черновика , должен ввести в JavaScript итераторы.

Итератор - это реализуемый объектом протокол, который определяет стандартный способ получения последовательности значений (конечной или бесконечной).
Итератор - это объект, в котором определен метод next() - функция без аргументов, возвращающая объект с двумя свойствами:

done (boolean) - принимает значение true , если итератор достиг конца итерируемой последовательности. В противном случае имеет значение false .
value - определяет значение, возвращаемое итератором. Может быть не определено (отсутствовать), если свойство done имеет значение true .

Многие встроенные объекты, в т.ч. настоящие массивы, имеют итераторы по умолчанию. Простейший способ применения итератора в настоящих массивах - использовать новую конструкцию for...of .

Пример использования for...of:

Var val; var a = ["a", "b", "c"]; for (val of a) { console.log(val); }
В приведенном примере цикл for...of неявно вызывает итератор объекта Array для получения каждого значения массива.

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

Итераторы можно также использовать и явно, правда, в этом случае код становится значительно сложнее, по сравнению с циклом for...of . Выглядит это примерно так:

Var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done) { console.log(entry.value); }
В данном примере метод Array.prototype.entries возвращает итератор, который используется для вывода значений массива. На каждой итерации entry.value содержит массив вида [ключ, значение] .

II. Перебор массивоподобных объектов

Кроме настоящих массивов, в JavaScript встречаются также массивоподобные объекты . С настоящими массивами их роднит то, что они имеют свойство length и свойства с именами в виде чисел, соответствующие элементам массива. В качестве примеров можно назвать DOM коллекции NodeList и псевдомассив arguments , доступный внутри любой функции/метода.

1. Использование способов перебора настоящих массивов

Как минимум большинство, если не все, способы перебора настоящих массивов могут быть применены для перебора массивоподобных объектов.

Конструкции for и for...in могут быть применены к массивоподобным объектам точно тем же путем, что и к настоящим массивам.

ForEach и другие методы Array.prototype также применимы к массивоподобным объектам. Для этого нужно использовать вызов Function.call или Function.apply .

Например, если вы хотите применить forEach к свойству childNodes объекта Node , то это делается так:

Array.prototype.forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Для удобства повторного использования этого приема, можно объявить ссылку на метод Array.prototype.forEach в отдельной переменной и использовать ее как сокращение:

// (Предполагается, что весь код ниже находится в одной области видимости) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Если в массивоподобном объекте имеется итератор, то его можно использовать явно или неявно для перебора объекта таким же способом, как и для настоящих массивов.

2. Преобразование в настоящий массив

Есть также еще один, очень простой, способ перебора массивоподобного объекта: преобразовать его в настоящий массив и использовать любой из рассмотренных выше способов перебора настоящих массивов. Для преобразования можно использовать универсальный метод Array.prototype.slice , который может быть применен к любому массивоподобному объекту. Делается это очень просто, как показано в примере ниже:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Например, если вы хотите преобразовать коллекцию NodeList в настоящий массив, вам нужен примерно такой код:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update : Как было отмечено в комментариях