[JavaScript] Detailed explanation of array iteration method

content

1.Array.forEach()

2.Array.map()

1.Array.forEach()

The forEach() method calls a function (callback function) once for each array element.

The function accepts 3 parameters:

item value
project index
the array itself

Features:

This method has no return value. It just traverses each item in the array without modifying the original array, but you can modify the original array by yourself through the index of the array.

Example:

var numbers = [45, 4, 9, 16, 25];
numbers.forEach(function(value,index,array){
    console.log(value);
});

output:

We can also output index, which is the index value of the array, in a loop, and we can also output the array itself. If we don't use the index and array parameters then we can omit them.

2.Array.map()

The map() method creates a new array by executing a function on each array element.
The map() method does not perform functions on array elements that have no value.
The map() method does not change the original array.

The function also accepts three parameters:

item value
project index
the array itself

When the callback function uses only the value parameter, the index and array parameters can be omitted:

Features:

The callback function of map supports return return value. What is returned is equivalent to changing this item in the array into something (it does not affect the original array, but is equivalent to cloning a copy of the original array, and the cloned one the corresponding item in the array of copies changed).

Example:

var txt = [];
var numbers = [45, 4, 9, 16, 25];
txt = numbers.map(function(value,index,array){
    return value*2;
});
console.log(txt);

output:

3.Array.filter()

The filter() method creates a new array containing the array elements that pass the test.

This function accepts 3 parameters:

item value
project index
the array itself

In the example below, the index and array parameters are not used by the callback function, so they can be omitted

Features:

If we need to filter the elements in the array and output them according to certain conditions, this method is the most suitable, and the filter conditions can be written in the callback function as the return value.

Example: (filter out elements greater than 20 in the array)

var txt = [];
var numbers = [45, 4, 9, 16, 25];
txt = numbers.filter(function(value,index,array){
    return value>20;
});
console.log(txt);

output:

4.Array.reduce()

The reduce() method accepts a function as an accumulator, and each value in the array (from left to right) is reduced to a value.

grammar:

array.reduce(function(prev, current, currentIndex, arr), initialValue)

prev: the initial value passed in by the function or the return value of the last callback
current: the value of the currently processed element in the array
currentIndex: current element index
arr: the array itself to which the current element belongs
initialValue: the initial value passed to the function

Application of reduce:

1. Array summation:

var sum = 0;
var numbers = [45, 4, 9, 16, 25];
sum = numbers.reduce(function(prev,current){
    return prev+current;
},0);
console.log(sum); //99

2. Count the number of occurrences of each element in the array:

var txt = ['curry', 'james', 'green', 'curry', 'thompson'];
var names = txt.reduce(function(pre,cur){
     if(cur in pre){
         pre[cur]++
     }else{
         pre[cur] = 1 
     }
     return pre
},{})
console.log(names); //{ curry: 2, james: 1, green: 1, thompson: 1 }

3. Sum the properties in the object:

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];
 
var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

5.Array.every()

This function accepts 3 parameters:

item value
project index
the array itself

If the callback function only uses the first parameter (value), other parameters can be omitted

Features:

If we need to judge whether all the elements in an array satisfy a condition, we can use the every method, if it is satisfied, it will return true, otherwise it will return false.

Example:

var sum;
var numbers = [45, 4, 9, 16, 25];
sum = numbers.every(function(value){
    return value>20;
});
console.log(sum); //false

6.Array.some()

This method also supports the three parameters of the above example. The difference between it and the ever method is that if there are elements in the array that meet the conditions, it will return true, and if there are no elements, it will return false.

Example:

var sum;
var numbers = [45, 4, 9, 16, 25];
sum = numbers.some(function(value){
    return value>20;
});
console.log(sum); //true

7.Array.indexOf()

The indexOf() method searches an array for an element value and returns its position (index value).

Example:

var result;
var numbers = [45, 4, 9, 16, 25];
result = numbers.indexOf(9)
console.log(result); //2