Array.forEach()
forEach () method is called once for each array element function (callback function).
<!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 three parameters:
- Element values
- Element Index
- Array itself
The above example uses only the parameter value. This 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()
map () method to create an array of new functions for the implementation of each array element by. map () method is not performed no function of the value of array elements. map () method does not change the original array.
This example each array value is multiplied 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 three parameters:
- Element values
- Element Index
- Array itself
When only the callback parameter value may be omitted and the array index parameters:
<!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 pass the test. This example creates a new array element value from 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>Please note that this function has three parameters:
- Element values
- Element Index
- 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>