Foreach js for arrays and collections. All the ways to iterate over an array in JavaScript

• I. Iterating over real arrays
  1. forEach method and related methods
  2. for loop
  3. Proper use of the for...in loop
  4. for...of loop (implicit use of iterator)
  5. Explicit use of an iterator
• 1. Using real array iteration methods
  2. Convert to real array
  3. A note on runtime objects

I. Iterating over real arrays

1. method Array.prototype.forEach ;
2. classic for loop;
3. A "well-formed" for...in loop.

1. for...of loop (implicit use of iterator);
2. explicit use of an iterator.

1. The forEach method and related methods

Usage example:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
In general, the use of forEach requires the inclusion of the es5-shim emulation library for browsers that do not have native support for this method. These include IE 8 and earlier, which are still used in some places.

The advantage of forEach is that there is no need to declare local variables to store the index and value of the current array element, since they are automatically passed to the callback function as arguments.

If you're worried about the possible cost of calling a callback for each element, don't worry and read this.

ForEach is designed to iterate over all the elements of an array, but in addition to it, ES5 provides several more useful methods for iterating over all or some of the elements, plus doing something with them:

• every - returns true if for each element of the array, the callback returns a value that evaluates to true .
• some - returns true if for at least one element of the array, the callback returns a value that evaluates to true .
• filter - creates a new array containing those elements of the original array for which the callback returns true .
• map - creates a new array consisting of the values ​​returned by the callback.
• reduce - Reduces an array to a single value by applying the callback to each array element in turn, starting with the first one (can be useful for calculating the sum of array elements and other summary functions).
• reduceRight - works similar to reduce, but iterates over the elements in reverse order.

2. The for loop

Var a = ["a", "b", "c"]; var index; for (index = 0; index< a.length; ++index) { console.log(a); }
If the array length does not change throughout the loop, and the loop itself belongs to a performance-critical piece of code (which is unlikely), then you can use the "more optimal" version of for with array length storage:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }
In theory, this code should run a little faster than the previous one.

If the order of iteration of the elements is not important, then you can go even further in terms of optimization and get rid of the variable for storing the length of the array by reversing the iteration order:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
However, in modern JavaScript engines, such games with optimization usually mean nothing.

3. Proper use of the for...in loop

However, in some cases, such as iterating over sparse arrays, for...in can be useful, as long as you take precautions, as shown in the example below:

// a - sparse array 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); } }
In this example, two checks are performed on each iteration of the loop:

1. that the array has its own property named key (not inherited from its prototype).
2. that key is a string containing the decimal notation of an integer whose value is less than 4294967294 . Where does the last number come from? From the definition of an array index in ES5, which implies that the highest index an element in an array can have is (2^32 - 2) = 4294967294 .

In order not to write such a cumbersome check code every time you need to iterate over an array, you can write it as a separate function:

Function arrayHasOwnIndex(array, key) ( return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294; }
Then the body of the loop from the example will be significantly reduced:

For (key in a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
The code of checks considered above is universal, suitable for all cases. But instead of it, you can use a shorter version, although formally not quite correct, but, nevertheless, suitable for most cases:

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

4. The for...of loop (implicit use of an iterator)

iterator is an object-implemented protocol that defines a standard way to obtain a sequence of values ​​(either finite or infinite).
An iterator is an object that defines the next() method, a function with no arguments that returns an object with two properties:

1. done (boolean) - true if the iterator has reached the end of the iterable sequence. Otherwise, it is false .
2. value - defines the value returned by the iterator. May be undefined (missing) if the done property is set to true .

An example of using for...of:

Varval; var a = ["a", "b", "c"]; for (val of a) ( console.log(val); )
In the example above, the for...of loop implicitly calls an iterator of the Array object to get each value in the array.

5. Explicit use of an iterator

Var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done) ( console.log(entry.value); )
In this example, the Array.prototype.entries method returns an iterator that is used to display the values ​​of the array. On each iteration, entry.value contains an array of the form [key, value] .

II. Iterating over array-like objects

1. Using methods to iterate over real arrays

The for and for...in constructs can be applied to array-like objects in exactly the same way as real arrays.

ForEach and other Array.prototype methods also apply to array-like objects. To do this, you need to use a Function.call or Function.apply call.

For example, if you want to apply forEach to the childNodes property of a Node object, you would do it like this:

Array.prototype.forEach.call(node.childNodes, function(child) ( // do something with the child object));
For the convenience of reusing this technique, you can declare a reference to the Array.prototype.forEach method in a separate variable and use it as a shorthand:

// (Assuming all code below is in the same scope) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // do something with the child object));
If an array-like object has an iterator, then it can be used explicitly or implicitly to iterate over the object in the same way as for real arrays.

2. Convert to real array

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
For example, if you want to convert a NodeList collection into a real array, you would need code like this:

Vardivs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
update: As noted in the comments by rock and torbasow , in ES6 you can use the more descriptive Array.from method instead of Array.prototype.slice .

3. Note on Runtime Objects

Therefore, it is important to test the operation of the Array.prototype methods in each runtime (browser) in which you plan to use your application.

An article in which we will look at examples of using the function and method of the jQuery library each .

The jQuery library has 2 different entities called each .

The first (jQuery.each ) is a generic jQuery function that can be used to iterate over the elements of an array or object.

The second one (each ) is a method that is applied to a set of elements to loop through them.

The each(jQuery.each) loop. Examples of using

The syntax for the each function is:

// array or object - an array or object whose elements or properties are to be iterated // callback - a function that will be executed for each array element or object property $.each(array or object,callback);

We will analyze the work with the each function using examples.

Example #1. In it, let's iterate through all the elements of the array (array).

// array of 3 strings var arr = ["Car","Truck","Bus"]; // loop through the array arr $.each(arr,function(index,value)( // actions that will be performed for each element of the array // index is the current index of the array element (number) // value is the value of the current array element //print the array index and value to the console console.log("Index: " + index + "; Value: " + value); )); /* Result (in console): Index: 0; Value: Car Index: 1; Value: Truck Index: 2; Value: Bus */

In the code above, the each function is used to iterate over an array. The function has 2 required parameters. The first parameter is the entity (array or object) whose elements (properties) are to be iterated over. In this case, it's an array arr . The second parameter is a callback function that will be executed for each element (in this case) of the array. It has 2 parameters that are available inside it through the corresponding variables. The first parameter is the ordinal number of the element (counting starts from 0). The second parameter is the value of the current array element.

Example #2. In this example, we will enumerate all the properties of an object.

The each function can be used to iterate over JavaScript objects. The only difference in its use is that the parameters of the callback function have different values. The first parameter stores the name of the property of the object, and the second - the value of this property.

Example #3. In it, we will iterate over a more complex structure (we will consider how to use nested each ).

// object consisting of 2 properties. Each property of this object has as its value an array whose elements are also objects var articles = ( "Bootstrap": [ ("id":"1", "title":"Intro"), ("id":"2" , "title":"How to install"), ("id":"3", "title":"Grid") ], "JavaScript": [ ("id":"4", "title":"Basics "), ("id":"5", "title":"Element selection") ] ); $.each(articles,function(key,data) ( console.log("Section: " + key); $.each(data, function(index,value) ( ​​console.log("Article: id = " + value ["id"] + "; Title = "+ value["title"]); )); )); /* Result: Section: Bootstrap Article: id = 1; Title = Introduction Article: id = 2; Title = How to install Article: id = 3; Title = Grid Section: JavaScript Article: id = 4; Title = Basics Article: id = 5; Name = Selection of elements */

How to interrupt each (exit the loop)?

Breaking the each loop is done with the return statement, which must return false .

For example, let's break the execution of the each loop after we find the number 7 in the arr array:

// array consisting of 5 numbers var arr = ; // number to find var find = 7; // iterate through the array arr $.each(arr, function (index, value) ( ​​// if the required number is found, then.. if (value === find) ( // output it to the console console.log("Hurrah! Number " + find + " found! This number has index: " + index); // abort the loop return false; ) else ( // otherwise print the current number to the console console.log("Current number: " + value); ) )); /* Result (in console): Current number: 5 Current number: 4 Hooray! Number 7 found! This number has an index: 2 */

How to go to the next iteration (each continue)?

In each, interrupting the execution of the current iteration and moving on to the next one is done using the return statement, which must have a value other than false .

// array consisting of numbers var arr = ; // an array that should contain all elements of the arr array, except for even numbers var newarr = ; // loop through the array arr $.each(arr, function (index, value) ( ​​// if the element is even, then skip it if (value % 2 === 0) ( // stop the current iteration and move on to the next one return; ) // add value to newarr array newarr.push(value); )); console.log("Source array (arr): " + arr.join()); console.log("Result array (newarr): " + newarr.join()); /* Result (in console): Source array (arr): 3,5,4,9,17,19,30,35,40 Result array (newarr): 3,5,9,17,19,35 */

Iterate over the current elements (.each)

Syntax of each method (only applies to selected elements):

Let's see how the .each method works in the following example (let's iterate over the div elements):

In the example above, the each method uses the current set (elements selected with the $("div") selector). The each method handler is always a function that will be executed for each element of the current set (in this case, for each div element). This function has 2 optional parameters. One of them (index) is the serial number of the current iteration, and the second (element) is a DOM reference to the current element. In addition, the this keyword is available inside the function, which, like the second parameter, contains a DOM reference to the current element.

For example, let's output the value of the href attribute to the console for all elements a on the page:

$("a").each(function() ( console.log($(this).attr("href")); ));

$("a").each(function() ( var link = $(this).attr("href"); if ((link.indexOf("http://") == 0) || (link .indexOf("https://") == 0)) ( console.log("href links = " + link); ) )); // If the page contains the following links: // Yandex // How does JavaScript work? // Bootstrap // Then we will see the following result in the console: // https://www.yandex.ru/ // http://getbootstrap.com/

For example, let's look at how to loop each over DOM elements that have the class name (let's iterate over all elements of the same class).

For example, let's look at how to loop through all the elements on the page.

For example, let's print the value of all input elements on the page.

$("input").each(function() ( console.log($(this).val()); ));

For example, let's iterate over all child elements located in ul with id="myList" (each children).

• HTML
• JavaScript

Let's look at a way to determine the last index (element) in the jQuery each method.

// select elements var myList = $("ul li"); // determine the number of elements in the selection var total = myList.length; // loop through the selected elements myList.each(function(index) ( if (index === total - 1) ( // this is the last element in the selection ) ));

Not long ago, I needed JavaScript create associative array. Surprisingly, I have never needed him before in JavaScript. I climbed to search the Internet how to do it. And I was very surprised that a huge number of people write that this is impossible, in JavaScript he is not. Fortunately, my many years of experience told me that they are nonsense. So in the end I found out how to create an associative array in javascript, about which I will tell in this article.

Below is the code that an associative array is created, then another element is added and, finally, the array is looped through:

In this article, we have reviewed creating associative arrays, their change, as well as a complete enumeration through the loop for. Personally I have used associative arrays in JavaScript only once, but you need to know about such a possibility.