Home >Web Front-end >JS Tutorial >How to use forEach(), Array.map() and Array.filter()? (code example)
This article will introduce to you the usage of forEach(), Array.map() and Array.filter(). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Array.forEach()
The forEach() method calls the function once for each array element (Callback). [Related course recommendations: JavaScript video tutorial]
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
</script>
</body>
</html>Please note that this function has 3 parameters:
● Element value
● Element index
●The array itself
The above example only uses the value parameter. The example can be rewritten as:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt = txt + value + "<br>";
}
</script>
</body>
</html>Array.map()
The map() method works by executing a function on each array element. Create new array. The map() method is a function that does not execute array elements without values. The map() method does not change the original array.
This example multiplies each array value by 2:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.map()</title>
<body>
<h2>JavaScript Array.map()</h2>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>Please note that this function has 3 parameters:
● Element value
● Element index
●The array itself
When the callback function only uses the value parameter, the index and array parameters can be omitted:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>Array.filter( )
#filter() method creates a new array containing the array elements of the passed test. This example creates a new array from elements with values greater than 18:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>
<h2>JavaScript Array.filter()</h2>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>Note that this function has 3 parameters:
● Element value
● Element index
●The array itself
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>
<h2>JavaScript Array.filter()</h2>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>This article comes from the js tutorial column, welcome to learn!
The above is the detailed content of How to use forEach(), Array.map() and Array.filter()? (code example). For more information, please follow other related articles on the PHP Chinese website!