Home > Web Front-end > Front-end Q&A > How to use foreach() in es6

How to use foreach() in es6

青灯夜游
Release: 2022-03-09 13:49:03
Original
6614 people have browsed it

In es6, the foreach() method is used to traverse the array, call each element of the array, and pass the element to the callback function for processing, the syntax "array.forEach(function(currentValue,index,arr) ,thisValue)”.

How to use foreach() in es6

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

In es6, the foreach() method is used to traverse the array, call each element of the array, and pass the element to the callback function for processing. The specific description is as follows:

array.forEach(function(currentValue, index, arr), thisValue)
Copy after login
ParameterDescription
function(currentValue, index, arr )Required. The function that needs to be called for each element in the array.
Function parameters: Parameter description currentValue is required. The current element index is optional. The index value of the current element. arr is optional. The array object to which the current element belongs.
thisValue Optional. The value passed to the function usually uses the "this" value.
If this parameter is empty, "undefined" will be passed to the "this" value

For each element that appears in the array, the forEach method will call the callbackfn function once , in ascending index order, but the callback function is not called for empty elements in the array.

In addition to array objects, the forEach method can also be used on any object that has a length property and has a numerically indexed property name, such as associative array objects, Arguments, etc.

The forEach method does not directly modify the original array, but the callback function may modify it. The results obtained by modifying the array object after the forEach method is started are as shown in the table.

The impact of the callback function modifying the array
Conditions after the forEach method is startedWhether the element is passed to the callback function
Add elements beyond the original length of the arrayNo
Add elements to fill missing elements in the array Yes, if the index has not been passed to the callback function
The element has changedYes, if the element has not been passed to the callback function
Remove element from arrayNo unless the element has been passed to the callback function

Example 1

The following example uses forEach to iterate the array a, and then output and display the value and subscript index of each element. The code is as follows:

function f(value,index,array) {
    console.log("a[" + index + "] = " + value);
}
var a = ['a', 'b', 'c'];
a.forEach(f);
Copy after login

The demonstration results are as follows:

How to use foreach() in es6

Example 2

The following example uses forEach to iterate the array a, then calculate the sum of the array elements and output it.

var a = [10, 11, 12], sum = 0;
a.forEach (function (value) {
    sum += value;
});
console.log(sum);  //返回33
Copy after login

Example 3

The following example demonstrates how to use the second parameter of the forEach() method, which is the this passing object of the callback function. When iterating over an array, the value of the array element is first read and then its value is overwritten.

var obj = {
    f1 : function(value,index,array) {
        console.log("a[" + index + "] = " + value);
        arrar[index] = this.f2(value);
    },
    f2 : function (x) {return x * x;}
};
var a = [12, 26, 36];
a.forEach(obj.f1, obj);
console.log(a);  //返回[144, 676, 1296]
Copy after login

[Related recommendations: javascript video tutorial, web front-end

The above is the detailed content of How to use foreach() in es6. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template