Javascript arrays loop through

Все способы перебора массива в 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$|^3\d*$/.test(key) && key > 

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

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

function arrayHasOwnIndex(array, key) < return array.hasOwnProperty(key) && /^0$|^1\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 – JS Iterate Tutorial

Joel Olawanle

An array is a single variable used to store elements of different datatypes so that they can be accessed through a single variable.

It is an ordered list of values, and each value is referred to as an element, which is specified by an index.

Knowing that these single variables contain a list of elements, you might want to create a list of these elements so that you can perform individual functions with them and much more. This is where the loop comes into play.

Here's an interactive scrim about how to loop through an array in JavaScript:

What are Loops in JavaScript?

A loop is a type of computer program that allows us to repeat a specific operation a predetermined number of times without having to write that operation individually.

For example, if we have an array and want to output each element in the array, rather than using the index number to do so one by one, we can simply loop through and perform this operation once.

There are numerous methods for looping through an array in JavaScript. In this article, we will go over the most commonly used so you can learn different approaches and understand how they work.

We will use the following array for this article:

const scores = [22, 54, 76, 92, 43, 33]; 

How to Loop Through an Array with a While Loop in JavaScript

You can use a while loop to evaluate a condition that is enclosed in parenthesis () . If the condition is true , the code inside the while loop is executed. If it is false , the loop is terminated.

If we want to loop through an array, we can use the length property to specify that the loop should continue until we reach the last element of our array.

Let's now use the while loop method to loop through the array:

This will return each element in our array one after the other:

In the loop above, we first initialized the index number so that it begins with 0 . Then the number will continue to increase and output each element until the condition we set returns false, indicating that we have reached the end of the array. When i = 6 , the condition will no longer be executed because the array's last index is 5 .

How to Loop Through an Array with a do…while Loop in JavaScript

The do. while loop is nearly identical to the while loop, except that it executes the body first before evaluating the condition for subsequent executions. This means that the loop's body is always executed at least once.

Let’s perform the same loop with the do…while loop to see how it works:

This will return each element in our array:

As previously stated, this will always run once before evaluating any condition set. For example, if we set the index i to 6 and it is no longer less than scores.length , the body of the loop will run first before checking the condition:

This will return a single undefined because we do not have an element in the array of index 6 but as you can see it ran once before stopping.

How to Loop Through an Array with a for Loop in JavaScript

The for loop is an iterative statement that checks for certain conditions and then executes a block of code repeatedly as long as those conditions are met.

We don't need to initialize the index first when using the for loop method because the initialization, condition, and iteration are all handled in the bracket, as shown below:

This will return all the elements as other methods have done:

How to Loop Through an Array with a for…in Loop in JavaScript

The for…in loop is an easier way to loop through arrays as it gives us the key which we can now use to get the values from our array this way:

This will output all the elements in our array:

How to Loop Through an Array with a for…of Loop in JavaScript

The for. of Loop iterates over iterable objects such as arrays, sets, maps, strings, and so on. It has the same syntax as the for. in loop, but instead of getting the key , it gets the element itself.

This is one of the easiest methods for looping through an array and was introduced in later versions of JavaScript ES6.

This gets each element of our array and we no longer need to make use of the index to get each element of our array:

How to Loop Through an Array with a forEach Loop in JavaScript

The array method forEach() loop's through any array, executing a provided function once for each array element in ascending index order. This function is known as a callback function.

This is a more advanced method that can do much more than simply loop through each element, but you can also use it to loop through this way:

You can write this in one line this way:

scores.forEach((score) => console.log(score)); 

And this will give us the same output as all previous methods:

Wrapping Up

In this article, we looked at six different/standard methods for looping through an array.

It is critical that you understand all of these methods and then determine which method is preferable for you, cleaner to use, and easier to read.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник