Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 В этой статье мы рассмотрим три основных способа перебора элементов настоящего массива. Кроме того, посмотрим, как выполнять перебор массивоподобных объектов в JavaScript.

2 <h2>А. Перебор настоящих массивов</h2>

3 Для этого используются: 1. Известный метод Array.prototype.forEach. 2. Классический цикл for. 3. "Правильно" построенный цикл for...in.

4 Что же, давайте рассмотрим эти методы подробнее.

5 <h3>1. Метод forEach</h3>

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

7 var a = ["a", "b", "c"]; a.forEach(function(entry) { console.log(entry); });Достоинства forEach заключаются в том, что вам не надо объявлять локальные переменные, чтобы хранить индекс и значения текущего элемента массива, так как они автоматически передаются в функцию обратного вызова (так называемый колбэк) в качестве аргументов.

8 С помощью forEach вы не только сможете выполнить перебор всех элементов массива, но и получите возможность выполнения некоторых действий с массивами: 1)some- возвращает true, когда хотя бы для одного элемента массива колбэк возвращает значение, приводимое к true; 2)every- возвращает true, когда для каждого элемента массива колбэк возвращает значение, приводимое к true; 3)filter- обеспечивает создание нового массива, включающего те элементы исходного, для коих колбэк возвращает true; 4)reduce- сводит массив к единственному значению, т. е. колбэк применяется по очереди к каждому элементу массива, начиная с 1-го (полезно при вычислении суммы элементов массива и прочих итоговых функций); 5)map- обеспечивает создание нового массива, состоящего из значений, которые возвращаются колбэком; 6)reduceRight- работает так же, как и reduce с той лишь разницей, что перебирает элементы в обратном порядке.

9 <h3>2. Цикл for</h3>

10 Что тут скажешь - старый добрый for…

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

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

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

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

15 <h3>3. Правильное использование цикла for...in</h3>

16 Вообще, цикл for...in не предназначен для перебора массивов. Он перебирает не индексы нашего массива, а перечисляемые свойства объекта.

17 Однако, если нам нужен перебор<a>разреженных массивов</a>, цикл for...in может быть весьма полезным, если, разумеется, соблюдать меры предосторожности:

18 // a - разреженный массив var a = []; a[0] = "a"; a[10] = "b"; a[10000] = "c"; for (var key in a) { if (a.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) { console.log(a[key]); } }В вышеописанном примере на каждой циклической итерации осуществляются 2 проверки: 1) то, что массив имеет своё свойство с именем key (ненаследованное из его прототипа); 2) то, что key - это строка, содержащая десятичную запись целого числа, значение которого менее 4294967294.

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

20 Кстати, код проверок можете оформить в виде отдельной функции:

21 function arrayHasOwnIndex(array, key) { return array.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294; }В таком случае тело цикла существенно сократится:

22 for (key in a) { if (arrayHasOwnIndex(a, key)) { console.log(a[key]); } }Вышеописанный код универсален, но вы можете использовать версию и короче. Формально она не совсем правильна, зато подходит практически для любых случаев:

23 for (key in a) { if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) { console.log(a[key]); } }<h2>Б. Перебор массивоподобных объектов</h2>

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

25 <h3>1. Применяем способы перебора настоящих массивов</h3>

26 Практически все способы перебора настоящих массивов можно применять для перебора массивоподобных объектов. Например, при использовании конструкций for и for...in всё делается тем же путём.

27 Что касается forEach и прочих методов Array.prototype, то тут надо использовать вызов Function.apply.или Function.call.

28 Допустим, вы желаете применить forEach к свойству childNodes объекта Node:

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

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

31 <h3>2. Преобразование массивоподобного объекта в настоящий массив</h3>

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

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

34 var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);Кроме того, вместо Array.prototype.slice можно использовать и Array.from.

35 На этом всё, удачного вам кодинга!

36 <a>Источник</a>