【JavaScript】forEach 遍历数组详解

JavaScript 中 forEach 方法是一种常见且非常有用的数组遍历方式，广泛用于对数组中的每个元素执行某种操作。本文将详细介绍 forEach 方法的使用方式、优缺点以及实际应用场景，帮助开发者更好地掌握这一常见的数组遍历技术。

一、forEach 方法概述

1. forEach 方法简介

forEach 是 JavaScript 数组的一个原型方法，用于对数组中的每个元素依次执行给定的函数。与传统的 for 循环不同，forEach 通过回调函数的形式来处理数组元素，简化了数组遍历的代码书写，并提高了代码的可读性和可维护性。

2. 语法结构

forEach 方法的基本语法如下：

array.forEach(function(currentValue, index, array) {
  // 执行的操作
});

• currentValue：数组中正在处理的当前元素。
• index：当前元素的索引（可选）。
• array：当前正在遍历的数组（可选）。

3. forEach 方法的特性

• 不改变原数组：forEach 方法只会对数组中的每个元素执行回调函数，不会修改原数组本身。
• 无法中途停止：forEach 方法无法通过 break 或 return 提前终止循环。如果需要中途退出循环，应该考虑使用 for 循环或 some、every 等方法。

二、forEach 方法的基本用法

1. 遍历数组元素

forEach 最常见的用途就是遍历数组中的元素，对每个元素执行相应的操作。以下是一个简单的示例：

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

输出结果：

1
2
3
4
5

在这个示例中，forEach 方法会依次遍历 numbers 数组，并对每个元素执行 console.log 操作，输出对应的值。

2. 使用索引

forEach 方法的第二个参数 index 可以用来获取当前元素的索引。在某些情况下，索引信息对处理数组元素非常有用。例如：

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit, index) {
  console.log(`${index}: ${fruit}`);
});

输出结果：

0: apple
1: banana
2: cherry

3. 访问原数组

除了当前元素和索引外，forEach 方法还可以访问正在遍历的数组本身。虽然在大多数情况下不需要直接操作原数组，但在某些场景下，这个特性非常有用。例如：

const letters = ['a', 'b', 'c'];

letters.forEach(function(letter, index, array) {
  console.log(array);
});

输出结果：

['a', 'b', 'c']
['a', 'b', 'c']
['a', 'b', 'c']

每次回调函数执行时，array 参数都会指向原数组。

三、forEach 方法的实际应用

1. 修改 DOM 元素

forEach 可以用于遍历页面上的元素集合，并对每个元素进行操作。例如，通过 forEach 遍历所有的 div 元素，并为它们添加一个类：

const divs = document.querySelectorAll('div');

divs.forEach(function(div) {
  div.classList.add('highlight');
});

在这个例子中，forEach 遍历了所有 div 元素，并为每个 div 元素添加了 highlight 类。

2. 累加数组元素

forEach 也可以用于累加数组中的元素。虽然 reduce 方法在累加操作中更常用，但 forEach 也能达到类似的效果：

const numbers = [10, 20, 30];
let sum = 0;

numbers.forEach(function(number) {
  sum += number;
});

console.log(sum); // 60

3. 异步操作

虽然 forEach 是同步执行的，但它可以很好地与异步操作结合使用。例如，遍历一组数据并对每个数据项进行异步请求：

const urls = ['url1', 'url2', 'url3'];

urls.forEach(async function(url) {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
});

在这个例子中，forEach 结合 async/await，为每个 URL 发送请求并输出返回的数据。

四、forEach 方法的优缺点

1. 优点

• 简洁优雅：forEach 的语法简洁明了，代码可读性高，特别是与传统的 for 循环相比。
• 无需管理索引：forEach 自动处理索引，无需像 for 循环那样手动初始化、递增索引变量，减少了出错的可能性。
• 不改变原数组：forEach 方法不会修改原数组，保证了数据的不可变性，符合函数式编程的理念。

2. 缺点

• 无法中断循环：forEach 无法中途停止循环，无法通过 break 或 return 来提前退出。对于需要条件判断的场景，for 或 every、some 方法可能是更好的选择。
• 性能问题：在某些情况下，forEach 的性能可能不如 for 循环。在需要进行高性能、大规模数据处理的场景中，传统的 for 循环有时会表现得更好。
• 异步处理：forEach 不适用于异步循环，因为它不会等待异步操作完成。虽然可以结合 async/await 使用，但这并非它的主要设计用途。

五、forEach 与其他遍历方法的对比

1. for 循环

for 循环是最基础的数组遍历方法，可以灵活控制遍历的开始、结束条件及增量。与 forEach 相比，for 循环可以通过 break 提前退出，但代码相对繁琐。

for (let i = 0; i < array.length; i++) {
  // 逻辑
}

2. map 方法

map 方法与 forEach 类似，都是对数组元素进行遍历，但 map 方法会返回一个新数组。forEach 适用于只需要遍历但不返回新数组的场景，而 map 适合在遍历的同时生成新的数组。

const numbers = [1, 2, 3];
const doubled = numbers.map(function(number) {
  return number * 2;
});
console.log(doubled); // [2, 4, 6]

3. filter 方法

filter 方法也是遍历数组的一种方式，它会根据回调函数的返回值生成一个新的数组，包含所有返回 true 的元素。相比之下，forEach 只执行回调函数，不生成新数组。

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evens); // [2, 4]

六、注意事项

1. 不要修改原数组

尽量避免在 forEach 方法内部修改原数组，虽然 forEach 不会改变数组，但在回调函数中对原数组的修改可能会导致意料之外的结果。

2. 异步场景的处理

如前所述，forEach 不适合异步操作。在需要处理异步请求的场景中，使用 for...of 循环结合 async/await 通常是更好的选择。

七、总结

forEach 是 JavaScript 中一个非常强大且易于使用的数组遍历方法。它简化了数组操作的代码书写，特别适合需要对数组元素执行某些操作的场景。然而，forEach 也有其局限性，如无法中途退出和不适用于异步操作。因此，在实际开发中，应该根据具体需求选择最合适的数组遍历方式。

推荐：

• JavaScript
• react
• vue

---