An article in which we will look at examples using the jQuery each function and method.
There are 2 different entities in the jQuery library called each.
The first one (jQuery.each) is generic jQuery function with which you can iterate over the elements of an array or object.
The second (each) is a method that is applied to a set of items to loop over them.
Each loop (jQuery.each). Examples of using
The syntax for the each function is:
// array or object - an array or an object whose elements or properties you want to iterate over // callback - a function that will be executed for each element of an array or object property $ .each (array or object, callback);
Let's look at examples to work with the each function.
Example # 1. In it, we will iterate over all the elements of the array (array).
// an array of 3 lines var arr = ["Car", "Truck", "Bus"]; // iterate over 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 index and value of the array 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 above code, the each function is used to iterate over an array. The function has 2 required parameters... The first parameter is an entity (array or object), the elements (properties) of which must be iterated over. In this case, it is the arr array. 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 is performed from 0). The second parameter is the value of the current array element.
Example No. 2. In this example, we will iterate over all the properties of the object.
// a smartphone object with 5 properties var smartphone = ("name": "LG G5 se", "year": "2016", "screen-size": "5.3", "screen-resolution": "2560 x 1440 "," os ":" Android 6.0 (Marshmallow) "); // loop over the smartphone object $ .each (smartphone, function (key, value) (// actions that will be performed for each property of the object // key - the current name of the array property // value - the value of the current property of the object // display the name of the property and its value to the console console.log ("Property:" + key + "; Value:" + value);)); / * Result (in the console): Property: name; Value: LG G5 se Property: year; Value: 2016 Property: screen-size; Value: 5.3 Property: screen-resolution; Value: 2560 x 1440 Property: os; Value: Android 6.0 (Marshmallow) * / The each function can be used to iterate over JavaScript objects. The difference in its use is only that the parameters of the callback function have different values. The first parameter stores the name of the object property, and the second stores the value of this property.
Example No. 3. In it, we will iterate over a more complex structure (let's see how to use nested each).
// an object consisting of 2 properties. Each property of this object has an array as its value, the elements of which are also objects var articles = ("Bootstrap": [("id": "1", "title": "Introduction"), ("id": "2" , "title": "How to install"), ("id": "3", "title": "Grid")], "JavaScript": [("id": "4", "title": "Basics "), (" id ":" 5 "," title ":" Selection of elements ")]); $ .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 do I interrupt each (exit the loop)?
The each loop is interrupted with the return statement, which must return false.
For example, let's interrupt the execution of the each loop after we find the number 7 in the arr array:
// an array of 5 numbers var arr =; // the number to find var find = 7; // iterate over the arr array $ .each (arr, function (index, value) (// if the required number is found, then .. if (value === find) (// print it to the console console.log ("Hurray! The number "+ find +" was found! This number has an index: "+ index); // abort the loop execution 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 do I go to the next iteration (each continue)?
In each, the execution of the current iteration is interrupted and the transition to the next is carried out using the return statement, which must have a value other than false.
// array of numbers var arr =; // an array that must contain all the elements of the arr array, except for even numbers var newarr =; // iterate over the arr array $ .each (arr, function (index, value) (// if the element is even, then skip it if (value% 2 === 0) (// interrupt the current iteration and move on to the next one return; ) // add value to the newarr array newarr.push (value);)); console.log ("Original array (arr):" + arr.join ()); console.log ("Result array (newarr):" + newarr.join ()); / * Result (in console): Original array (arr): 3,5,4,9,17,19,30,35,40 Result array (newarr): 3,5,9,17,19,35 * /
Iterating over current items (.each)
The syntax for the each method (applies only to selected elements):
.each (function); // function - a function that will be executed for each element of the current object Let's see how the.each method works with the following example (iterating over div elements):
In the above example, the each method uses the current set (items 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 ordinal of the current iteration, and the second (element) is the DOM reference to the current element. In addition, inside the function is available keyword this, which, like the second parameter, contains a DOM reference to the current element.
For example, let's print to the console the value of the href attribute for all a elements 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 ("link href =" + link);))); // If the page contains the following links: // Yandex // How does JavaScript work? // Bootstrap // Then in the console we will see the following result: // https://www.yandex.ru/ // http://getbootstrap.com/
For example, consider how to organize an each loop by DOM elements that have the class name (let's iterate over all the elements of one class).
For example, let's take a look at how to iterate over all the elements on a 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 everything child elements located in the ul with id = "myList" (each children).
- Html
- JavaScript
Consider a way that you can determine the last index (element) in jQuery method each.
// select items var myList = $ ("ul li"); // determine the number of elements in the selection var total = myList.length; // iterate over the selected elements myList.each (function (index) (if (index === total - 1) (// this is the last element in the selection)));
The forEach () method executes a provided function once for each array element.
The source for this interactive example is stored in a GitHub repository. If you "d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
arr .forEach (callback (currentValue [, index [, array]]) [, thisArg])Parameters
callback Function to execute on each element. It accepts between one and three arguments: currentValue The current element being processed in the array. index Optional The index currentValue in the array. array Optional The array forEach () was called upon. thisArg Optional Value to use as this when executing callback.Return value
Description
forEach () calls a provided callback function once for each element in an array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized. (For sparse arrays,.)
callback is invoked with three arguments:
- the value of the element
- the index of the element
- the Array object being traversed
If a thisArg parameter is provided to forEach (), it will be used as callback "s this value. The thisArg value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function.
The range of elements processed by forEach () is set before the first invocation of callback. Elements which are appended to the array after the call to forEach () begins will not be visited by callback. If existing elements of the array are changed or deleted, their value as passed to callback will be the value at the time forEach () visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using shift ()) during the iteration, later elements will be skipped. (See this example, below.)
forEach () executes the callback function once for each array element; unlike map () or reduce () it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.
forEach () does not mutate the array on which it is called. (However, callback may do so)
There is no way to stop or break a forEach () loop other than by throwing an exception. If you need such behavior, the forEach () method is the wrong tool.
Early termination may be accomplished with:
Array methods: every (), some (), find (), and findIndex () test the array elements with a predicate returning a truthy value to determine if further iteration is required.
Examples
No operation for uninitialized values (sparse arrays)
const arraySparse = let numCallbackRuns = 0 arraySparse.forEach (function (element) (console.log (element) numCallbackRuns ++)) console.log ("numCallbackRuns:", numCallbackRuns) // 1 // 3 // 7 // numCallbackRuns: 3 // comment: as you can see the missing value between 3 and 7 didn "t invoke callback function.Converting a for loop to forEach
const items = ["item1", "item2", "item3"] const copy = // before for (let i = 0; i< items.length; i++) { copy.push(items[i]) } // after items.forEach(function(item){ copy.push(item) })Printing the contents of an array
Note: In order to display the content of an array in the console, you can use console.table (), which prints a formatted version of the array.
The following example illustrates an alternative approach, using forEach ().
The following code logs a line for each element in an array:
Function logArrayElements (element, index, array) (console.log ("a [" + index + "] =" + element)) // Notice that index 2 is skipped, since there is no item at // that position in the array ... .forEach (logArrayElements) // logs: // a = 2 // a = 5 // a = 9
Using thisArg
The following (contrived) example updates an object "s properties from each entry in the array:
Function Counter () (this.sum = 0 this.count = 0) Counter.prototype.add = function (array) (array.forEach (function (entry) (this.sum + = entry ++ this.count), this ) // ^ ---- Note) const obj = new Counter () obj.add () obj.count // 3 obj.sum // 16
Since the thisArg parameter (this) is provided to forEach (), it is passed to callback each time it "s invoked. The callback uses it as its this value.
An object copy function
The following code creates a copy of a given object.
There are different ways to create a copy of an object. The following is just one way and is presented to explain how Array.prototype.forEach () works by using ECMAScript 5 Object. * Meta property functions.
Function copy (obj) (const copy = Object.create (Object.getPrototypeOf (obj)) const propNames = Object.getOwnPropertyNames (obj) propNames.forEach (function (name) (const desc = Object.getOwnPropertyDescriptor (obj, name) Object .defineProperty (copy, name, desc))) return copy) const obj1 = (a: 1, b: 2) const obj2 = copy (obj1) // obj2 looks like obj1 now
If the array is modified during iteration, other elements might be skipped.
The following example logs "one", "two", "four".
When the entry containing the value "(! LANG: two" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.!}
forEach () does not make a copy of the array before iterating.
Let words = ["one", "two", "three", "four"] words.forEach (function (word) (console.log (word) if (word === "two") (words.shift ( )))) // one // two // four
Flatten an array
The following example is only here for learning purpose. If you want to flatten an array using built-in methods you can use Array.prototype.flat () (which is expected to be part of ES2019, and is already implemented in some browsers).
/ ** * Flattens passed array in one dimensional array * * @params (array) arr * @returns (array) * / function flatten (arr) (const result = arr.forEach ((i) => (if (Array. isArray (i)) (result.push (... flatten (i))) else (result.push (i)))) return result) // Usage const problem =, 8, 9]] flatten (problem) / /
Note on using Promises or async functions
let ratings = let sum = 0 let sumFunction = async function (a, b) (return a + b) ratings.forEach (async function (rating) (sum = await sumFunction (sum, rating))) console.log (sum) // Expected output: 14 // Actual output: 0Specifications
| Specification | Status | Comment |
|---|---|---|
| ECMAScript Latest Draft (ECMA-262) |
Draft | |
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of "Array.prototype.forEach" in that specification. |
Standard | |
| ECMAScript 5.1 (ECMA-262) The definition of "Array.prototype.forEach" in that specification. |
Standard | Initial definition. Implemented in JavaScript 1.6. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | Node.js | |
| forEach | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support Yes | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Last update: 26.03.2018
The Array object represents an array and provides a number of properties and methods through which we can manipulate the array.
Array initialization
It is possible to create an empty array using square brackets or the Array constructor:
Var users = new Array (); var people =; console.log (users); // Array console.log (people); // Array
You can immediately initialize the array with a number of elements:
Var users = new Array ("Tom", "Bill", "Alice"); var people = ["Sam", "John", "Kate"]; console.log (users); // ["Tom", "Bill", "Alice"] console.log (people); // ["Sam", "John", "Kate"]
You can define an array and define new elements in it along the way:
Var users = new Array (); users = "Tom"; users = "Kate"; console.log (users); // "Tom" console.log (users); // undefined
It doesn't matter that by default the array is created with zero length. With the help of indices, we can substitute one or another element for a specific index in the array.
length
To find out the length of an array, use the length property:
Var fruit = new Array (); fruit = "apples"; fruit = "pears"; fruit = "plums"; document.write ("In the array fruit" + fruit.length + "of the element:
"); for (var i = 0; i< fruit.length; i++)
document.write(fruit[i] + "
");
In fact, the length of the array will be the index of the last element with the addition of one. For instance:
Var users = new Array (); // there are 0 elements in the array users = "Tom"; users = "Kate"; users = "Sam"; for (var i = 0; i Browser output: Tom Kate undefined undefined Sam Despite the fact that for indices 2 and 3 we did not add elements, but the length of the array in this case will be number 5. It's just that the elements with indices 2 and 3 will have the value undefined. Array copying can be shallow or deep copy. With shallow copying, it is enough to assign the value to the variable to another variable that stores the array: Var users = ["Tom", "Sam", "Bill"]; console.log (users); // ["Tom", "Sam", "Bill"] var people = users; // shallow copy people = "Mike"; // change the second element console.log (users); // ["Tom", "Mike", "Bill"] In this case, the people variable after copying will point to the same array as the users variable. Therefore, when the elements in people change, the elements in users also change, since in fact it is the same array. This behavior is not always desirable. For example, we want the variables to point to separate arrays after copying. And in this case, deep copying can be used with the slice () method: Var users = ["Tom", "Sam", "Bill"]; console.log (users); // ["Tom", "Sam", "Bill"] var people = users.slice (); // deep copy people = "Mike"; // change the second element console.log (users); // ["Tom", "Sam", "Bill"] console.log (people); // ["Tom", "Mike", "Bill"] In this case, after copying, the variables will point to different arrays, and we can change them separately from each other. Also, the slice () method allows you to copy part of an array: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice (1, 4); console.log (people); // ["Sam", "Bill", "Alice"] The slice () method is passed the start and end indices, which are used to fetch values from the array. That is, in this case, the selection into a new array goes from index 1 to index 4, not including. And since array indexing starts from zero, the second, third and fourth elements will appear in the new array. The push () method adds an element to the end of the array: Var fruit =; fruit.push ("apples"); fruit.push ("pears"); fruit.push ("plums"); fruit.push ("cherry", "apricot The pop () method removes the last element from the array: Var fruit = ["apples", "pears", "plums"]; var lastFruit = fruit.pop (); // fetch the last element from the array document.write (lastFruit + " Browser output: Plums There are 2 elements in the fruit array: apples, pears The shift () method extracts and removes the first element from the array: Var fruit = ["apples", "pears", "plums"]; var firstFruit = fruit.shift (); document.write (firstFruit + " Browser output: Apples There are 2 elements in the fruit array: pears plums The unshift () method adds a new element to the beginning of the array: Var fruit = ["apples", "pears", "plums"]; fruit.unshift ("apricots"); document.write (fruit); Browser output: Apricots, apples, pears, plums The splice () method removes elements from a specific index. For example, removing items from the third index: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (3); console.log (deleted); // ["Alice", "Kate"] console.log (users); // ["Tom", "Sam", "Bill"] The slice method returns the removed elements. In this case, the deletion goes from the beginning of the array. If you pass a negative index, then the deletion will be performed from the end of the array. For example, let's remove the last element: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (-1); console.log (deleted); // ["Kate"] console.log (users); // ["Tom", "Sam", "Bill", "Alice"] An additional version of the method allows you to specify the ending index for the deletion. For example, let's remove from the first to the third index: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (1,3); console.log (deleted); // ["Sam", "Bill", "Alice"] console.log (users); // ["Tom", "Kate"] Another version of the splice method allows you to insert new elements instead of the deleted elements: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice (1,3, "Ann", "Bob"); console.log (deleted); // ["Sam", "Bill", "Alice"] console.log (users); // ["Tom", "Ann", "Bob", "Kate"] In this case, we delete three elements from 1st to 3rd indices and insert two elements instead. The concat () method is used to concatenate arrays: Var fruit = ["apples", "pears", "plums"]; var vegetables = ["tomatoes", "cucumbers", "potatoes"]; var products = fruit.concat (vegetables); for (var i = 0; i< products.length; i++)
document.write(products[i] + " In this case, it is not necessary to combine only arrays of the same type. It is possible and different types: Var fruit = ["apples", "pears", "plums"]; var prices =; var products = fruit.concat (prices); The join () method concatenates all the elements of an array into one string: Var fruit = ["apples", "pears", "plums", "apricots", "peaches"]; var fruitString = fruit.join (","); document.write (fruitString); The join () method is passed a separator between the elements of the array. In this case, a comma and a space (",") will be used as a separator. The sort () method sorts the array in ascending order: Var fruit = ["apples", "pears", "plums", "apricots", "peaches"]; fruit.sort (); for (var i = 0; i< fruit.length; i++)
document.write(fruit[i] + " Browser output: Apricots pears peaches plums apples The reverse () method reverses the array backwards: Var fruit = ["apples", "pears", "plums", "apricots", "peaches"]; fruit.reverse (); for (var i = 0; i< fruit.length; i++)
document.write(fruit[i] + " Browser output: Peaches apricots plums pears apples Combined with the sort () method, you can sort the array in descending order: Var fruit = ["apples", "pears", "plums", "apricots", "peaches"]; fruit.sort (). reverse (); for (var i = 0; i< fruit.length; i++)
document.write(fruit[i] + " Browser output: Apples plums peaches pears apricots The indexOf () and lastIndexOf () methods return the index of the first and last included element in the array. For instance: Var fruit = ["apples", "pears", "plums", "apples", "pears"]; var firstIndex = fruit.indexOf ("apples"); var lastIndex = fruit.lastIndexOf ("apples"); var otherIndex = fruit.indexOf ("cherries"); document.write (firstIndex); // 0 document.write (lastIndex); // 3 document.write (otherIndex); // -one firstIndex has a value of 0, since the first inclusion of the "apples" in the array falls on index 0, and the last one on index 3. If the element is not in the array, then the indexOf () and lastIndexOf () methods return -1. The every () method checks if all elements meet a certain condition: Var numbers = [1, -12, 8, -4, 25, 42]; function condition (value, index, array) (var result = false; if (value> 0) (result = true;) return result;); var passed = numbers.every (condition); document.write (passed); // false The every () method is passed as a parameter to a function that represents the condition. This function takes three parameters: Function condition (value, index, array) () The value parameter represents the currently iterated over element of the array, the index parameter represents the index of that element, and the array parameter passes a reference to the array. In this function, we can check the passed element value for compliance with some condition. For example, in this example, we check each element of the array to see if it is greater than zero. If more, then we return true, that is, the item matches the condition. If less, then we return false - the element does not meet the condition. As a result, when the numbers.every (condition) method is called, it iterates over all the elements of the numbers array and passes them in turn to the condition function. If this function returns true for all elements, then every () method returns true. If at least one element does not match the condition, then the every () method returns false. The some () method is similar to the every () method, except that it checks if at least one element matches a condition. And in this case, the some () method returns true. If there are no elements matching the condition in the array, then the value false is returned: Var numbers = [1, -12, 8, -4, 25, 42]; function condition (value, index, array) (var result = false; if (value === 8) (result = true;) return result;); var passed = numbers.some (condition); // true The filter () method, like some () and every (), accepts a condition function. But at the same time it returns an array of those elements that meet this condition: Var numbers = [1, -12, 8, -4, 25, 42]; function condition (value, index, array) (var result = false; if (value> 0) (result = true;) return result;); var filteredNumbers = numbers.filter (condition); for (var i = 0; i< filteredNumbers.length; i++)
document.write(filteredNumbers[i] + " Browser output: 1
8
25
42
The forEach () and map () methods iterate over the elements and perform certain operations on them. For example, you can use the following code to calculate the squares of numbers in an array: Var numbers = [1, 2, 3, 4, 5, 6]; for (var i = 0; i But using the forEach () method, you can simplify this construction: Var numbers = [1, 2, 3, 4, 5, 6]; function square (value, index, array) (var result = value * value; document.write ("Square of number" + value + "is" + result + " The forEach () method takes the same function as a parameter, into which, when iterating over the elements, the current iterable element is passed and operations are performed on it. The map () method is similar to the forEach method, it also accepts a function as a parameter that can be used to perform operations on the iterable elements of the array, but the map () method returns a new array with the results of operations on the elements of the array. For example, let's use the map method to calculate the squares of the numbers in an array: Var numbers = [1, 2, 3, 4, 5, 6]; function square (value, index, array) (return result = value * value;); var squareArray = numbers.map (square); document.write (squareArray); The function that is passed to the map () method receives the current iterated element, performs operations on it, and returns some value. This value then goes into the resulting squareArray. JavaScript method forEach () allows you to execute the passed function once for each element in the array in ascending index order. Please note that the callback function passed as a parameter of the method forEach () will not be called for deleted or missing array elements. The range of items processed by the method forEach () set before the first by calling the callback function. If the elements were added to the array after it was called, then the function will not be called on such elements. If the values of the existing array elements change at the time of execution, then the value passed to the function will be the value at the time when the method forEach () visits them. If items are deleted before being visited, then those items will not be visited. If elements that have already been visited are removed while traversing the array, then later elements will be skipped. If something is passed as a method parameter that is not a function object, then an exception will be thrown TypeError. Required parameter. In the following example, we will look at how to get the sum of all the elements of an array using JavaScript method forEach (): In the next example, we will look at using second method argument forEach () which points to an object that we can refer to using the this keyword inside the callback function: At the moment, there are three ways to iterate over the elements of a real array: In addition, soon, with the advent of the new ECMAScript 6 (ES 6) standard, two more ways are expected: If your project is designed to support the capabilities of the ECMAScript 5 (ES5) standard, you can use one of its innovations - the forEach method. Usage example: Var a = ["a", "b", "c"]; a.forEach (function (entry) (console.log (entry);)); In general, using forEach requires connecting 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 in use today. 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 potential cost of calling a callback for each item, don't worry and read this. forEach is designed to iterate over all the elements of an array, but besides it ES5 offers several more useful methods for iterating over all or some of the elements, plus performing some actions with them: Good old for rules: Var a = ["a", "b", "c"]; var index; for (index = 0; index< a.length; ++index) {
console.log(a);
}
If the length of the array remains unchanged throughout the entire 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 storing the length of the array: 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 slightly faster than the previous one. If the order of iteration 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 changing the iteration order to the opposite: Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index> = 0; --index) (console.log (a);) However, in modern JavaScript engines, these optimized games usually mean nothing. If you are advised to use a for ... in loop, remember that iterating over arrays is not what it is intended for. Contrary to the common misconception, the for ... in loop does not iterate over the array indices, but the enumerated properties of the object. However, in some cases, such as iterating over sparse arrays, for ... in can be useful, provided you take some precautions, as shown in the example below: // a is 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, at each iteration of the loop, two checks are performed: Of course, such checks will take up extra time when executing the loop. But in the case of a sparse array, this method is more efficient than a for loop, since in this case only those elements that are explicitly defined in the array are iterated over. So, in the example above, only 3 iterations will be performed (for indices 0, 10 and 10000) - versus 10001 in the for loop. In order not to write such a cumbersome code of checks every time you need to iterate over an array, you can design 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 above code of checks is universal, suitable for all cases. But instead, you can use a shorter version, although formally not entirely correct, but nevertheless suitable for most cases: For (key in a) (if (a.hasOwnProperty (key) && String (parseInt (key, 10)) === key) (console.log (a);)) ES6, while still in draft status, should introduce iterators into JavaScript. An iterator
is an object-implemented protocol that defines a standard way to obtain a sequence of values (finite or infinite). Many built-in objects, incl. real arrays have default iterators. The simplest way to use an iterator on real arrays is to use the new for ... of construct. An example of using for ... of: Var val; var a = ["a", "b", "c"]; for (val of a) (console.log (val);) In the above example, the for ... of loop implicitly calls the iterator of the Array object to get each value in the array. Iterators can also be used explicitly, however, in this case the code becomes much more complicated compared to the for ... of loop. It looks like this: Var a = ["a", "b", "c"]; var entry; while (! (entry = a.next ()). done) (console.log (entry.value);) In addition to real arrays, JavaScript also contains array-like objects
... What they have in common with real arrays is that they have a length property and properties with names in the form of numbers corresponding to the elements of the array. Examples include the DOM of the NodeList collection and the arguments pseudo-array available inside any function / method. At least most, if not all, methods of iterating over real arrays can be used to iterate over array-like objects. The for and for ... in constructs can be applied to array-like objects in exactly the same way as to real arrays. forEach and other Array.prototype methods also apply to array-like objects. To do this, you need to use a call to Function.call or Function.apply. For example, if you want to apply forEach to the childNodes property of a Node object, you can do it like this: Array.prototype.forEach.call (node.childNodes, function (child) (// do something with the child object)); For ease of reuse of this technique, you can declare a reference to the Array.prototype.forEach method in a separate variable and use it as a shorthand: // (This assumes all the 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. There is also another, very simple, way to iterate over an array-like object: convert it to a real array and use any of the above methods to iterate over real arrays. For conversion, you can use the generic Array.prototype.slice method, which can be applied to any array-like object. This is done very simply, as shown in the example below: Var trueArray = Array.prototype.slice.call (arrayLikeObject, 0); For example, if you want to convert a NodeList collection to a real array, you need code like this: Var divs = Array.prototype.slice.call (document.querySelectorAll ("div"), 0); If you apply Array.prototype methods to runtime objects (such as DOM collections), then you should keep in mind that these methods are not guaranteed to work correctly in all runtime environments (including browsers). It depends on the behavior of a particular object in a particular runtime, more precisely, on how the HasProperty abstract operation is implemented in this object. The problem is that the ES5 standard itself allows for the possibility of object misbehaving with respect to this operation (see §8.6.2). Therefore, it is important to test the operation of the Array.prototype methods in every runtime (browser) in which you plan to use your application.Copying an array. slice ()
push ()
"); document.write (fruit); // apples, pears, plums, cherries, apricotspop ()
"); document.write (" In the array fruit "+ fruit.length +" of the element:
"); for (var i = 0; i shift ()
"); document.write (" In the array fruit "+ fruit.length +" of the element:
"); for (var i = 0; i unshift ()
Removing an element by index. splice ()
concat ()
");
join ()
sort ()
");
reverse ()
");
");
Finding the index of an element
every ()
some ()
filter ()
");
forEach () and map ()
");); numbers.forEach (square);Definition and application
Browser support
Method
Opera
IExplorer
Edge forEach ()
Yes Yes Yes Yes 9.0
Yes
JavaScript syntax:
// only with callback function
array.forEach (function ( currentValue, index, arr));
// using an object that can be referenced by the this keyword
array.forEach (function ( currentValue, index, arr), thisValue);
JavaScript version
ECMAScript 5.1 (Implemented in JavaScript 1.6) Parameter values
Parameter Description
function
Callback function to be executed one times for each element in the array. The function takes the following parameters:
thisValue
An object that can be referenced by the this keyword inside the callback function. If the parameter thisValue is not used, then undefined will be used as the value of this (ultimately this will depend on the normal rules of the function execution context). Optional parameter.
Usage example
I. Iterating over real arrays
1. The forEach method and related methods
2. The for loop
3. Correct use of the for ... in loop
4. The for ... of loop (implicit use of an iterator)
An object has an iterator if the next () method is defined in it - a function with no arguments that returns an object with two properties:5. Explicit use of an iterator
II. Iterating over array-like objects
1. Using methods of iterating over real arrays
2. Convert to a real array
3. A note on runtime objects
