JavaScript 数组 forEach() 方法

JavaScript forEach() 语法

forEach() 是 JavaScript 数组的一个方法，它用于遍历一个数组。forEach() 方法会为数组每个元素依次执行一次相同的函数。

语法：

arr.forEach(callbackFn, thisArg)

说明：

forEach() 方法可以接收 2 个参数。

callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行该函数。
thisArg（可选）：回调函数中 this 指向的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数接收 3 个参数，说明如下。

element（必选）：表示当前处理的数组元素。
index（可选）：表示当前处理的元素下标。
array（可选）：表示当前数组对象（代表整个数组）。

注意:

forEach() 方法不会改变原数组，并且它也没有返回值。
break 和 continue 无法中断 forEach() 循环。
对于没有值的数组元素（即空槽元素），不会执行 forEach() 方法的回调函数。

数组的遍历方法

对于 JavaScript 数组来说，它主要有以下 5 种遍历方法。其中，map()、filter()、reduce()、reduceRight() 这 4 种可以看成是对 forEach() 方法的进一步封装。

forEach()：只会单纯遍历数组，在回调函数中对每一个元素进行 “相同操作”。它不会返回任何值，只是操作完就算了。
map()：遍历数组的同时，在回调函数中对每个元素进行 “相同操作”。然后将 “处理后的元素” 添加到新数组中，最终返回一个新数组。
filter()：遍历数组的同时，在回调函数中对每个元素进行 “过滤操作”。然后将 “符合条件的元素” 添加到新数组中，最终返回一个新数组。
reduce()：遍历数组的同时，在回调函数中对每个元素进行 “累积操作”。最终返回一个值（这个值不一定是数组）。
reduceRight()：功能与 reduce() 方法相同，只不过 reduce() 是从左到右操作数组元素，而 reduceRight() 是从右到左操作数组元素。

JavaScript forEach() 摘要

属于	JavaScript Array 对象
使用频率	高
修改原数组	否（回调函数内可能修改）
官方文档	查看
MDN	查看

JavaScript forEach() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript forEach() 方法是如何使用的。

示例 1：forEach() 基本用法

运行代码

const arr = [3, 9, 1, 12, 50, 21];
const result = [];
arr.forEach(function (element) {
    if (element > 10) {
        result.push(element);
    }
});
console.log(result);

输出结果如下：

[ 12, 50, 21 ]

分析：

forEach() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数又是一个函数。在实际开发中，我们更推荐使用 “箭头函数” 的方式书写 forEach() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
arr.forEach(function (element) {
    if (element > 10) {
        result.push(element);
    }
});

// 方式2：使用箭头函数
arr.forEach((element) => {
    if (element > 10) {
        result.push(element);
    }
});

此外，对于上面例子 forEach() 方法实现的功能，其实也可以使用 filter() 方法来实现，代码如下：

// 使用filter()实现
const arr = [3, 9, 1, 12, 50, 21];
const result = arr.filter(function (element) {
    return element > 10;
});
console.log(result);

示例 2：forEach() 代替 for

运行代码

const arr = [3, 9, 1, 12, 50, 21];
arr.forEach(function (element) {
    console.log(element);
});

运行结果如下。

分析：

想要遍历数组，除了 for 循环之外，同样也可以使用 forEach() 方法。

forEach() 的注意事项

对于 forEach() 来说，除了抛出异常之外，没有其他办法可以停止或中断循环。虽然 break 和 continue 可以中断 for 循环，但它们无法中断 forEach()。

示例 3：break 无法中断 forEach()

运行代码

const arr = [3, 9, 1, 12, 50, 21];
arr.forEach((element, index) => {
    console.log(element);
    if (index === 2) {
        break;
    }
});

运行结果如下。

(报错) SyntaxError: Illegal break statement

分析：

如果尝试在 forEach() 中使用 break，则会直接报错。如果想要在 forEach() 中使用 break 或 continue 的功能，我们可以使用 “曲线救国” 的方式。

使用 every() 或 some() 来模拟 break 的功能。
使用 return 语句来模拟 continue 的功能。

示例 4：模拟 break

运行代码

const arr = [3, 9, 1, 12, 50, 21];
arr.every((element) => {
    if (element % 2 === 0) {
        return false;
    } else {
        console.log(element);
        return true;
    }
});

运行结果如下。

3
9
1

分析：

这个例子实现的功能是：在遍历数组元素时，如果遇到偶数则退出循环。

示例 5：模拟 continue

运行代码

const arr = [3, 9, 1, 12, 50, 21];
arr.forEach((element) => {
    if (element % 2 === 0) {
        return;
    } else {
        console.log(element);
    }
});

运行结果如下。

分析：

这个例子实现的功能是：在遍历数组元素时，如果遇到偶数则跳过当前元素，然后继续循环下一个元素。