|
Till recently I always used a for-loop when I had to iterate over an array in JavaScript. For example:
var myArray = [1, 2, 3, 4];
for (var i = 0; i < myArray.length; i++) {
console.log(myArray[i]);
}
However, with ECMAScript 5 the Array object
itself got some methods for iteration purposes. With those methods you
often can write cleaner code than by using a for-loop. Let�s have a
(short) look at those methods. For details, please follow the provided
links.
forEach
The forEach() method calls the provided function for each array element. Using forEach(), we can rewrite the example from above to:
var myArray = [1, 2, 3, 4];
myArray.forEach(function (element) {
console.log(element);
});
filter
The filter()
method applies the provided filter function to each array element and
returns a new array with all elements for which the filter function
returned a true value.
For example, to get only the even numbers of an array we could write the following code:
var myArray = [1, 2, 3, 4];
var evenNumbers = myArray.filter(function (x) {
return x % 2 == 0;
});
// evenNumbers is [2, 4]
every & some
The every() and some()
methods are similar: whereas the every() method only returns true if
the provided testing function returns a true value for each array
element, the some() method returns true if there is at least one array
element for which the testing function returns a true value. You can see
the difference in this example:
var oddNumbers = [1, 3, 5, 7];
var mixedNumbers = [1, 2, 3, 4];
var evenNumbers = [2, 4, 6, 8];
oddNumbers.every(isEven); // returns false
oddNumbers.some(isEven); // returns false
mixedNumbers.every(isEven); // returns false
mixedNumbers.some(isEven); // returns true
evenNumbers.every(isEven); // returns true
evenNumbers.some(isEven); // returns true
function isEven(x) {
return x % 2 == 0;
}
map
The map() method applies the provided function to each array element and returns an array with the results.
For example, to square all values of an array we can do the following:
var myArray = [1, 2, 3, 4];
var squared = myArray.map(function (x) {
return x * x;
});
// squared is [1, 4, 9, 16]
reduce & reduceRight
The reduce() and reduceRight()
methods reduce an array step-by-step to a single value by using the
provided function and an optional initial value. It works in the
following way: the first two array elements (or the initial value and
the first array element) are passed as parameters to the provided
function. The result of this function call plus the next array element
are then used as new parameters for the function. And so on, until there
are no more array elements left.
The difference between reduce() and reduceRight() is that reduce()
iterates over the array from left-to-right whereas reduceRight()
iterates in the opposite direction, from right-to-left.
Here is a simple example to calculate the sum of the values of an array:
var myArray = [1, 2, 3, 4];
var initialValue = 10;
myArray.reduce(add); // performs 1 + 2 + 3 + 4 and returns 10
myArray.reduceRight(add); // performs 4 + 3 + 2 + 1 and returns 10
myArray.reduce(add, initialValue); // performs 10 + 1 + 2 + 3 + 4 and returns 20
myArray.reduceRight(add, initialValue); // performs 10 + 4 + 3 + 2 + 1 and returns 20
function add(x, y) {
return x + y;
}
That�s it. I hope I could give you an overview over the available iteration possibilities in JavaScript. Happy coding!
Update 2011-04-02: I found a site by Microsoft where you can test those methods in your browser: ECMAScript 5 Arrays
|