JavaScript Array forEach() 方法
JavaScript基础 2022-05-13 16:27:31小码哥的IT人生shichen
JavaScript Array forEach() 方法
实例
列出数组中的每一项：
var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
function myFunction(item, index) {
document.getElementById("demo").innerHTML += index + ":" + item + "<br>";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>forEach() 方法按顺序为数组中的每个元素调用一次函数。</p>
<p id="demo"></p>
<script>
let text = "";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
document.getElementById("demo").innerHTML = text;
function myFunction(item, index) {
text += index + ": " + item + "<br>";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 实例。
定义和用法
forEach() 方法按顺序为数组中的每个元素调用一次函数。
注释：对于没有值的数组元素，不执行forEach() 方法。
浏览器支持
所有浏览器都完全支持 forEach() 方法：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
语法
array.forEach(function(currentValue, index, arr), thisValue)
参数值
| 参数 | 描述 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| function(currentValue, index, arr) | 必需。为数组中的每个元素运行的函数。
函数参数：
|
||||||||
| thisValue |
可选。要传递给函数以用作其 "this" 值的值。 如果此参数为空，则值 "undefined" 将作为其 "this" 值传递。 |
技术细节
| 返回值： | undefined |
|---|---|
| JavaScript 版本： | ECMAScript 5 |
更多实例
获取数组中所有值的总和：
var sum = 0;
var numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);
function myFunction(item) {
sum += item;
document.getElementById("demo").innerHTML = sum;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>计算数组中值的总和：</p>
<p id="demo"></p>
<script>
let sum = 0;
const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = sum;
function myFunction(item) {
sum += item;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
对于数组中的每个元素：将值更新为原始值的 10 倍：
var numbers = [65, 44, 12, 4];
numbers.forEach(myFunction)
function myFunction(item, index, arr) {
arr[index] = item * 10;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>将每个元素的值乘以 10：</p>
<p id="demo"></p>
<script>
const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction)
document.getElementById("demo").innerHTML = numbers;
function myFunction(item, index, arr) {
arr[index] = item * 10;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
