Javascript array loop function

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

Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений — метод forEach.

var a = ["a", "b", "c"]; a.forEach(function(entry) < console.log(entry); >); 

В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.

К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов.

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

• 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

Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:

var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index

Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.

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

var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index)

Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.

3. Правильное использование цикла for. in

Если вам посоветуют использовать цикл for. in , помните, что перебор массивов — не то, для чего он предназначен. Вопреки распространенному заблуждению цикл for. in перебирает не индексы массива, а перечислимые свойства объекта.

Тем не менее, в некоторых случаях, таких как перебор разреженных массивов, for. in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:

// a - разреженный массив var a = []; a[0] = "a"; a[10] = "b"; a[10000] = "c"; for (var key in a) < if (a.hasOwnProperty(key) && /^0$|^5\d*$/.test(key) && key > 

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

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

function arrayHasOwnIndex(array, key) < return array.hasOwnProperty(key) && /^0$|^3\d*$/.test(key) && key

Тогда тело цикла из примера значительно сократится:

Рассмотренный выше код проверок является универсальным, подходящим для всех случаев. Но вместо него можно использовать более короткую версию, хотя формально и не совсем правильную, но, тем не менее, подходящую для большинства случаев:

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

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

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

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

var val; var a = ["a", "b", "c"]; for (val of a)

В приведенном примере цикл for. of неявно вызывает итератор объекта Array для получения каждого значения массива.

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

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

var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done)

В данном примере метод 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: Как было отмечено в комментариях rock и torbasow, в ES6 вместо Array.prototype.slice можно использовать более наглядный метод Array.from .

3. Замечание по объектам среды исполнения

Если вы применяете методы Array.prototype к объектам среды исполнения (таких как DOM коллекции), то вы должны иметь в виду, что правильная работа этих методов не гарантирована во всех средах исполнения (в т.ч. в браузерах). Это зависит от поведения конкретного объекта в конкретной среде исполнения, если точнее, от того, как в этом объекте реализована абстрактная операция HasProperty . Проблема в том, что сам стандарт ES5 допускает возможность неправильного поведения объекта по отношению к этой операции (см. §8.6.2).

Поэтому важно тестировать работу методов Array.prototype в каждой среде исполнения (браузере), в которой планируется использование вашего приложения.

Источник

How to Loop through an Array in JavaScript

Looping through an array JavaScript is among the most frequent things a programmer will do. An array can include many data entries, and you may wish to do a task on all the data entries. For example, you have an array of numbers you wish to calculate the summation of them, or you have an array of objects and you want to add a property to all of these objects. There are several ways to iterate over an array in JavaScript. Let’s have a look and find the optimal one for you.

for loop

The classic and famous for loop iterates over any custom range of numbers you specify and runs a block of code on each iteration. Whenever you want to iterate over an array, an straight-forward way is to have a for loop iterating over the array's keys, which means iterating over zero to the length of the array.

Javascript array for loop

The for loop uses 3 expressions:

1. Initialization - initializes the loop variable with a starting value which can only be executed once.
2. Condition - specifies the situation under which the loop should be stopped.
3. Final expression - is performed at the end of each loop execution. It is used to increment the index.

for. in

The for. in loops through the properties of an object. It is among the most used and straightforward methods for iterating over objects. You define a variable like i in for (let i in arr) , and in each iteration, the variable i will become equal to a key in arr . Then you will be able to select the desired array element with something like arr[i] . See an example below.

Javascript array for..in loop

for. of

If you want to access the values inside an array directly, and not the keys, then you should use for. of instead of for. in .

Javascript while loop

Using for. of with entries() method

This one is a bit complex. Every array has a method entries() which returns an iterable of both keys and values of an array. using for. of with this method enables us to have an iteration over both keys and values.

Javascript while loop

while

The while loops through a block of code as long as a specified condition is true:

How to Loop through an Array in JavaScript

In the given example, the code in the loop will run over and over again, as long as a variable i is less than 10.

You can use break and continue in a while loop. But when you use the while loop you should take into account the increment for the next iteration. If you do not, then it may result in an infinite loop.

forEach()

An alternative to for and for/in loops is Array.prototype.forEach() . The forEach() runs a function on each indexed element in an array. Starting at index[0] a function will get called on index[0], index[1], index[2], etc… forEach() will let you loop through an array nearly the same way as a for loop:

Javascript while loop

let array = [< id: 1, name: 'John', age: 12 >, < id: 2, name: 'Jane', age: 14 >, < id: 3, name: 'Martin', age: 13 >, < id: 4, name: 'Katie', age: 17 >, < id: 5, name: 'Louis', age: 11 >]; array.forEach(function (profile, index, arr) < console.log(`Index: $, Name: $`); >);

As you saw, the forEach() method takes a function as an input argument, and applies the function to each element of the array in a sequential way. Also note that the function it takes as the input parameter is not supposed to return a value, thus cannot be regarded as a pure function.

map()

The map() method creates a new array with the results of calling a function for each array element. In the example below, we define an array named myFirstArray , and then multiply each element by 2 and store the result in a new array named mySecondArray. Try the code and you will notice that the first array remains unchanged.

How to Loop through an Array in JavaScript

const myFirstArray = [2, 3, 5, 7]; const mySecondArray = myFirstArray.map(el => el * 2); console.log('----myFirstArray----'); console.log(myFirstArray); console.log('----mySecondArray----'); console.log(mySecondArray);

At first sight, the map() method has similarities with the forEach() method since it will also invoke the callback function once for each array element. The difference is that map() creates and returns new arrays based on the callback function result.

Related Resources

Источник