JavaScript Array Iteration Methods

The method that performs an operation on each element of an array once is calledIterationmethod.

of an array'sIterationmethod is closely related to loops.

Array.forEach()

forEach()method to execute a provided function (a callback function) on each element of the array.

We can useforEach()Print each element of the array to the document.

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");
fruits.forEach(function(element, index, array) {
　　　　result.innerHTML　+= index　+　: ""　+　element　+　"<br>";
});

Note that this function has3Parameters:

• Element value (required)

• Element index (optional)

• Array itself (optional)

Because2An optional parameter (index, array) can be skipped, so we can skip them:

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");
fruits.forEach(function(element) {}}
　　　　result.innerHTML　+= element　+　"<br>";
});

Array.map()

map()The method returns a new array without changing the original array. At the same time, the elements in the new array are the values of the original array elements after calling the function, and are processed in the order of the elements in the original array.

Note: map() does not check empty arrays.

The following example multiplies each value by2elements to create a new array:

var nums1　= [1,　5,　20,　14,　55,　16
var nums2　= nums1.map(twice);
function twice(element, index, array) {
　　　return (element　*　2);
}

Note that this function has3Parameters:

• Element value (required)

• Element index (optional)

• Array itself (optional)

Because2An optional parameter (index, array) can be skipped, so we can skip them:

var nums1　= [1,　5,　20,　14,　55,　16
var nums2　= nums1.map(twice);
function twice(element) {
　　　return (element　*　2);
}

Array.filter()

filter()is a common operation in JavaScript's Array, used to filter out some elements of the Array and then return the remaining elements. Its main principle is that filter will apply the function passed in to each element in turn, and then decide to keep or discard the element based on whether the returned value is true or false.

In the following example, using values equal to or greater than18elements to create a new array:

var age = [1,　30,　39,　29,　10,　13
var val = age.filter(isAdult);
function isAdult(element, index, array) {
　　　　return element >=　18;
}

Note that this function has3Parameters:

• Element value (required)

• Element index (optional)

• Array itself (optional)

Because2An optional parameter (index, array) can be skipped, so we can skip them:

var age = [1,　30,　39,　29,　10,　13
var val = age.filter(isAdult);
function isAdult(element) {
　　　　return element >=　18;
}

Array.reduce()

reduce()The method takes a function as an accumulator, starts reducing each value in the array (from left to right), and finally calculates a single value.

This is common in numbers, for example, finding the sum of all numbers in an array.

var　nums　=　[10,　20,　30,　40,　50];
var sum = nums.reduce(getTotal);
function getTotal(x, y) {
　　　　return (x　+　y);
}

Please note that this function takes4Parameters:

• Initial value/The previously returned value (required)

• Element value (required)

• Element index (optional)

• Array itself (optional)

Array.find()

find()method returns the first value in the array that passes the given test.

In the following example, we will find the first value that is equal to or greater than18The first element:

var　num　=　[1,　30,　39,　29,　10,　13
var val = num.find(myFunc);
function　myFunc(element)　{
　　　　return element >=　18;
}

Note that this function has3Parameters:

• Element value (required)

• Element index (optional)

• Array itself (optional)

Array.findIndex()

findIndex()方法返回通过给定检测的数组中的第一个索引值。

在以下示例中，我们将找到等于或大于18的第一个元素的索引值：

var　num　=　[1,　30,　39,　29,　10,　13
var　val　=　num.findIndex(myFunc);
function　myFunc(element)　{
　　　　return element >=　18;
}

Note that this function has3Parameters:

• Element value (required)

• Element index (optional)

• Array itself (optional)

Array.every()

every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供检测）。

下面的示例检查所有数组值是否等于或大于18：

var　nums　=　[1,　30,　39,　29,　10,　13
var bool = nums.every(function(element) {
　　　　return element >=　18;
});
document.getElementById("result").innerHTML = bool;

Note that this function has3Parameters:

• Element value (required)

• Element index (optional)

• Array itself (optional)

Complete Array Reference

For a complete reference to properties and methods, please visit ourJavaScript Array Reference.

The reference section includes descriptions and examples of all array properties and methods.